three.js捋文档的记录笔记(五)：threejs引入

地址1：http://www.webgl3d.cn/pages/aac9ab/
地址2：http://www.webgl3d.cn/Three.js/
（作者：郭隆邦 该说不说 大佬真牛 整的教程通俗易懂还详细）

本地静态服务器

vscode配置live-server插件 在官网案例里打开对应.html文件，右键点击Open with Live Server即可

扩展：nodejs配置本地静态服务器

如果不用代码编辑器创建本地静服务器，也可以用nodejs配置。
安装nodejs，然后npm安装live-server插件，安装后，进入课件或threejs官方文件根目录，输入live-server命令即可预览3D案例。

项目的开发环境引入threejs

import * as THREE from 'three';

其他的扩展库 就用啥引啥

// 引入扩展库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'; 

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

script的src也能引入 (给script标签设置type=“module”,也可以在.html文件中使用import方式引入three.js 是ES6的引入方式)

threejs官方案例的引入方式 配置<script type="importmap">

<!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
<script type="importmap">
    {
        "imports": {
            "three": "../../../three.js/build/three.module.js"
        }
    }
</script>

时间充裕的话 还是建议看看原作者的文档 非常详细 有很多小细节 通俗易懂 我这里都是摘的我自己想记的