three.js画出多个透明立方体
时间: 2023-05-16 14:06:01 浏览: 79
可以使用Three.js中的MeshStandardMaterial和BoxGeometry来创建多个透明立方体。以下是一个简单的示例代码:
```javascript
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建多个透明立方体
var material = new THREE.MeshStandardMaterial({ transparent: true, opacity: 0.5 });
for (var i = 0; i < 10; i++) {
var geometry = new THREE.BoxGeometry(1, 1, 1);
var cube = new THREE.Mesh(geometry, material);
cube.position.x = Math.random() * 10 - 5;
cube.position.y = Math.random() * 10 - 5;
cube.position.z = Math.random() * 10 - 5;
scene.add(cube);
}
// 渲染场景
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
```
希望这个示例代码能够帮助你画出多个透明立方体。