在CSS3DRenderer3D渲染器器中如何添加控件（旋转功能）

点击联系发帖人 时间：2019-10-10 09:23

3d渲染器

最近要做一个 3D 卡片的效果设计圖如下：

第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片可以。

有了第一次失败的经历果断老实选择使用 three.js 来實现 3d 效果。

效果图如下在线预览。

首先定义并初始化相机（camera）、场景（scene）、3D渲染器器（renderer）和控制器（controls）

搭建 three.js 框架，以下代码就完成了 3D 場景的搭建后续只需要往场景中添加元素即可


 
 
 
 
 
 

 可以直接 查看，代码没有压缩

虽然 object3D 可以实现嵌套但在控制台查看 Dom ，可以看到父子 dom 元素是同级这让我刚开始以为无法实现嵌套；
通过 css 中的 transform-origin 来改变旋转中心后，会出现一些无法理解的情况尽量减少改变旋转中心；
虽然场景搭建好了，但也是一次失败的尝试因為我嵌套的层级较多，改变了旋转中心后旋转出现元素偏移的情况，这个问题我还没有理解导致这次尝试止步于此，只能另起炉灶再想一种办法尝试了；
如果只是想用图片或简单的图片搭建一个 3d 场景CSS3DRenderer 是一个不错的选择；
同学在实际开发中发现，在场景较大或者添加 CSS 序列动画，低端的安卓机会出现3D渲染器较慢的情况感谢同学的反馈。如果需要兼容低端安卓设备可能需要谨慎选择。

}

0

Unity/VRエンジニア最近のもっぱらの興味は機械学習（ディープラーニング）とレイマーチング（とレイトレ）。

}