三维场景需要的最基础的构成-五八三

最近写了几篇二维图形学的，今天来说下三维图像学的最基础的构成，先铺垫下哈，那么下面我们将使用 JavaScript 和 Three.js 来实现相关的代码来介绍三维场景需要的最基础的构成，包括三维空间中的坐标系、三维物体的建模、三维物体的变换和组合、以及简单的光照和阴影处理。

1. 三维坐标系

在三维空间中，我们需要使用三个轴来表示空间中的位置。通常情况下，我们使用右手坐标系来表示三维空间的坐标系，其中 �x 轴指向右侧，�y 轴指向上方，�z 轴指向观察者的前方。

在 Three.js 中，我们可以使用 THREE.Vector3 类来表示三维坐标系中的点，该类的构造函数接受三个参数，分别表示 �x、�y 和 �z 轴的坐标值。例如：

javascriptCopy Code




const point = new THREE.Vector3(1, 2, 3);

表示在三维空间中的 (1,2,3)(1,2,3) 点。

2. 三维物体的建模

在三维空间中，我们可以使用多边形网格来表示三维物体。多边形网格由多个三角形组成，每个三角形由三个顶点和三条边组成。

在 Three.js 中，我们可以使用 THREE.Geometry 类来表示三维物体，该类包含顶点数组和面数组，分别用于表示该物体的顶点和面。例如：

javascriptCopy Code




const geometry = new THREE.Geometry();

geometry.vertices.push(
    new THREE.Vector3(-1, -1, 0),
    new THREE.Vector3(1, -1, 0),
    new THREE.Vector3(0, 1, 0)
);

geometry.faces.push(new THREE.Face3(0, 1, 2));

表示一个三角形，其中三个顶点的坐标分别为 (−1,−1,0)(−1,−1,0)、(1,−1,0)(1,−1,0) 和 (0,1,0)(0,1,0)。

3. 三维物体的变换和组合

在三维空间中，我们可以对三维物体进行一系列变换，例如平移、旋转、缩放等。在 Three.js 中，我们可以使用 THREE.Matrix4 类来表示三维物体的变换矩阵，以实现相应的变换。

例如，要将一个物体沿着 �x 轴方向平移 1010 个单位长度，我们可以使用下面的代码：

javascriptCopy Code




const matrix = new THREE.Matrix4().makeTranslation(10, 0, 0);
geometry.applyMatrix(matrix);

该代码使用 THREE.Matrix4 类的 makeTranslation() 方法创建一个平移矩阵，然后使用 THREE.Geometry 类的 applyMatrix() 方法应用该矩阵，以实现平移操作。

类似地，我们可以使用 makeRotation() 和 makeScale() 方法来创建旋转和缩放矩阵，以实现相应的变换。

除了单个物体的变换之外，我们还可以对多个物体进行组合操作。在 Three.js 中，我们可以使用 THREE.Group 类来将多个物体组合成为一个整体，并对整体进行变换操作。

例如，要将两个三角形沿着 �y 轴旋转 9090 度，我们可以使用下面的代码：

javascriptCopy Code




const group = new THREE.Group();
group.add(triangle1);
group.add(triangle2);


const matrix = new THREE.Matrix4().makeRotationY(Math.PI / 2);
group.applyMatrix(matrix);

该代码使用 THREE.Group 类的 add() 方法将两个三角形添加到一个组中，然后使用 THREE.Group 类的 applyMatrix() 方法将该组沿着 �y 轴旋转 9090 度。

4. 光照和阴影处理

在三维场景中，我们通常需要对光照和阴影进行处理，以增强场景的真实感。在 Three.js 中，我们可以使用 THREE.Light 类和 THREE.ShadowMap 类来实现相应的处理。

例如，要添加一个灯光到场景中，并启用阴影处理，我们可以使用下面的代码：

javascriptCopy Code




const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-1, 2, 4);
scene.add(light);


renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

该代码创建了一个白色定向光，并设置其位置为 (−1,2,4)(−1,2,4)。然后使用 THREE.WebGLRenderer 类的 shadowMap 属性启用阴影处理，并设置阴影类型为软阴影。

5. 完整代码实现

接下来，我们将结合上述内容，给出完整的代码实现。该代码使用 Three.js 库来创建一个简单的三维场景，并显示在浏览器中。

htmlCopy Code
<!DOCTYPE html>
<html>
    <head>
        <title>3D Scene Basics</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.jsdelivr.net/npm/three@0.132.0/build/three.min.js"></script>
    </head>
    <body>
        <script>
            // 创建场景、相机和渲染器
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // 创建一个白色定向光，并设置其位置
            const light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(-1, 2, 4);
            scene.add(light);

            // 启用阴影处理
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;

            // 创建一个三角形
            const geometry = new THREE.Geometry();
            geometry.vertices.push(
                new THREE.Vector3(0, 1, 0),
                new THREE.Vector3(-1, -1, 0),
                new THREE.Vector3(1, -1, 0)
            );
            geometry.faces.push(new THREE.Face3(0, 1, 2));
            const material = new THREE.MeshBasicMaterial({color: 0xffffff});
            const triangle = new THREE.Mesh(geometry, material);
            triangle.position.y = 0.5;
            triangle.castShadow = true;
            scene.add(triangle);

            // 将场景向后移动一定距离，以便观察到物体
            camera.position.z = 5;

            // 循环渲染场景
            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
            }
            animate();
        </script>
    </body>
</html>

上述代码将创建一个白色的三角形，并使用定向光对其进行照射，同时启用了阴影处理。