平面、押し出しスプライン、円柱形状を使用して教育ツールを作成しています。プレーンにはテクスチャ マップがあり、残りは基本マテリアルまたはランバート マテリアルです。
- 唯一のマップの平面上のテクスチャ マップで、アルファ チャネルがあります。
- テクスチャ マップは .GIF および .PNG としてテスト済み
- すべてのオブジェクトに「transparent: true」があります
- renderer = new THREE.WebGLRenderer( {antialias:true} );
注: これは、次のリンクに記載されている問題とまったく同じです。それは解決されておらず、私の担当者はコメントできるほど高くありません。
three.js では、アルファ チャネルの動作に一貫性がありません。
mmaclaurin が指摘したように、これは描画順序とカメラの位置に基づく変更である可能性があります。私は THREE.TrackballControls を使用しており、カメラの動きを 2 つの軸に制限しています。
ワイヤーフレームの BasicMaterial を追加または削除しても問題は変わりません。
これを読んでくれてありがとう、そしてあなたが提供できる助けをありがとう!
平面オブジェクトの例:
var T4map = new THREE.ImageUtils.loadTexture( 'medium_T4.png' );
var T4Material = new THREE.MeshBasicMaterial( { opacity: .96, transparent:true, map: T4map } );
var T4Geometry = new THREE.PlaneGeometry(810, 699, 10, 10);
var T4 = new THREE.Mesh(T4Geometry, T4Material);
T4.position.y = -CNspacing;
T4.doubleSided = true;
scene.add(T4);
問題が最も目立つ押し出しスプライン ジオメトリの例:
var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
new THREE.MeshLambertMaterial( { color: 0xaaff00, opacity: 0.5, transparent: true } ),
mesh.position.set( x, y, z );
mesh.scale.set( s, s, s );
parent.add( mesh );