Three.js应用场景以及开发前准备工作

应用场景

上篇文章，我们对于three.js有了大致的了解。那么three.js的应用场景到底有哪些？

three.js广泛应用，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

只要你有 Web3D可视化的需求 ，基本上都可以首选学习Three.js。

下面简单介绍一下集中比较典型的应用场景：

github地址 ： https://github.com/mrdoob/three.js

three.js官网 (opens new window)可以下载three.js文件包，不过 默认是最新版本的 ，three.js官网的文档一般也是当前最新版本。

three.js文件包下载

github链接查看所有版本threejs： https://github.com/mrdoob/three.js/releases

选择你需要的版本three.js文件包下载，然后解压，就可以预览里面的很多学习资源。

对于开发者而言，大家经常接触的是 文档docs 和 案例examples 两个文件夹，平时查看文档，可以打开文档docs里面html文件，案例examples里面提供了海量threejs功能案例。 

three.js-文件包
└───build——three.js相关库，可以引入你的.html文件中。
└───docs——Three.js API文档文件
    │───index.html——打开该文件，本地离线方式预览threejs文档
└───examples——大量的3D案例，是你平时开发参考学习的最佳资源
    │───jsm——threejs各种功能扩展库
└───src——Three.js引擎的源码，有兴趣可以阅读。
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序  

使用何种编辑器来开发和预览？


开发编辑器 -- vscode代码编辑器


静态服务器 -- vsocde，安装live-server插件


开发和学习环境，引入threejs


  • 开发环境：项目开发引入threejs，比如vue或react脚手架引入threejs。
    • 

  • 学习环境：入门threejs阶段，.html文件中直接引入threejs
    • 

    开发环境,使用threejs
    

    比如你采用的是Vue + threejs或React + threejs技术栈，这很简单，threejs就是一个js库，直接通过npm命令行安装就行。
    

    npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本)
    

    // 比如安装148版本
npm install three@0.148.0 --save

    npm安装后，如何引入three.js
    

    执行import * as THREE from 'three';,ES6语法引入three.js核心。
    

    // 引入three.js
import * as THREE from 'three';

    npm安装后，如何引入three.js其他扩展库
    

    除了three.js核心库以外，在threejs文件包中examples/jsm目录下，你还可以看到各种不同功能的扩展库。
    

    一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。
    

    // 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

    学习环境,使用threejs
    

    .html文件中直接引入threejs
    

    three.js库可以在threejs官方文件包下面的build目录获取到。
    

    <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./build/three.js"></script>
</head>
    <script> 
        console.log(THREE.Scene); 
    </script>
</body>
</html></h5>

    ES6 import方式引入
    

    给script标签设置type="module",也可以在.html文件中使用import方式引入three.js。
    

    <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <script type="module">
    // 现在浏览器支持ES6语法，自然包括import方式引入js文件
    import * as THREE from './build/three.module.js';
    console.log(THREE.Scene); 
    </script>
</body>
</html> 

    思考：实现学习环境.html文件和vue或reaact脚手架开发环境一样的写法？
    

    import * as THREE from 'three';

    可以使用 type="importmap" 配置路径。
    

    <!-- 具体路径配置，你根据自己文件目录设置 -->
<script type="importmap">
        "imports": {
            "three": "../../../three.js/build/three.module.js", // 配置扩展库
            "three/addons/": "./three.js/examples/jsm/"  // 配置扩展库
</script>

    <!-- 配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs -->
<script type="module">
    import * as THREE from 'three';
    // 浏览器控制台测试，是否引入成功
    console.log(THREE.Scene);
    // three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
    // 扩展库OrbitControls.js
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    // 扩展库GLTFLoader.js
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    console.log(OrbitControls);
    console.log(GLTFLoader);
</script>

    <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <!-- 具体路径配置，你根据自己文件目录设置 -->
    <script type="importmap">
        "imports": {
            "three": "./build/three.module.js"
</script> 
<script type="module">
import * as THREE from 'three';
console.log(THREE.Scene); 
</script>
</body>
</html> 

    优化：抽离js文件
    

    在实际项目中，我们往往把js文件抽离，这样便于操作以及可读性。
    

    main.js
    

    import * as THREE from 'three'; 
console.log(THREE.Scene); 
// three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
// 扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
console.log(OrbitControls);
console.log(GLTFLoader); 

    <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
<script type="importmap">
        "imports": {
            "three": "./build/three.module.js",
            "three/addons/": "./examples/jsm/"
</script>
    <script type="module" src="./main.js"> 
    </script>
</body>
</html> 

    参考文档：