三维盒子创作入门：从零开始探索ThreeJs

2023-06-18 15:02:53

三维图形入门：从零开始用 Three.js 创建盒子

Three.js 是一款功能强大的 JavaScript 库，可用于创建和渲染三维图形，广泛应用于游戏开发、增强现实和虚拟现实等领域。对于 Three.js 初学者，创建简单的三维盒子是一个绝佳的起点。

步骤 1：设置场景

首先，我们需要创建一个场景，它是一个容器，包含所有对象（如模型、灯光和相机）。使用以下代码：

const scene = new THREE.Scene();

步骤 2：创建模型

模型是表示三维对象的数据结构。创建一个立方体模型：

const geometry = new THREE.BoxGeometry(1, 1, 1); // 长方体尺寸
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质
const cube = new THREE.Mesh(geometry, material);

步骤 3：添加灯光

灯光用于照亮场景，让模型可见：

const light = new THREE.PointLight(0xffffff, 1, 100); // 白色点光源
scene.add(light); // 将光源添加到场景中

步骤 4：添加相机

相机用于查看场景：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 透视相机
camera.position.z = 5; // 设置相机位置

步骤 5：渲染场景

最后，渲染场景使其可见：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}

animate();

恭喜，您已经创建了第一个三维盒子！

常见问题解答

如何改变盒子的颜色？
- 修改 material 的 color 属性，如：material.color = new THREE.Color(0xff0000);
如何旋转盒子？
- 使用 cube.rotation.x、cube.rotation.y 和 cube.rotation.z 属性旋转盒子。
如何移动相机？
- 使用 camera.position.x、camera.position.y 和 camera.position.z 属性移动相机。
如何添加纹理？
- 使用 THREE.TextureLoader 加载图像纹理，然后将其应用到 material 中。
如何保存场景？
- 使用 JSON.stringify(scene) 将场景序列化为 JSON，然后将其导出到文件中。