使用three.js写一个立方体

KGH2023

关注

最新推荐文章于 2026-06-21 21:12:38 发布 · 543 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

three.js之自定义一个正方体（网格）本节主要通过自定义顶点和平面的方式，创造一个立方体。阅读详情

当使用Three.js来创建一个立方体时，你需要先创建一个场景（Scene）、一个相机（Camera），以及一个渲染器（Renderer）。然后，你可以创建一个立方体的几何体（Geometry）并为其添加材质（Material）。最后，将几何体添加到场景中并渲染出来。

下面是一个使用Three.js创建立方体的简单示例代码：

<div>
<a href="https://www.kangehao.com"></a>
</div>
// 创建场景
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 geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建立方体并将几何体和材质添加到其中
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
a

这段代码将创建一个绿色的立方体，并在场景中旋转。你可以根据自己的需求进行修改和扩展，例如改变立方体的尺寸、颜色、位置等。

请确保在使用前引入Three.js库，并在一个支持WebGL的浏览器中运行代码。