个人网站备案名称例子网站建设技术服务

效果：旋转的彩色立方体

效果描述：

• 一个立方体在场景中旋转。
• 立方体的每个面有不同的颜色。
• 使用自定义着色器为立方体添加动态的光影效果。

---

代码实现

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';// 获取容器元素
const box = document.getElementById('box');// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000);
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(box.clientWidth, box.clientHeight);
box.appendChild(renderer.domElement);// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;// 创建立方体几何体
const geometry = new THREE.BoxGeometry(2, 2, 2);// 定义着色器 uniforms
const uniforms = {time: { value: 0, type: 'float' }, // 时间变量，用于动态效果color1: { value: new THREE.Color(0xff0000), type: 'vec3' }, // 颜色 1color2: { value: new THREE.Color(0x00ff00), type: 'vec3' }, // 颜色 2color3: { value: new THREE.Color(0x0000ff), type: 'vec3' }  // 颜色 3
};// 创建自定义着色器材质
const material = new THREE.ShaderMaterial({uniforms: uniforms,vertexShader: `varying vec3 vPosition;void main() {vPosition = position;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`,fragmentShader: `uniform float time;uniform vec3 color1;uniform vec3 color2;uniform vec3 color3;varying vec3 vPosition;void main() {// 根据位置和时间的动态颜色vec3 color = mix(color1, color2, sin(vPosition.x + time) * 0.5 + 0.5);color = mix(color, color3, cos(vPosition.y + time) * 0.5 + 0.5);gl_FragColor = vec4(color, 1.0);}`
});// 创建立方体网格并添加到场景中
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);// 动画循环
function animate() {requestAnimationFrame(animate);// 更新 uniforms 中的时间变量uniforms.time.value += 0.01;// 旋转立方体cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 更新控制器controls.update();// 渲染场景renderer.render(scene, camera);
}animate();// 窗口大小调整事件
window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight);camera.aspect = box.clientWidth / box.clientHeight;camera.updateProjectionMatrix();
};

---

代码说明

1. 场景和渲染器：

   • 创建了一个场景、透视相机和 WebGL 渲染器。
   • 渲染器绑定到 box 容器中。

2. 立方体几何体：

   • 使用 BoxGeometry 创建立方体。
   • 立方体的尺寸为 2x2x2。

3. 自定义着色器材质：

   • 使用 ShaderMaterial 创建自定义材质。
   • 顶点着色器将顶点位置传递给片元着色器。
   • 片元着色器根据顶点位置和时间动态混合颜色。

4. 动画循环：

   • 在 animate 函数中，更新 time 变量以实现动态颜色效果。
   • 立方体绕 X 轴和 Y 轴旋转。

5. 光源：

   • 添加环境光和点光源，使立方体看起来更立体。

6. 窗口大小调整：

   • 当窗口大小变化时，更新渲染器和相机的尺寸。

---

运行效果

• 你会看到一个旋转的立方体，每个面的颜色会根据时间和位置动态变化。
• 立方体的旋转和颜色变化是平滑的。

---

如何扩展

1. 修改颜色：

   • 在 uniforms 中修改 color1、color2 和 color3 的值，调整立方体的颜色。

2. 添加纹理：

   • 在片元着色器中使用 texture2D 加载纹理，并结合动态颜色效果。

3. 调整几何体：

   • 将立方体替换为其他几何体（如球体、环面等），观察不同几何体的效果。

4. 增加交互：

   • 通过鼠标或键盘事件动态修改 uniforms 的值，实现交互式效果。

---

尝试用AI辅助编写代码！