Three.js 零基础入门教程：创建基础 3D 场景

2023-09-11 14:36:12

Three.js：初学者的 3D 图形指南

步骤 1：创建 3D 场景

在 Three.js 中，场景是放置 3D 对象的虚拟画布。使用 THREE.Scene() 类创建一个新的场景。

var scene = new THREE.Scene();

步骤 2：创建相机

相机负责从特定角度观察场景。THREE.PerspectiveCamera() 类可创建透视相机。

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

步骤 3：创建渲染器

渲染器将场景中的对象绘制到屏幕上。使用 THREE.WebGLRenderer() 创建 WebGL 渲染器。

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

步骤 4：创建几何体

几何体是 3D 对象的基本形状。THREE.BoxGeometry() 类可以创建一个立方体。

var geometry = new THREE.BoxGeometry(1, 1, 1);

步骤 5：创建材质

材质定义 3D 对象的外观。THREE.MeshBasicMaterial() 类创建一个简单的基本材质。

var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

步骤 6：创建网格对象

网格对象是几何体和材质的结合。THREE.Mesh() 类创建一个网格对象。

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

步骤 7：渲染场景

最后，使用 THREE.WebGLRenderer.render() 方法将场景绘制到屏幕上。

renderer.render(scene, camera);

例子：创建一个立方体

以下是创建一个绿色立方体的完整代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script src="three.min.js"></script>
  <script>
    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);
    renderer.render(scene, camera);
  </script>
</body>
</html>