46. Three.js案例-创建颜色不断变化的立方体模型
实现效果
知识点
Three.js基础组件
WebGLRenderer
THREE.WebGLRenderer是Three.js提供的用于渲染场景的WebGL渲染器。它支持抗锯齿处理，可以设置渲染器的大小和背景颜色。
- 构造器
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>
<head>
<meta charset="UTF-8">
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script id="myVertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
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);
}
</script>
<script type="text/javascript">
var 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>
演示链接
示例链接
