web-dev-qa-db-ja.com

Three.js pngテクスチャ-アルファは透明ではなく白としてレンダリングされます

私は立方体を作成しており、6つの異なるテクスチャをそれぞれの面に適用しています。各テクスチャは.pngファイルであり、透明部分が含まれています。また、キューブに色を適用しています-png透明度を介してその色を見たいです。

問題：透明度が白色でレンダリングされるため、キューブのベースカラーが表示されません（PNGテクスチャを削除しても正常にレンダリングされます）

Png透明度を機能させるにはどうすればよいですか？いくつかのマテリアル設定を試してみましたが、どれもそれを透明にしません。

キューブとマテリアルを作成するためのコード：

var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
var materials = [];

// create textures array for all cube sides
for (var i = 1; i < 7; i++) {
   var img = new Image();
   img.src = 'img/s' + i + '.png';
   var tex = new THREE.Texture(img);
   img.tex = tex;

   img.onload = function () {
      this.tex.needsUpdate = true;
   };

   var mat = new THREE.MeshBasicMaterial({color: 0x00ff00, map: tex, transparent: true, overdraw: true });
   materials.Push(mat);
}
cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
cube.position.y = 150;
scene.add(cube);

編集：

下の写真は問題を示しています-センタナールのソリューションでは、左のテクスチャは正常にレンダリングされます-透明度のないPNG画像です-コードで透明度を設定します

materialArray.Push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('img/s2.png'), transparent: true, opacity: 0.9, color: 0xFF0000 }));

右側のテクスチャもpng画像です-透明な領域があるだけです（白をレンダリングするものはすべて透明で、立方体から色を取得する必要があるため、純粋な赤になりますか？）。白い部分を透明にするにはどうすればよいですか？

enter image description here

three.jswebgl
22
easwee

マテリアルの不透明度属性があなたのためのトリックを行います。次に、サンプルコードスニペットを示します。

var materialArray = [];
materialArray.Push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xpos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.Push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.Push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/ypos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.Push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.Push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zpos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.Push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );
MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
MovingCube.position.set(0, 25.1, 0);
scene.add( MovingCube );

http://threejs.org/docs/#Reference/Materials/Material 重要なのは、透明属性をtrueに設定し、不透明度を0.5に設定することです（たとえば）。透明度なしで正確に内部に収まる2番目のキューブを追加します。@ WestLangleyのアイデア（ Three.jsキャンバスのレンダリングと透明度 ）

backCube = new THREE.Mesh( MovingCubeGeom, new THREE.MeshBasicMaterial( { color: 0xFF0000 }) );
backCube.position.set(0, 25.1, 0);
backCube.scale.set( 0.99, 0.99, 0.99 );
scene.add( backCube );
27
senthanal