两个 material 在 three.js 的同一个地方

Question

我正在尝试将两个 material 放在一个平面上，一个放在另一个上面。我的意思是，我有一个砖块背景，我需要在它上面放另一个 material 其他纹理。

Answer 1

使用以下方法将多个 material 应用于网格。这个想法是以一种方式定义 BufferGeometry.groups 使得整个几何体（而不仅仅是它的一部分）用不同的 materials 渲染。

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/three@0.116.1/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/examples/js/controls/OrbitControls.js"></script>

两个 material 在 three.js 的同一个地方

Two material in the same place in three.js

javascript

3d

textures

three.js

ecmascript-6