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);

编辑：

下图显示了问题 - 使用 senthanal 解决方案，左侧纹理现在呈现正常 - 这是一个没有透明度的 png 图像 - 我在代码中设置了透明度

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

正确的纹理也是 png 图像 - 只是它具有透明区域（所有呈现白色的都应该是纯红色，因为它是透明的并且应该从立方体中获取颜色？）。我怎样才能使那个白色部分透明？

在此处输入图像描述

4

2 回答 2

37

材质的不透明度属性可以为您解决问题。以下是示例代码片段：

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（例如）。添加第二个立方体，它完全适合内部，没有透明度，来自@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 );
于 2013-07-05T13:44:28.030 回答
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 回答