JavaScript如何实现3D图形？Three.js怎样在网页中创建场景

来源：建站技术作者：BIT程序员头衔：程序员

导读：本期聚焦于小伙伴创作的《JavaScript如何实现3D图形？Three.js怎样在网页中创建场景》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《JavaScript如何实现3D图形？Three.js怎样在网页中创建场景》有用，将其分享出去将是对创作者最好的鼓励。

在网页中实现3D图形效果，Three.js是目前最主流的解决方案之一，它通过封装WebGL底层复杂逻辑，让开发者可以用简洁的JavaScript代码快速搭建3D交互场景。创建3D场景需要核心依赖三个基础组件，分别是场景、相机和渲染器，三者配合才能将3D内容最终呈现在网页上。

Three.js创建3D场景的核心概念

场景（Scene）

场景是所有3D对象的容器，你可以把它理解为一个虚拟的三维空间，所有的几何体、光源、相机都需要被添加到场景中，才能参与到最终的渲染流程里。场景本身没有大小限制，你可以自由往里面添加任意数量的3D元素。

相机（Camera）

相机的作用类似于人眼，它决定了场景中哪些区域会被渲染出来，以及渲染的视角和范围。Three.js提供了多种相机类型，其中透视相机<PerspectiveCamera>是最常用的，它能模拟人眼的视觉效果，近大远小的透视关系更符合真实世界的观察习惯。

渲染器（Renderer）

渲染器负责将场景和相机组合计算后的3D内容，输出为二维的像素图像，最终显示在网页的canvas元素上。WebGL渲染器<WebGLRenderer>是Three.js默认的高效渲染器，能利用GPU加速提升3D渲染性能。

完整创建3D场景的步骤

第一步：引入Three.js库

可以通过CDN的方式直接引入Three.js，也可以先通过npm安装到本地项目后再引入。这里采用CDN引入的方式，适合快速测试场景效果。

<!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://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
    <script>
        // 后续场景代码写在这里
    </script>
</body>
</html>

第二步：初始化场景、相机、渲染器

首先创建场景实例，然后配置透视相机的参数，包括视野角度、宽高比、近截面和远截面，最后初始化渲染器并设置输出尺寸，将渲染器的canvas元素添加到页面中。

// 创建场景
const scene = new THREE.Scene();
// 设置场景背景色为浅灰色
scene.background = new THREE.Color(0xf0f0f0);

// 创建透视相机
// 参数：视野角度，宽高比，近截面，远截面
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
// 设置相机位置，z轴方向往后移动5个单位
camera.position.z = 5;

// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器输出尺寸为窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的canvas元素添加到页面body中
document.body.appendChild(renderer.domElement);

第三步：添加几何体和材质

要让场景中有可见内容，需要创建几何体并搭配材质，然后将两者组合成网格对象添加到场景中。这里添加一个红色的立方体作为示例。

// 创建立方体几何体，参数为长宽高
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建基础网格材质，设置颜色为红色
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 组合几何体和材质生成网格对象
const cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);

第四步：添加光源

如果使用<MeshBasicMaterial>基础材质，不需要光源也能看到物体，但这种材质不会响应光照。如果要实现更真实的光照效果，建议使用<MeshStandardMaterial>标准材质，同时添加环境光和方向光。

// 创建环境光，均匀照亮所有物体
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);

// 替换之前的材质为标准材质
const standardMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
cube.material = standardMaterial;

第五步：实现动画循环

要让3D场景动起来，需要使用<requestAnimationFrame>实现动画循环，每一帧都更新物体的状态并重新渲染场景。

// 定义动画循环函数
function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);
    
    // 让立方体绕y轴和x轴旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    // 渲染场景，传入场景和相机
    renderer.render(scene, camera);
}
// 启动动画循环
animate();

第六步：处理窗口 resize 事件

当浏览器窗口大小发生变化时，需要同步更新相机的宽高比和渲染器的输出尺寸，避免场景拉伸变形。

// 监听窗口大小变化事件
window.addEventListener('resize', () => {
    // 更新相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机的投影矩阵
    camera.updateProjectionMatrix();
    // 更新渲染器的输出尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
});

完整可运行代码

将以下代码保存为HTML文件，直接在浏览器中打开就能看到旋转的红色立方体3D场景。

<!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基础3D场景</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
    <script>
        // 1. 初始化场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);

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

        // 3. 初始化渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 4. 添加几何体和材质
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 5. 添加光源
        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);

        // 6. 动画循环
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();

        // 7. 处理窗口resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

常见问题说明

如果页面只显示空白，首先检查Three.js库是否成功引入，然后确认相机位置是否设置合理，避免相机在几何体内部导致看不到物体。
使用标准材质时如果没有添加光源，物体会显示为全黑，这是正常的光照计算逻辑。
如果场景出现性能问题，可以适当降低渲染器的像素比，或者减少场景中复杂几何体的数量。

Three.js JavaScript 3D图形场景创建修改时间：2026-06-14 06:12:55

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。