在THREE.CSS3DObject后面
在THREE.CSS3DObject后面
提问于 2013-07-26 09:01:58
我创建了一个对象(名片)，如下所示。
var object = new THREE.CSS3DObject( dom );当点击名片时，它绕y轴旋转180度。
dom.addEventListener( 'click', function ( event ) {
new TWEEN.Tween( object.rotation )
.to( { x: 0, y: (object.rotation.y == Math.PI) ? 0: Math.PI, z: 0 }, 1000 )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}, false );我现在想设计名片的背面。然而，此刻我所看到的只是名片正面的反面。如何设计THREE.CSS3DObject的反面？
左边是原来的名片，右边是在它绕y轴旋转180度之后的名片。
下面有类似的东西吗？
var object = new THREE.CSS3DObject( dom );
object.doubleSided = true;
object.reverse = new THREE.CSS3DObject( reverseDom);回答 1
Stack Overflow用户
发布于 2013-07-26 11:05:29
没有--我还没有深入研究CSS3D呈现器的内部结构，但是很可能您看到的是一个带有CSS属性transform: rotateY(180deg);或类似的DOM对象。
由于CSS3D呈现器看起来不支持网格，所以可能的解决方案是创建另一个CSS3D对象，该对象仅位于卡的后面，包含卡的“回”。然后，同时旋转前后。记住，你的“背部”需要从一开始就被翻转，否则当你把卡片翻过来的时候，它也会像前面一样向后出现。您可以向后设计它，最初将它向相反的方向旋转180度，或者翻转刻度(例如，obj.scale = new THREE.Vector3(-1, 1, 1);注意到翻转刻度也会改变旋转方向，这可能是与卡前协调旋转时的问题。
为了实现这种同时旋转，除了明显的手动方式外，Three.js实际上支持对象组(您可以将对象对象添加到其他对象)，因此如果您将背面添加到前面，那么您可以正常地旋转前部，并且后部也会随之旋转。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17877166
复制相关文章
相似问题
腾讯云开发者
