javascript - particulas - three.js tutorial español

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

Question

Este es mi objeto:

var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture( "image.png" ) } ) );
object.position.set(2, 3, 1.5);

ahora después de haber creado este objeto en init (); Función, puedo ir directamente al objeto y cambiar su posición, así:

object.position.x = 15;

Ahora la pregunta es ¿cómo puedo cambiar la opacidad de la textura?

Gracias :-)

Answer 1

Sé que esta pregunta es muy antigua, pero quería dar mi respuesta a la que usé en caso de que alguien la necesite. Con three.js, usé tweening 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 here . Todo lo que necesitaba para interpolar las propiedades era:

TweenLite.to(object, duration, properties);

donde la duración es en segundos y las propiedades están en un objeto. El "gotcha" para esto, especialmente mientras usa three.js, es asegurarse de que sea específico con el parámetro 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, necesitas ser más específico y escribir

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

Espero que esto ayude a alguien. ¡Tweening es realmente increíble!

Answer 2

THREE.MeshLambertMaterial extiende THREE.Material que significa que hereda la propiedad de opacity , 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 propiedad transparent establecida en verdadero.

object.materials[0].transparent = true;

(Gracias Drew y Dois por señalar esto)

Sé que hay problemas con la ''referencia'' de three.js, pero puede echar un vistazo al archivo de origen de la clase que usa y ver todas las propiedades / métodos que tiene y si se extiende algo más.

Answer 3

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;