当前位置：首页 > news >正文

threejs开源代码之-旋转的彩色立方体

news 2025/6/29 3:29:35

效果：旋转的彩色立方体

在这里插入图片描述

效果描述：

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

代码实现

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();
};

代码说明

场景和渲染器：
- 创建了一个场景、透视相机和 WebGL 渲染器。
- 渲染器绑定到 box 容器中。
立方体几何体：
- 使用 BoxGeometry 创建立方体。
- 立方体的尺寸为 2x2x2。
自定义着色器材质：
- 使用 ShaderMaterial 创建自定义材质。
- 顶点着色器将顶点位置传递给片元着色器。
- 片元着色器根据顶点位置和时间动态混合颜色。
动画循环：
- 在 animate 函数中，更新 time 变量以实现动态颜色效果。
- 立方体绕 X 轴和 Y 轴旋转。
光源：
- 添加环境光和点光源，使立方体看起来更立体。
窗口大小调整：
- 当窗口大小变化时，更新渲染器和相机的尺寸。