地址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>
时间充裕的话 还是建议看看原作者的文档 非常详细 有很多小细节 通俗易懂 我这里都是摘的我自己想记的