5. Threejs案例-制作半色调和旋转效果-编程知识

5. Threejs案例-制作半色调和旋转效果

实现效果

代码

<!DOCTYPE html>
<html lang="en">
<head><title></title><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/EffectComposer.js"></script><script src="ThreeJS/RenderPass.js"></script><script src="ThreeJS/ShaderPass.js"></script><script src="ThreeJS/CopyShader.js"></script><script src="ThreeJS/HalftoneShader.js"></script><script src="ThreeJS/HalftonePass.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>// 获取ID为'myContainer'的HTML元素，用于在其中渲染3D场景const myContainer = document.getElementById('myContainer');// 创建一个WebGL渲染器实例renderer = new THREE.WebGLRenderer();// 设置渲染器的像素比率，以匹配设备的像素密度，提高图像清晰度renderer.setPixelRatio(window.devicePixelRatio);// 设置渲染器的大小，宽度和高度与浏览器窗口的大小一致renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器所用的HTML元素（一个canvas）添加到之前获取的'myContainer'元素中myContainer.appendChild(renderer.domElement);// 创建一个透视相机实例，参数分别是：视野角度、长宽比、近裁剪面距离和远裁剪面距离camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置，Z轴距离为400camera.position.z = 400;// 创建一个新的3D场景scene = new THREE.Scene();// 在场景中添加雾效果，颜色为黑色，近雾距离为1，远雾距离为1000scene.fog = new THREE.Fog(0x000000, 1, 1000);// 创建一个立方体的几何体，参数分别是：长度、宽度和高度，段数在X、Y和Z轴上分别是2、2和2const geometry = new THREE.BoxBufferGeometry(150, 150, 150, 2, 2, 2);// 创建一个网格材质，用于给几何体上色，这里没有特别指定材质的颜色或属性，所以默认是使用几何体的法线作为表面的颜色const material = new THREE.MeshNormalMaterial();// 使用几何体和材质创建一个网格（即3D模型），并将其添加到场景中mesh = new THREE.Mesh(geometry, material);scene.add(mesh);// 创建一个EffectComposer实例，用于在渲染过程中应用后期效果composer = new THREE.EffectComposer(renderer);// 创建一个RenderPass实例，用于将场景渲染到帧缓冲中renderPass = new THREE.RenderPass(scene, camera);// 定义HalftonePass效果所需的参数，包括形状、半径、旋转角度等视觉效果参数params = {shape: 1,radius: 4,rotateR: Math.PI / 12,rotateB: Math.PI / 12 * 2,rotateG: Math.PI / 12 * 3,scatter: 0,blending: 1,blendingMode: 1,greyscale: false,disable: false};// 创建一个HalftonePass实例，用于在渲染过程中应用半色调效果，并将该效果添加到EffectComposer中halftonePass = new THREE.HalftonePass(window.innerWidth, window.innerHeight, params);composer.addPass(renderPass); // 将主渲染效果添加到EffectComposer中composer.addPass(halftonePass); // 将HalftonePass效果添加到EffectComposer中// 定义一个动画函数，用于持续更新场景并渲染画面function animate() {requestAnimationFrame(animate); // 使用requestAnimationFrame函数来持续调用这个动画函数，以实现动画效果mesh.rotation.x += 0.005; // 让立方体绕X轴旋转，旋转角度为0.005弧度/帧mesh.rotation.y += 0.01; // 让立方体绕Y轴旋转，旋转角度为0.01弧度/帧composer.render(); // 使用EffectComposer来渲染场景并应用后期效果，将结果输出到屏幕中显示出来}// 开始动画循环，调用animate函数开始动画效果animate(); // 调用animate函数开始动画循环
</script>
</body>
</html>