【Three.js】搭建Three.js开发环境

程老师2088

8049人浏览 · 2020-10-06 22:17:49

程老师2088 · 2020-10-06 22:17:49 发布

Three.js是一个比较著名的3d引擎了，今天搭建了下它的开发环境。

一官网

官网地址如下：

https://threejs.org/

二下载源码包

在官网左侧直接点击download，就会把所有的源码下载下来。为方便使用，直接解压，放到web工程的某个地方即可。

三引入库文件

可以直接引用build下面的库文件。示例代码如下，注意改成你的实际位置

<script src="/static/threejs/build/three.js"></script>

three拆成了很多模块，如果需要引入其他模块，则需要单独写。示例代码如下，注意script里面要加上module

		<script type="module">

			import * as THREE from '/static/threejs/build/three.module.js';

			import { OrbitControls } from '/static/threejs/examples/jsm/controls/OrbitControls.js';
			import { GLTFLoader } from '/static/threejs/examples/jsm/loaders/GLTFLoader.js';
			import { RGBELoader } from '/static/threejs/examples/jsm/loaders/RGBELoader.js';
			import { RoughnessMipmapper } from '/static/threejs/examples/jsm/utils/RoughnessMipmapper.js';


//写其他的逻辑代码

</script>

四基本逻辑框架

跟其他的三维引擎差不多，three的渲染逻辑为：

（1）构建camera，即相机

（2）构建scene，即场景

（3）构建render，即渲染器

大致框架如下：

   <script type="module">
        import * as THREE from '/static/threejs/build/three.module.js';
        import { GLTFLoader } from '/static/threejs/examples/jsm/loaders/GLTFLoader.js';

        //场景
        var scene = new THREE.Scene();

        //相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        //渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

   
        //循环渲染
        function animate() {
            requestAnimationFrame( animate );
            renderer.render(scene, camera);
        }
        animate();

    </script>

五画一个简单的立方体

在上面框架的基础上，画一个立方体。以下为完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <script src="/static/threejs/build/three.js"></script>
    <script type="module">
        import * as THREE from '/static/threejs/build/three.module.js';
        import { GLTFLoader } from '/static/threejs/examples/jsm/loaders/GLTFLoader.js';

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        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;


        function animate() {
            requestAnimationFrame( animate );

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        }
        animate();

    </script>
</body>

</html>

打完收工。