我在ThreeJs项目实践中的奇淫巧技

法宝1:chrome插件


1. [ThreeJSEditor](Three.js Editor Extension for Google Chrome)

2. [threejs-inspector](jeromeetienne/threejs-inspector: chrome devtool extension to debug three.js)
---

法宝2:在线版threejs

[three在线editor](three.js / editor)
---

法宝3:旋转镜头

[OrbitControls](github.com/mrdoob/three)

{
//CONTROLS
this.controls = new THREE.OrbitControls(this.camera);
this.controls.maxPolarAngle = 0.9 * Math.PI / 2;
this.controls.enableZoom = true;
}




---

我个人的制作流程

---

步骤1


1. 拿到文件后先放进[three在线editor](three.js / editor),测试

2. 如果客户急要,可直接在编辑器里编写代码,导出文件直接就能在网上使用。

1. [editor代码编写教程](youtube.com/watch?);

2. editor导出的文件都存在app.json里,模型以utf8字符串存放,图片转成了b64;

3. 缺陷:码字不方便,导出文件大

4. [threeJs作者Ricardo Cabello(Mrdoob)](Mr.doob)网站中所有Demo都是直接在editor中编写的

---

步骤2


1. 快速搭建threeJs框架,把模型导入

2. 装上OrbitControls就可360度旋转观看

3. 开启threejs-inspector调整模型,材质,灯光等任何3d元素。(需要把scence绑定到window下)

4. 根据自己工作流打包输出
---

经验分享


1. 如果图片不是2的整数倍数,引擎会自动压缩到2的整数倍数,在chrome控制台中会出提示,粗看没事,但在iphone6Plus下会卡到微信闪退。

2. 用webpack打包模型文件,用各种加载器中的 prase 直接解析即可。模型在 webpack 中以raw加载

module: {
loaders: [
{test: /\.dae$/, loader: 'raw'},
...
]}
编辑于 2017-02-28