《Three.JS零基础入门教程》第二篇：起步案例
最新回答
人生如梦梦如烟
2026-05-16 23:32:50
起步案例：通过一个简单的立方体动画，快速体验Three.js的核心功能。
- 场景：三维世界的容器，用于放置物体。
- 相机：观察三维世界的视角，决定最终渲染的视图。
- 物体：被观察的对象，由几何形状和材质组成。
- 光源：提供光照和阴影，增强三维效果。
实现步骤：
创建三维场景：
const scene = new THREE.Scene();创建相机：
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000);camera.position.z = 5;创建渲染器：
const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);添加物体：
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);const cubeMaterial = new THREE.MeshNormalMaterial();const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);scene.add(cube);添加动画：
function animation() { cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); requestAnimationFrame(animation);}animation();
完整示例：
import * as THREE from 'three';// 1. 创建场景const scene = new THREE.Scene();// 2. 创建相机const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000);camera.position.z = 5;// 5. 创建立方体(几何+材质)const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);const cubeMaterial = new THREE.MeshNormalMaterial();const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);scene.add(cube);// 3. 创建渲染器const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 4. 渲染function animation() { cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); requestAnimationFrame(animation);}animation();效果：
- 初始效果：立方体可能看起来像二维正方形，因为缺乏视角变化。
- 动画效果：通过旋转立方体，可以观察到三维效果。
渲染优化：
- 开启抗锯齿：antialias: true
- 设置DPI：renderer.setPixelRatio(window.devicePixelRatio)
思考：
- 为什么初始立方体看起来像二维正方形？
因为相机位置固定，立方体没有旋转，缺乏视角变化。
总结：
- 通过起步案例，学习了Three.js的基本概念和实现步骤。
- 掌握了场景、相机、物体和渲染器的创建方法。
- 了解了如何通过动画增强三维效果。
- 学会了渲染优化的基本方法。
热门标签
