1

我创建了一个对象（名片），如下所示。

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);
4

1 回答 1

1

不——我没有深入研究 CSS3D 渲染器的内部结构，但很可能您看到的是具有 CSS 属性transform: rotateY(180deg);或类似属性的单个 DOM 对象。

由于看起来 CSS3D 渲染器不支持网格，一个可能的解决方案是创建另一个 CSS3D 对象，该对象刚好位于卡片后面，并包含卡片的“背面”。然后，同时旋转正面和背面。请记住，您的“背面”需要从一开始就翻转，否则当您将卡片翻转过来时，它也会像正面一样向后出现。您可以将其向后设计，最初将其在翻转卡片的相反方向上旋转 180 度，或翻转刻度（例如obj.scale = new THREE.Vector3(-1, 1, 1);，请注意翻转刻度也可以改变旋转方向，这在旋转时可能会出现问题与卡的正面协调。

要做到这种同时旋转，除了明显的手动方式外，Three.js 实际上支持对象组（您可以.add()将对象添加到其他对象），因此如果您将背面添加到正面，那么您可以正常旋转正面，背面将随之旋转它。

于 2013-07-26T11:05:29.587 回答