【3D】threejs 3d效果开发流程
发布于 4 个月前 作者 qjzd 360 次浏览 来自 码农

步骤一

  1. 使用3dmax或者blender(推荐)制作3d模型
  2. 导出文件(推荐导出glb)先放进three在线editor,测试
    • editor代码编写教程
    • editor导出的文件都存在app.json里,模型以utf8字符串存放,图片转成了b64;
    • 缺陷:码字不方便,导出文件大
    • [threeJs作者Ricardo Cabello(Mrdoob)] mrdoob 网站中所有Demo都是直接在editor中编写的

步骤二

  1. 快速搭建threeJs框架,把模型导入
  2. 装上OrbitControls就可360度旋转观看
  3. 开启threejs-inspector调整模型,材质,灯光等任何3d元素。(需要把scence绑定到window下)
  4. 根据自己工作流打包输出

其他

  • 如果图片不是2的整数倍数,引擎会自动压缩到2的整数倍数,在chrome控制台中会出提示,粗看没事,但在iphone6Plus下会卡到微信闪退。
  • 用webpack打包模型文件,用各种加载器中的 prase 直接解析即可。模型在 webpack 中以raw加载
	module: {
	  loaders: [
		{test: /\.dae$/, loader: 'raw'},
	  ]}
	 }
	{
		//CONTROLS
		this.controls = new THREE.OrbitControls(this.camera);
		this.controls.maxPolarAngle = 0.9 * Math.PI / 2;
		this.controls.enableZoom = true;
	}

参考链接

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

回到顶部