搜索
默认头像
未登录头像
您还未登陆
登录后可以享受本站更多功能
缩略图

Three.js入门教程：从零开始创建3D网页场景

2025年10月17日 文章分类 会被自动插入 会被自动插入
本文最后更新于2025-10-17已经过去了44天请注意内容时效性
热度50 点赞 收藏0 评论0

Three.js入门教程：从零开始创建3D网页场景

前言

在当今互联网时代，3D可视化技术正在以前所未有的速度发展。从电商平台的产品展示到数据可视化大屏，从在线教育到虚拟现实，3D技术的应用场景越来越广泛。作为前端开发者，掌握3D网页开发技能已经成为提升竞争力的重要途径。Three.js作为最流行的WebGL库，为我们打开了在浏览器中创建惊艳3D效果的大门。

什么是Three.js？

Three.js是一个基于WebGL的JavaScript 3D库，它封装了WebGL的底层API，让开发者能够用更简单的方式创建3D场景。WebGL虽然功能强大，但学习曲线陡峭，开发复杂。Three.js通过提供直观的API和丰富的功能，大大降低了3D网页开发的难度。

Three.js的核心优势

  • 易于学习：相比直接使用WebGL，Three.js的API更加友好
  • 功能丰富：内置几何体、材质、光源、相机等完整3D要素
  • 跨平台：基于Web标准，支持所有现代浏览器
  • 活跃社区：拥有庞大的开发者社区和丰富的资源
  • 持续更新：项目维护积极，不断引入新特性

环境搭建

在开始Three.js之旅前，我们需要搭建基础的开发环境。

基础HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js入门教程</title>
    <style>
        body { 
            margin: 0; 
            overflow: hidden; 
        }
        canvas { 
            display: block; 
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="./app.js"></script>
</body>
</html>

引入Three.js的方式

方式一：CDN引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

方式二：NPM安装

npm install three
import * as THREE from 'three';

Three.js核心概念

要理解Three.js，首先需要掌握其核心概念，这些概念构成了3D场景的基础。

场景（Scene）

场景是3D对象的容器，所有要渲染的物体、光源等都需要添加到场景中。

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff); // 设置背景色

相机（Camera）

相机定义了观察场景的视角。Three.js提供了多种相机类型，最常用的是透视相机。

// 透视相机参数：视野角度、宽高比、近裁剪面、远裁剪面
const camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
);
camera.position.z = 5; // 设置相机位置

渲染器（Renderer）

渲染器负责将场景和相机的内容渲染到HTML canvas元素中。

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

几何体（Geometry）

几何体定义了3D物体的形状。Three.js提供了多种内置几何体。

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

// 创建球体几何体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);

// 创建平面几何体
const planeGeometry = new THREE.PlaneGeometry(5, 5, 10, 10);

材质（Material）

材质定义了物体的外观特性，如颜色、纹理、透明度等。

// 基础网格材质
const material = new THREE.MeshBasicMaterial({ 
    color: 0x00ff00,
    wireframe: false 
});

// 标准网格材质（支持光照）
const standardMaterial = new THREE.MeshStandardMaterial({ 
    color: 0xff0000,
    roughness: 0.5,
    metalness: 0.5
});

网格（Mesh）

网格是几何体和材质的结合，构成了实际可见的3D物体。

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

创建第一个3D场景

现在让我们将这些概念组合起来，创建第一个完整的3D场景。

完整示例代码

// 初始化场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);

// 初始化相机
const camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
);
camera.position.z = 5;

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

// 响应窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

深入理解Three.js组件

光源系统

光源是创建真实感3D场景的关键。Three.js提供了多种光源类型：

环境光（AmbientLight）

const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

方向光（DirectionalLight）

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 10, 0);
directionalLight.castShadow = true;
scene.add(directionalLight);

点光源（PointLight）

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

聚光灯（SpotLight）

const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(0, 10, 0);
spotLight.angle = Math.PI / 6;
spotLight.penumbra = 0.1;
spotLight.decay = 2;
spotLight.distance = 200;
scene.add(spotLight);

材质详解

Three.js提供了丰富的材质类型，每种材质都有其特定的用途和效果。

MeshBasicMaterial

  • 基础材质，不受光照影响
  • 性能最好，适合不需要光照的物体

MeshLambertMaterial

  • 朗伯材质，对光照有反应
  • 性能较好，适合静态物体

MeshPhongMaterial

  • 冯氏材质，支持高光反射
  • 效果更好，性能稍差

MeshStandardMaterial

  • 基于物理的渲染材质
  • 现代3D应用的首选
// 标准材质示例
const standardMaterial = new THREE.MeshStandardMaterial({
    color: 0x3498db,
    roughness: 0.4,        // 粗糙度 0-1
    metalness: 0.8,        // 金属度 0-1
    normalScale: new THREE.Vector2(1, 1)
});

几何体进阶

除了基础几何体，Three.js还支持创建复杂几何体。

自定义几何体


const customGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,

     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0, -1.0,  1.0
]);
customGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3
淚
奈
硫
亂
正文结束 阅读本文相关话题
相关阅读
缩略图
XSS防护：构建坚不可摧的Web应用安全防线
缩略图
前端工程师职业发展路径：从入门到专家的完整指南
缩略图
前端安全：构建坚不可摧的Web应用防护体系
缩略图
移动端适配：打造跨设备无缝体验的关键策略
缩略图
人工智能与未来教育发展
缩略图
函数式编程如何改变软件开发思维
缩略图
Webpack配置完全指南：从入门到精通
缩略图
前端构建工具在现代Web开发中的核心价值与应用实践
评论框
正在回复
            评论列表

            暂时还没有任何评论,快去发表第一条评论吧~

            空白列表
            sitemap