一站式织梦网站模板,创业网站建设方案项目书,给公司做门户网站,wordpress mu常见问题解答46. Three.js案例-创建颜色不断变化的立方体模型
实现效果 知识点
Three.js基础组件
WebGLRenderer
THREE.WebGLRenderer是Three.js提供的用于渲染场景的WebGL渲染器。它支持抗锯齿处理#xff0c;可以设置渲染器的大小和背景颜色。
构造器 antialias: 是否开启抗锯齿可以设置渲染器的大小和背景颜色。
构造器 antialias: 是否开启抗锯齿默认为false。setSize(width, height): 设置渲染器的宽度和高度。setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。
Scene
THREE.Scene是Three.js中的场景对象所有的物体都需要添加到场景中才能被渲染。
方法 add(object): 向场景中添加物体。
PerspectiveCamera
THREE.PerspectiveCamera是透视相机模拟人眼的视角效果。
构造器 fov: 视野角度Field of View通常设置为45度。aspect: 宽高比通常是窗口宽度除以高度。near: 近裁剪面距离。far: 远裁剪面距离。 属性 position: 相机的位置。lookAt(vector): 设置相机看向的目标位置。
ShaderMaterial
ShaderMaterial
THREE.ShaderMaterial允许用户自定义着色器通过编写GLSL代码来控制物体的外观。
构造器 uniforms: 传递给着色器的统一变量。 time: 时间变量类型为浮点数。resolution: 分辨率变量类型为二维向量。 vertexShader: 顶点着色器代码。fragmentShader: 片元着色器代码。
顶点着色器
顶点着色器负责计算每个顶点的位置并将一些数据传递给片元着色器。
varying vec2 vUv;
void main() {vUv uv;vec4 mvPosition modelViewMatrix * vec4(position, 1.0);gl_Position projectionMatrix * mvPosition;
}片元着色器
片元着色器负责计算每个像素的颜色。
uniform float time;
uniform vec2 resolution;
varying vec2 vUv;
void main( void ) {vec2 position -1.0 2.0 * vUv;float red abs(sin(position.x * position.y time / 5.0));float green abs(sin(position.x * position.y time / 4.0));float blue abs(sin(position.x * position.y time / 3.0));gl_FragColor vec4(red, green, blue, 1.0);
}Mesh
THREE.Mesh是网格对象由几何体和材质组成。
构造器 geometry: 几何体如BoxGeometry。material: 材质如ShaderMaterial。
动画
使用requestAnimationFrame函数实现动画效果不断更新物体的旋转角度和时间变量。
function animate() {myMesh.rotation.y myStep 0.01;myMesh.rotation.x myStep;myMesh.rotation.z myStep;myMesh.material.uniforms.time.value 0.1;requestAnimationFrame(animate);myRenderer.render(myScene, myCamera);
}代码
!DOCTYPE html
html
headmeta charsetUTF-8script srcThreeJS/three.js/scriptscript srcThreeJS/jquery.js/script
/head
body
div idmyContainer/div
script idmyVertexShader typex-shader/x-vertexvarying vec2 vUv;void main() {vUv uv;vec4 mvPosition modelViewMatrix * vec4(position, 1.0);gl_Position projectionMatrix * mvPosition;}
/script
script idmyFragmentShader typex-shader/x-fragmentuniform float time;uniform vec2 resolution;varying vec2 vUv;void main( void ) {vec2 position -1.0 2.0 * vUv;float red abs(sin(position.x * position.y time / 5.0));float green abs(sin(position.x * position.y time / 4.0));float blue abs(sin(position.x * position.y time / 3.0));gl_FragColor vec4(red, green, blue, 1.0);}
/script
script typetext/javascriptvar myRenderer new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);myRenderer.setClearColor(white, 1.0);$(#myContainer)[0].appendChild(myRenderer.domElement);var myScene new THREE.Scene();var myCamera new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 10, 130);myCamera.position.x 30;myCamera.position.y 30;myCamera.position.z 30;myCamera.lookAt(new THREE.Vector3(0, 0, 0));var myShaderMaterial new THREE.ShaderMaterial({uniforms: {time: {type: f, value: 1.0},resolution: {type: v2, value: new THREE.Vector2()},},vertexShader: $(#myVertexShader)[0].textContent,fragmentShader: $(#myFragmentShader)[0].textContent});var myBoxGeometry new THREE.BoxGeometry(16, 16, 16);var myMesh new THREE.Mesh(myBoxGeometry, myShaderMaterial);myScene.add(myMesh);var myStep 0;function animate() {myMesh.rotation.y myStep 0.01;myMesh.rotation.x myStep;myMesh.rotation.z myStep;myMesh.material.uniforms.time.value 0.1;requestAnimationFrame(animate);myRenderer.render(myScene, myCamera);}animate();
/script
/body
/html演示链接
示例链接
