资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Three.js基础场景

创作时间:

作者:

@小白创作中心

Three.js基础场景

引用

CSDN

https://m.blog.csdn.net/mmc123125/article/details/145136679

在3D图形开发中，无论是创建简单的三维模型还是复杂的交互式动画，场景（Scene）、相机（Camera）和渲染器（Renderer）都是不可或缺的核心组成部分。它们共同构成了Three.js的基础架构，就像建房子需要地基、墙壁和屋顶一样。本教程将深入剖析这三大核心要素，帮助你理解它们的原理和使用方法，并通过示例展示它们在实际开发中的作用。

一、场景（Scene）：3D世界的舞台

场景（Scene）是一个容器，负责存放所有的3D对象（如几何体、灯光、模型等）。可以理解为你的“3D世界”。

创建场景

使用Three.js创建场景非常简单，只需要一行代码：

const scene = new THREE.Scene();

场景的作用：

组织和管理3D对象。
设置场景中的环境（如背景颜色、纹理等）。

设置背景颜色

默认场景是透明的，你可以通过设置scene.background来更改背景颜色：

scene.background = new THREE.Color(0x87ceeb); // 浅蓝色背景

二、相机（Camera）：定义视角

相机（Camera）决定了用户“看”到场景的方式。它模拟了人类眼睛的视角和透视效果。Three.js提供了多种相机类型，其中最常用的是透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。

1. 透视相机（PerspectiveCamera）

透视相机模拟真实世界中的透视效果，近处物体看起来更大，远处物体看起来更小。

代码示例：

const camera = new THREE.PerspectiveCamera(
    75, // 视角（FOV）
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近剪裁面
    1000 // 远剪裁面
);

FOV（Field of View）：相机的视角，单位为角度（例如75°）。
Aspect Ratio：相机宽高比，通常设为window.innerWidth / window.innerHeight。
Near和Far：决定相机能看到的范围，分别是近剪裁面和远剪裁面之间的区域。

设置相机位置：

相机默认在原点(0, 0, 0)，但如果我们想要看清场景中的物体，需要将相机移到合适的位置：

camera.position.z = 5; // 将相机向后移动5个单位

2. 正交相机（OrthographicCamera）

正交相机没有透视效果，适合绘制2D场景或需要精确测量的3D场景。

代码示例：

const orthographicCamera = new THREE.OrthographicCamera(
    -10, // 左
    10,  // 右
    10,  // 上
    -10, // 下
    0.1, // 近剪裁面
    1000 // 远剪裁面
);

三、渲染器（Renderer）：将3D场景绘制到屏幕

渲染器（Renderer）是将场景和相机的组合结果渲染成2D图像并显示在网页上的核心组件。Three.js使用WebGL渲染器（WebGLRenderer），支持高性能的硬件加速。

创建渲染器

代码示例：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染尺寸
document.body.appendChild(renderer.domElement); // 将渲染器的canvas添加到页面

渲染器的重要方法：

renderer.render(scene, camera)：将场景通过相机渲染到屏幕上。
renderer.setSize(width, height)：设置渲染的宽度和高度。
renderer.setClearColor(color)：设置清除背景时的颜色。

四、综合示例：创建一个完整的基础3D场景

以下代码整合了场景、相机和渲染器，创建一个简单的3D场景，并绘制一个旋转的立方体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js基础场景</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000); // 黑色背景
        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        // 创建立方体
        const geometry = new THREE.BoxGeometry(); // 立方体几何体
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质
        const cube = new THREE.Mesh(geometry, material); // 几何体和材质组合成网格
        scene.add(cube); // 添加立方体到场景
        // 动画循环
        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); // 更新渲染器尺寸
        });
    </script>
</body>
</html>