案例预览

项目案例打开需要搭建一个本地静态服务器进行预览，加载外部文件或贴图的案例，不能直接通过浏览器打开.html 文件。

live-server(Nodejs 本地静态服务器)

使用 npm 执行npm install -g live-server安装live-server模块，如果你想通过安装好的live-server模块开启一个静态服务器，打开命令行，进入 threejs 案例所在的文件目录，然后执行live-server命令就可以。

通过浏览器访问http://localhost:8080或http://127.0.0.1:8080地址，找到 threejs 案例的.html 文件直接打开就可以看到三维场景渲染效果。

vscode 使用 live-server

对于 vscode 代码编辑器，你可以搜索 live 关键词，找到 live-server 插件安装即可，安装后右键需要打开的文件 open with live server 即可 并且支持热更新

中文文档

http://www.webgl3d.cn/threejs/docs/

OrbitControls

图形控制插件 使用 OrbitControls 后会影响 lookAt 设置并强制指向坐标原点 (ex:5-1)

3d 模型资源地址

https://sketchfab.com/feed

Box3 包围盒查看几何信息

(ex:5-1) // 地图 mapGroup 的包围盒计算 var box3 = new THREE.Box3();//创建一个包围盒 // .expandByObject()方法：计算层级模型 group 包围盒 box3.expandByObject(lineGroup); // console.log('查看包围盒 box3', box3);

//scaleV3 表示包围盒长宽高尺寸 var scaleV3 = new THREE.Vector3(); // .getSize()计算包围盒长宽高尺寸 box3.getSize(scaleV3) // 查看控制台包围盒大小，辅助设置相机参数 console.log('查看包围盒尺寸', scaleV3);

//scaleV3 表示包围盒的几何体中心 var center = new THREE.Vector3(); // .getCenter()计算一个层级模型对应包围盒的几何体中心 box3.getCenter(center); // 查看控制台包围盒集合中心，作为 lookAt()参数 console.log('查看几何中心', center);

小游戏来源-- https://github.com/rossning92/t-rex

issues

有问题提问及探讨可发起issues