Three.js 入门示例

提示词

PROMPT
1
使用 Three.js 创建基础场景，包括场景、相机、渲染器和网格模型。

效果描述

这是一个最基础的 Three.js 入门示例，展示如何创建场景、相机、渲染器和网格模型。

效果特性

  • 基础场景：创建 Three.js 场景
  • 网格模型：创建立方体网格模型
  • 相机设置：设置相机位置和观察点
  • 渲染器：创建 WebGL 渲染器
  • 红色材质：使用红色基础材质
  • 模型位置：设置模型位置

核心参数

参数 值 说明
几何体 BoxGeometry 立方体几何体
几何体大小 100, 100, 100 XYZ 三方向大小
材质颜色 0xff0000 红色
相机位置 (200, 200, 200) 相机位置
观察位置 (0, 10, 0) 相机观察点
模型位置 (0, 10, 0) 模型位置

核心代码解析

创建场景

JAVASCRIPT
1
const scene = new THREE.Scene();

创建几何体和材质

JAVASCRIPT
1
2
3
4
5
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 10, 0);
scene.add(mesh);

创建相机

JAVASCRIPT
1
2
3
const camera = new THREE.PerspectiveCamera();
camera.position.set(200, 200, 200);
camera.lookAt(0, 10, 0);

创建渲染器

JAVASCRIPT
1
2
3
4
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);

技术亮点

  1. 基础架构：展示 Three.js 基础架构
  2. 场景创建：创建 Three.js 场景
  3. 网格模型：创建网格模型
  4. 相机设置：设置相机参数
  5. 渲染器：创建 WebGL 渲染器

调试技巧

  1. 几何体大小：调整几何体大小
  2. 材质颜色：调整材质颜色
  3. 相机位置：调整相机位置改变视角
  4. 观察点：调整观察点改变目标
  5. 模型位置：调整模型位置

扩展方向

  1. 动画循环：添加动画循环
  2. 控制器：添加轨道控制器
  3. 光源：添加光源
  4. 多个模型：添加多个模型
  5. 材质类型：使用不同材质类型

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。