javascript - Three.js 中同一位置的两种 Material

Question

我正在尝试将两种 Material 放入一个平面中，一种放在另一种之上。我的意思是，我有一个砖 block 背景，在它上面我需要放置另一种具有其他纹理的 Material 。

Answer 1

使用以下方法将多个 Material 应用于网格。这个想法是定义 BufferGeometry.groups以某种方式使用不同的 Material 渲染整个几何体(而不仅仅是其中的一部分)。

var renderer, scene, camera;

init();
render();

function init() {

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setClearColor( 0x000000, 0.0 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 15, 20, 30 );
    scene.add( camera );

    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', render );
    controls.minDistance = 10;
    controls.maxDistance = 50;

    scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
  
    var light = new THREE.PointLight( 0xffffff, 1 );
    camera.add( light );

    var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
    geometry.clearGroups();
    geometry.addGroup( 0, Infinity, 0 );
    geometry.addGroup( 0, Infinity, 1 );

    // textures
    var loader = new THREE.TextureLoader();
    var map = loader.load( 'https://threejs.org/examples/textures/decal/decal-diffuse.png', render );
    var normalMap = loader.load( 'https://threejs.org/examples/textures/decal/decal-normal.jpg', render );

    var material1 = new THREE.MeshPhongMaterial( {
        color: 0xffffff, 
        specular: 0x222222,
        shininess: 100,
        map: map,
        normalMap: normalMap,
        alphaTest: 0.5,
        visible: true
    } );

    var material2 = new THREE.MeshNormalMaterial( {
        opacity: 0.5,
        transparent: true,
        visible: true
    } );

    mesh = new THREE.Mesh( geometry, [ material1, material2 ] );
    scene.add( mesh );

}

function render() {

    renderer.render( scene, camera );

}

body {
    margin: 0px;
}
canvs {
  display: block;
 }

<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d4c8d2c5c5e0908e9191968e91" rel="noreferrer noopener nofollow">[email protected]</a>/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285c405a4d4d68180619191e0619" rel="noreferrer noopener nofollow">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>