threeJs入门 js引入

一：使用three的前置

1.引入three.js

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

2.引入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';

// 扩展库引入——旧版本，比如122, 新版本路径addons替换了examples/jsm
import {
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

3.学习环境：.html文件中直接引入threejs

如果不是正式开发Web3D项目，只是学习threejs功能，完全没必要用webpack或vite搭建一个开发环境。

学习使用的环境，只要创建一个.html文件，编写threejs代码，最后通过本地静态服务打开.html文件就行。

4.script标签方式引入three.js

你可以像平时开发web前端项目一样，通过script标签把three.js当做一个js库引入你的项目。

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

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

//随便输入一个API，测试下是否已经正常引入three.js
console.log(THREE.Scene); 

5.ES6 import方式引入

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

<script type="modu