已经有比较好的博客介绍如何加载模型:使用three.js加载obj+mtl模型完整案例。
有一点小问题,会导致模型加载不成功,需要修改两处地方。
1 将 Detector.js 替换为 WebGL.js
根据Three.js中Detector.js替换成了WebGL.js,新下载的 three.js 的js文件夹里为 WebGL.js,修改如下:
<script src="../js/Detector.js"></script>
修改为:
<script src="./js/WebGL.js"></script>
2 TrackballControls 增加第二个参数
//控制器
controls = new THREE.TrackballControls(camera);
修改为:
//控制器
controls = new THREE.TrackballControls(camera,container);
3 操作器已更新,会报以下错误
THREE.Loader: Handlers.add() has been removed. Use LoadingManager.addHandler() instead.
可以删掉或者先不管这这个错误:
// 添加操作器
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
另外
这是我用MagicaVoxel建的一个简单模型,加载后效果如下图。文件和模型都已经打包,需要的话可以在评论区下载。