Saltar al contenido

three.js – ¿Cómo puedo cambiar dinámicamente la opacidad del objeto?

Solución:

THREE.MeshLambertMaterial se extiende THREE.Material lo que significa que hereda el opacity propiedad, por lo que todo lo que necesita hacer es acceder al material en su objeto y cambiar la opacidad del material:

object.materials[0].opacity = 1 + Math.sin(new Date().getTime() * .0025);//or any other value you like

También tenga en cuenta que el material debe tener su transparent propiedad establecida en true.

object.materials[0].transparent = true;

(Gracias Drew y Dois por señalar esto)

Actualizar

la propiedad ahora es simplemente material:

// enable transparency
object.material.transparent = true;
// set opacity to 50%
object.material.opacity = 0.5; 

var map = THREE.ImageUtils.loadTexture( myJSONObject[i].url );
var material = new THREE.MeshLambertMaterial( { map: map, transparent: true } );
var object = new THREE.Mesh( geometry, material );

material.opacity = 0.6;

Sé que esta pregunta es muy antigua, pero quería dar mi respuesta de lo que usé en caso de que alguien la necesite. Con three.js, utilicé la interpolación a través de TweenMax / TweenLite de Greensock. Con eso, pude interpolar cualquier propiedad de cualquier objeto y funcionó sin problemas. Echa un vistazo a la biblioteca aquí. Todo lo que necesitaba para interpolar las propiedades era:

TweenLite.to(object, duration, properties);

donde la duración está en segundos y las propiedades están en un objeto. El “problema” para esto, especialmente al usar three.js, es asegurarse de ser específico con el parámetro del objeto. Por ejemplo, según esta pregunta, si está cambiando la opacidad de una malla, no puede hacer

TweenLite.to(mesh, 2, {material.opacity: 0});

más bien, debe ser más específico y escribir

TweenLite.to(mesh.material, 2, {opacity: 0});

Espero que esto ayude a alguien. ¡La interpolación es realmente asombrosa!

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *