web-dev-qa-db-ja.com

three.js-オブジェクトの不透明度を動的に変更するにはどうすればよいですか？

これは私のオブジェクトです：

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

今、init（）でこのオブジェクトを作成した後;機能、次のようにオブジェクトに直接移動し、彼の位置を変更できます：

object.position.x = 15;

ここで問題は、テクスチャの不透明度をどのように変更できるかです。

ありがとう:-)

javascript3dthree.js
34
BorisD

THREE.MeshLambertMaterial拡張THREE.Materialこれはopacityプロパティを継承するため、オブジェクトのマテリアルにアクセスし、マテリアルの不透明度を変更するだけです。

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

また、マテリアルのtransparentプロパティをtrueに設定する必要があることに注意してください。

object.materials[0].transparent = true;

（これを指摘してくれたドリューとドイスに感謝）

Three.jsの「参照」に問題があることは知っていますが、使用するクラスのソースファイルを見て、そのクラスのすべてのプロパティ/メソッドを確認し、それが他の何かを拡張するかどうかを確認できます。

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

私はこの質問が非常に古いことを知っていますが、誰かがそれを必要とする場合に備えて、私が使ったものから答えを出したかったのです。 three.jsでは、GreensockのTweenMax/TweenLiteでトゥイーンを使用しました。それにより、オブジェクトのプロパティをトゥイーンでき、スムーズに実行できました。ライブラリを確認してください こちら 。プロパティをトゥイーンするために必要なのは次のとおりです。

TweenLite.to(object, duration, properties);

ここで、期間は秒単位であり、プロパティはオブジェクト内にあります。これの「落とし穴」は、特にthree.jsを使用している場合は、objectパラメーターを具体的に指定することです。たとえば、この質問ごとに、メッシュの不透明度を変更する場合は、できません

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

むしろ、あなたはより具体的になり、書く必要があります

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

これが誰かの助けになることを願っています。トゥイーンは本当に素晴らしいです！

7
Martavis P.