Three.js 在一个网格上使用多种材质
Three.js use multiple materials on one mesh
我想了解如何向网格添加多个 material。我想使用现有的 material 并将另一个稍微透明的 material 应用于我现有的网格。现在,将它作为一个数组传递它就消失了。我知道我错过了一些东西,只是不确定那是什么。最终目标是让新 material in/out 的不透明度在现有的
上设置动画。
原版Material
const originalMaterial = child.material.clone();
新建Material
const newMaterial = new THREE.MeshStandardMaterial({
name: 'New Mat',
map: newTexture,
emissiveMap: newTextureMap,
side: THREE.DoubleSide,
opacity: .5,
transparent: true
});
合并它们
child.material = [originalMaterial, newMaterial]
child.material.needsUpdate = true
WebGL 不允许在单个网格上使用多个 material。这就是 THREE.Mesh
构造函数 only allows one geometry, and one material.
的原因
要实现您想要的效果,您可以创建两个网格,其中一个 material 的透明度设置为 0.5。但更常见的是,您只会使用一个网格,并指定不透明度的变化 through the .alphaMap
texture。这会给你更大的灵活性,因为你可以在单个对象上有更多的透明度值,而不必为每个对象创建新的 materials:
var textureLoader = new THREE.TextureLoader();
var alphaTexture = textureLoader.load("path/to/alpha.png");
mesh.material.alphaMap = alphaTexture;
mesh.material.transparent = true; // <- don't forget this!
我想了解如何向网格添加多个 material。我想使用现有的 material 并将另一个稍微透明的 material 应用于我现有的网格。现在,将它作为一个数组传递它就消失了。我知道我错过了一些东西,只是不确定那是什么。最终目标是让新 material in/out 的不透明度在现有的
上设置动画。原版Material
const originalMaterial = child.material.clone();
新建Material
const newMaterial = new THREE.MeshStandardMaterial({
name: 'New Mat',
map: newTexture,
emissiveMap: newTextureMap,
side: THREE.DoubleSide,
opacity: .5,
transparent: true
});
合并它们
child.material = [originalMaterial, newMaterial]
child.material.needsUpdate = true
WebGL 不允许在单个网格上使用多个 material。这就是 THREE.Mesh
构造函数 only allows one geometry, and one material.
要实现您想要的效果,您可以创建两个网格,其中一个 material 的透明度设置为 0.5。但更常见的是,您只会使用一个网格,并指定不透明度的变化 through the .alphaMap
texture。这会给你更大的灵活性,因为你可以在单个对象上有更多的透明度值,而不必为每个对象创建新的 materials:
var textureLoader = new THREE.TextureLoader();
var alphaTexture = textureLoader.load("path/to/alpha.png");
mesh.material.alphaMap = alphaTexture;
mesh.material.transparent = true; // <- don't forget this!