web-dev-qa-db-fra.com

three.js - Comment puis-je changer dynamiquement l'opacité d'un objet?

C'est mon objet:

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

maintenant après avoir créé cet objet dans init (); fonction, je peux aller directement à l'objet et changer sa position, comme ceci:

object.position.x = 15;

Maintenant, la question est de savoir comment changer l'opacité de la texture ???

Merci :-)

javascript3dthree.js
34
BorisD

THREE.MeshLambertMaterial étend THREE.Material ce qui signifie qu'il hérite de la propriété opacity, donc tout ce que vous avez à faire est d'accéder au matériau sur votre objet et de changer l'opacité du matériau:

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

Notez également que le matériau doit avoir sa propriété transparent définie sur true.

object.materials[0].transparent = true;

(Merci Drew et Dois de l'avoir signalé)

Je sais qu'il y a des problèmes avec la "référence" de three.js, mais vous pouvez consulter le fichier source de la classe que vous utilisez et voir toutes les propriétés/méthodes qu'il possède et s'il étend autre chose.

54
George Profenza
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;
11
BorisD

Je sais que cette question est très ancienne mais je voulais donner ma réponse à partir de ce que j'ai utilisé au cas où quelqu'un en aurait besoin. Avec three.js, j'ai utilisé l'interpolation via TweenMax/TweenLite de Greensock. Avec cela, j'ai pu interpoler n'importe quelle propriété de n'importe quel objet et cela s'est bien passé. Découvrez la bibliothèque ici . Tout ce dont j'avais besoin pour interpoler les propriétés était:

TweenLite.to(object, duration, properties);

où la durée est en secondes et les propriétés sont dans un objet. Le "gotcha" pour cela, en particulier lors de l'utilisation de three.js, est de s'assurer que vous êtes spécifique avec le paramètre objet. Par exemple, par cette question, si vous changez l'opacité d'un maillage, vous ne pouvez pas faire

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

vous devez plutôt être plus précis et écrire

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

J'espère que ça aidera quelqu'un. L'interpolation est vraiment géniale!

7
Martavis P.