补间threejs平面和css3d对象透明度的问题

Question

我创建如下所示的对象：

var element = document.createElement( 'div' );
element.innerHTML = '<i class="fa fa-exclamation-triangle fa-5x"></i>';
object = new THREE.CSS3DObject( element );
object.position.set(11,4,8)
object.name = "error"
object.transparent = true;
object.scale.set(0.01,0.01,0.01)

SceneService.sceneCss.add(object);

var material = new THREE.MeshBasicMaterial({
   color: 0xFF0101,
   side: THREE.DoubleSide
});

var geometry = new THREE.PlaneGeometry(100, 100);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.copy(object.position);
mesh.rotation.copy(object.rotation);
mesh.scale.copy(object.scale);
mesh.transparent = true;
mesh.name = "error_plane"
SceneService.scene.add(mesh);

我已经设置了透明属性。我试图隐藏“错误平面”

object = SceneService.scene.getObjectByName('error_plane');
tweens.push(tl.to(object.material, 5, {opacity: 0}, 0));

但它不起作用。 css3d 对象没有任何材质。有什么想法可以补间不透明度吗？

Answer 1

您可以使用如下模式补间 CSS3DObject 的不透明度：

var current = {
    opacity: 1
};

new TWEEN.Tween( current )
    .to( { opacity: 0 }, 2000 )
    .onUpdate( function () {
        object.element.style.opacity = current.opacity;
    } )
    .start();

然后，在动画循环中，调用

TWEEN.update();

您可以使用以下模式对Mesh 对象的不透明度进行补间：

var current = {
    opacity: 1
};

new TWEEN.Tween( current )
    .to( { opacity: 0 }, 2000 )
    .onUpdate( function () {
        object.material.opacity = current.opacity;
    } )
    .start();
}

您必须设置object.material.transparent = true; 才能使第二种模式起作用。您还必须在动画循环中调用TWEEN.update();。

three.js r.72