Three.js基础入门教程：从零开始创建3D立方体

最新推荐文章于 2025-05-30 09:01:39 发布

芮妍娉Keaton

最新推荐文章于 2025-05-30 09:01:39 发布

阅读量346

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00474/article/details/148323189

版权

Three.js基础入门教程：从零开始创建3D立方体

three.js JavaScript 3D Library. 项目地址: https://gitcode.com/gh_mirrors/th/three.js

Three.js是一个强大的JavaScript 3D库，它让开发者能够轻松地在网页上创建和展示3D内容。本教程将带你了解Three.js的基础知识，并教你如何创建一个简单的3D立方体场景。

准备工作

在开始之前，你需要准备一个HTML文件，并添加一个canvas元素作为Three.js的渲染容器：

<body>
  <canvas id="c"></canvas>
</body>

初始化Three.js

首先，我们需要导入Three.js库并设置基本的渲染器：

import * as THREE from 'three';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas
  });
  // 其他代码...
}

这里有几个关键点需要注意：

我们使用type="module"的script标签来支持ES6模块
WebGLRenderer是Three.js的核心渲染器，负责将3D场景绘制到canvas上
antialias: true参数启用了抗锯齿功能，使边缘更加平滑

创建相机

3D场景需要一个相机来定义观察视角：

const fov = 75; // 视野角度(垂直方向)
const aspect = 2; // 画布宽高比
const near = 0.1; // 近裁剪面
const far = 5; // 远裁剪面
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2; // 将相机向后移动

相机参数解释：

fov(Field of View)：视野范围，单位是度
aspect：画布的宽高比
near和far：定义了渲染的深度范围，超出这个范围的物体不会被渲染

创建场景和立方体

接下来，我们创建一个场景和一个立方体：

const scene = new THREE.Scene();

// 创建立方体几何体
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

// 创建基础材质
const material = new THREE.MeshBasicMaterial({color: 0x44aa88});

// 创建网格对象(几何体+材质)
const cube = new THREE.Mesh(geometry, material);

// 将立方体添加到场景中
scene.add(cube);

渲染场景

最后，我们渲染场景：

renderer.render(scene, camera);

添加动画

为了让立方体动起来，我们可以使用requestAnimationFrame创建一个动画循环：

function render(time) {
  time *= 0.001; // 将时间转换为秒
  
  cube.rotation.x = time;
  cube.rotation.y = time;
  
  renderer.render(scene, camera);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

添加光照效果

为了使3D效果更明显，我们可以添加光照并使用响应光照的材质：

// 添加平行光
const color = 0xFFFFFF;
const intensity = 3;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);

// 使用Phong材质替代基础材质
const material = new THREE.MeshPhongMaterial({color: 0x44aa88});

创建多个立方体

我们可以扩展代码来创建多个立方体：

function makeInstance(geometry, color, x) {
  const material = new THREE.MeshPhongMaterial({color});
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  cube.position.x = x;
  return cube;
}

const cubes = [
  makeInstance(geometry, 0x44aa88, 0),
  makeInstance(geometry, 0x8844aa, -2),
  makeInstance(geometry, 0xaa8844, 2)
];

function render(time) {
  time *= 0.001;
  
  cubes.forEach((cube, ndx) => {
    const speed = 1 + ndx * 0.1;
    const rot = time * speed;
    cube.rotation.x = rot;
    cube.rotation.y = rot;
  });
  
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}