Three.js 模拟公路上小车行驶教学

LeonGao
753 阅读3分钟

1. 简介

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它可以帮助开发者轻松地在网页上创建和展示 3D 场景。在本教程中，我们将使用 Three.js 来模拟公路上小车行驶的场景，让小车在公路上移动。

2. 环境搭建

首先，我们需要创建一个 HTML 文件，并引入 Three.js 库。可以通过以下代码来实现：

<!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;
            overflow: hidden;
        }

        #scene-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="scene-container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 后续代码将在这里编写
    </script>
</body>

</html>

转存失败，建议直接上传图片文件

在上述代码中，我们创建了一个 HTML 文件，并引入了 Three.js 库。同时，我们创建了一个 div 元素，用于容纳 Three.js 场景。

3. 创建场景、相机和渲染器

在 JavaScript 代码中，我们需要创建一个场景、一个相机和一个渲染器。代码如下：

// 创建场景
const scene = new THREE.Scene();

// 创建相机
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);
const sceneContainer = document.getElementById('scene-container');
sceneContainer.appendChild(renderer.domElement);

在上述代码中，我们创建了一个场景、一个透视相机和一个 WebGL 渲染器。然后，我们将渲染器的输出添加到 div 元素中。

4. 创建公路

接下来，我们需要创建公路。可以使用 THREE.PlaneGeometry 和 THREE.MeshBasicMaterial 来创建一个平面作为公路。代码如下：

// 创建公路
const roadGeometry = new THREE.PlaneGeometry(10, 100);
const roadMaterial = new THREE.MeshBasicMaterial({ color: 0x808080 });
const road = new THREE.Mesh(roadGeometry, roadMaterial);
road.rotation.x = -Math.PI / 2;
scene.add(road);

在上述代码中，我们创建了一个平面几何体和一个基本材质，然后将它们组合成一个网格对象，并将其添加到场景中。

5. 创建小车

我们可以使用 THREE.BoxGeometry 和 THREE.MeshBasicMaterial 来创建一个简单的小车。代码如下：

// 创建小车
const carGeometry = new THREE.BoxGeometry(1, 0.5, 2);
const carMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const car = new THREE.Mesh(carGeometry, carMaterial);
car.position.y = 0.25;
car.position.z = -40;
scene.add(car);

在上述代码中，我们创建了一个立方体几何体和一个基本材质，然后将它们组合成一个网格对象，并将其添加到场景中。

6. 让小车移动

为了让小车在公路上移动，我们需要在每一帧更新小车的位置。可以使用 requestAnimationFrame 函数来实现动画循环。代码如下：


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

        // 更新小车位置
        car.position.z += 0.1;

        // 如果小车超出公路范围，重置位置
        if (car.position.z > 50) {
            car.position.z = -40;
        }

        renderer.render(scene, camera);
    }

    animate();

在上述代码中，我们定义了一个 animate 函数，在每一帧更新小车的位置，并检查小车是否超出公路范围。如果超出范围，则重置小车的位置。最后，我们调用 renderer.render 函数来渲染场景。

7. 完整代码

以下是完整的代码：


    <!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;
                overflow: hidden;
            }

            #scene-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="scene-container"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
        <script>
            // 创建场景
            const scene = new THREE.Scene();

            // 创建相机
            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);
            const sceneContainer = document.getElementById('scene-container');
            sceneContainer.appendChild(renderer.domElement);

            // 创建公路
            const roadGeometry = new THREE.PlaneGeometry(10, 100);
            const roadMaterial = new THREE.MeshBasicMaterial({ color: 0x808080 });
            const road = new THREE.Mesh(roadGeometry, roadMaterial);
            road.rotation.x = -Math.PI / 2;
            scene.add(road);

            // 创建小车
            const carGeometry = new THREE.BoxGeometry(1, 0.5, 2);
            const carMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
            const car = new THREE.Mesh(carGeometry, carMaterial);
            car.position.y = 0.25;
            car.position.z = -40;
            scene.add(car);

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

                // 更新小车位置
                car.position.z += 0.1;

                // 如果小车超出公路范围，重置位置
                if (car.position.z > 50) {
                    car.position.z = -40;
                }

                renderer.render(scene, camera);
            }

            animate();
        </script>
    </body>

    </html>

8. 总结

通过本教程，我们学习了如何使用 Three.js 来模拟公路上小车行驶的场景。主要步骤包括创建场景、相机和渲染器，创建公路和小车，以及让小车在公路上移动。你可以根据自己的需求进一步扩展这个场景，例如添加光照、纹理、更多的车辆等。

avatar
文章
阅读
粉丝