threejs 渐变色长方体
时间: 2024-10-11 15:02:00 浏览: 5
three.js是一个JavaScript库,用于在WebGL上创建复杂的3D图形。渐变色长方体在three.js中可以通过材质(Material)和纹理(Texture)来实现。首先,你需要创建一个立方体几何体(BoxGeometry),然后给它创建一个带渐变的材质,比如`THREE.GradientMaterial`,这个材质可以设置两个颜色的渐变范围。
下面是一个简单的示例代码:
```javascript
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
// 创建渐变材质
const gradientMaterial = new THREE.GradientMaterial({
colors: [0x00ff00, 0xff0000], // 绿色到红色的颜色渐变
map: null, // 可以选择加载图片作为纹理,这里直接用默认的纯色
});
// 创建长方体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1); // 宽高长各为1
const cube = new THREE.Mesh(boxGeometry, gradientMaterial);
scene.add(cube);
// 设置相机位置并渲染
camera.position.z = 5; // 设置相机远离长方体
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
在这个例子中,长方体贴上了渐变材质,每次动画循环时,长方体会旋转展示不同的视角效果,可以看到颜色的渐变效果。