Three.min.js：全能的3D引擎

发布时间：2023-05-18

一、three.min.js 多大

three.min.js 文件大小约为 512KB，是由 three.js 引擎压缩而成的最小化版本。 three.min.js 是可以自己下载的，也可以从多个不同的外部来源获取。其中最受欢迎的是 CDN（Content Delivery Network，内容分发网络）。 在项目中使用 CDN 的好处是可以加快页面加载速度以及减少对所属服务器的流量负担。在 three.min.js 中使用 CDN 时，可以直接从 CDN 网站的链接中调用库文件，而不必将该文件的副本储存在项目服务器上。 以下是 three.min.js 的下载和使用示例：

<!DOCTYPE html>
<html>
<head>
    <title>Three.min.js示例</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script>
        alert(THREE.REVISION); // 在控制台中打印 three.min.js 的版本。
    </script>
</body>
</html>

二、three.min.js 与其他库的关系

在 three.min.js 中，包含了许多为三维图形计算和渲染构建的重要功能。为了展示这些功能，three.min.js 还需要依赖其他库，其中包括：

  • stats.js - 用于监测渲染帧数和性能瓶颈的 JS 文件；
  • dat.gui - 一个小的菜单调节 UI 库，用于改变场景中的参数值 以下是如何在项目中使用 three.min.js 和其他库的示例：
<!DOCTYPE html>
<html>
<head>
    <title>Three.min.js 及其他库的示例</title>
</head>
<body>
    <!-- 引入 three.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <!-- 引入 stats.js -->
    <script src="https://cdn.jsdelivr.net/npm/three-stdlib/stats.min.js"></script>
    <!-- 引入 dat.gui -->
    <script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.7/build/dat.gui.min.js"></script>
    <script>
        // 创建场景对象和各种参数
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        var gui = new dat.GUI();
        // 创建GUI菜单
        var parameters = { rotationSpeed: 0.02, zoom: 1, bounce: true };
        gui.add(parameters, 'rotationSpeed', 0, 0.5);
        gui.add(parameters, 'zoom', 0.01, 3);
        gui.add(parameters, 'bounce');
        // 创建3D立方体
        var geometry = new THREE.BoxGeometry();
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        // 调整相机的位置
        camera.position.z = 5;
        // 添加性能监测器的代码
        var stats = new Stats();
        document.body.appendChild(stats.dom);
        // 渲染帧数相关的代码
        var animate = function () {
            requestAnimationFrame(animate);
            cube.rotation.x += parameters.rotationSpeed;
            cube.rotation.y += parameters.rotationSpeed;
            cube.scale.x = parameters.zoom;
            cube.scale.y = parameters.zoom;
            cube.scale.z = parameters.zoom;
            if (parameters.bounce) {
                cube.position.y = Math.abs(Math.sin(cube.position.x / 2)) * 2;
            } else {
                cube.position.y = 0;
            }
            controls.update();
            renderer.render(scene, camera);
            stats.update(); // 更新性能数据
        };
        animate();
    </script>
</body>
</html>

三、three.min.js 中的重要基础对象

three.min.js 中一个重要的概念是基础对象，也称为构建块。这些基础对象形成了 3D 场景的基础，其中包括：

  • 场景（Scene）：所有 3D 渲染都发生在场景中。
  • 相机（Camera）：决定哪些部分会被渲染出场景。
  • 宽度、高度、深度、角度等属于视野和视线的基础对象
  • 几何形状（Geometry）：决定对象的大小和形状。
  • 材质（Material）：决定对象的外观，如颜色、纹理或透明度。
  • 光源（Light）：决定场景中的光照效果。
  • 网格（Mesh）：对象的基本表示方法，通常以几何形状和材料的组合。 以下是一个三维立方体的代码示例：
<!DOCTYPE html>
<html>
<head>
    <title>使用 three.min.js 创建立方体的示例</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script>
        // 创建场景对象
        var scene = new THREE.Scene();
        // 创建相机对象（三维场景中类似于观察者，自定义摄像机位置）
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 创建渲染器（WebGL 渲染，基于 three.js）
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        // 创建几何形状
        var geometry = new THREE.BoxGeometry();
        // 创建材质
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        // 创建网格对象
        var cube = new THREE.Mesh(geometry, material);
        // 将网格对象添加到场景中
        scene.add(cube);
        // 调整相机的位置
        camera.position.z = 5;
        // 渲染函数
        var animate = function () {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        };
        animate();
    </script>
</body>
</html>

四、three.min.js 与 React

three.min.js 是一个非常强大的 3D 引擎，因此它在多种不同的平台和框架中都可以使用。React 是一种流行的 JavaScript 框架，它是一个构建用户界面的库。 以下是一个使用 three.min.js 和 React 构建 3D 立方体的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Three.min.js 和 React 构建立方体的示例</title>
</head>
<body>
    <div id="root"></div>	
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script type="module">
        // 将 React 构造函数提取出来
        const { useState, useEffect, useRef } = React;
        // 创建场景、相机和网格对象
        const App = () => {
            const mount = useRef(null);
            const [cube, setCube] = useState(null);
            const [scene] = useState(new THREE.Scene());
            const [camera] = useState(new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000));
            useEffect(() => {
                // 创建几何形状
                const geometry = new THREE.BoxGeometry(1, 1, 1);
                // 创建材质
                const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
                // 创建立方体
                const cubeObject = new THREE.Mesh(geometry, material);
                setCube(cubeObject);
                // 将网格对象添加到场景中
                if (mount.current) {
                    scene.add(cubeObject);
                    camera.position.z = 5;
                    const renderer = new THREE.WebGLRenderer({ antialias: true });
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    mount.current.appendChild(renderer.domElement);
                    // 渲染函数
                    const animate = function () {
                        requestAnimationFrame(animate);
                        cubeObject.rotation.x += 0.01;
                        cubeObject.rotation.y += 0.01;
                        renderer.render(scene, camera);
                    };
                    animate();
                }
            }, []);
            return (
                <div ref={mount} />
            );
        };
        // 渲染函数
        ReactDOM.render(<App />, document.getElementById("root"));
    </script>
</body>
</html>

五、总结

three.min.js 是一个庞大而专业的 3D 引擎，可以创建出美丽而实用的 3D 场景。它可以用于前端及后端项目中。利用 three.min.js 构建 3D 景观并非易事，但是通过尝试、探索和实践，您终将在 3D 渲染和计算方面取得更高的成就。

推荐文章