35

立方体を作成していて、それぞれの面に 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 画像です - 透明な領域があるだけです (白をレンダリングするものはすべて、透明であり、立方体から色を取得する必要があるため、純粋な赤でなければなりません)。白い部分を透明にするにはどうしたらいいですか？

ここに画像の説明を入力

4

2 に答える 2

0

シンプルな透明な png インポート ヘルパーをお探しの場合:

import { MeshBasicMaterial, TextureLoader } from 'three'

export const importTexture = async(url, material) => {
    const loader = new TextureLoader()
    const texture = await loader.loadAsync(url)
    material.map = texture
    material.transparent = true
    material.needsUpdate = true
    return texture
}


//usage
const geo = new PlaneGeometry(1, 1)
const mat = new MeshBasicMaterial()
const mesh = new Mesh(geo, mat)
scene.add(mesh)
//this is asynchronous
importTexture('path/to/texture.png', mat)
于 2022-02-12T04:18:36.390 に答える