在 Three.js 中在平面上应用两个纹理
是否可以在一个平面上同时添加两个纹理？还是立方体？
我想在平面的上半部分应用一种纹理，在下半部分应用另一种纹理。
像这样的东西：
这是我到目前为止所设置的
var geometry = new THREE.PlaneGeometry( 2, 2 );
var loader = new THREE.TextureLoader();
var texture = loader.load( 'textures/stone.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
您需要分割几何体并使用多种材质。
这意味着您将使用widthSegments和heightSegments参数PlaneGeometry来定义具有两个以上面的平面。这是必要的，因为每个面只能有一种材质（除非您正在进行一些非常奇特的混合）。
一旦有了分段平面，您就可以将materialIndex每个面指定为指向单独的材质。
您还将使用一组材质定义网格，而不仅仅是一个材质 - 每个面都materialIndex引用材质数组中的一个索引。
最后要做的事情（我将留给您）是调整面部 UV 和纹理重复/包裹以实现您想要的效果。
如果您对此主题还有其他问题，请发表评论，我会尽力解决。
// https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js
// https://threejs.org/examples/js/controls/TrackballControls.js
/**********************/
/* Initialization */
/**********************/
var renderer = new THREE.WebGLRenderer( {
canvas: document.getElementById( "view" ),
antialias: true,
alpha: true
} );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 28, 1, 1, 1000 );
camera.position.z = 50;
camera.add( new THREE.PointLight( 0xffffff, 1, Infinity ) );
scene.add( camera );
var controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.addEventListener( "change", render );
/**********************/
/* Populate the Scene */
/**********************/
var texLoader = new THREE.TextureLoader();
var tex1 = texLoader.load( "https://upload.wikimedia.org/wikipedia/commons/2/2b/WallRGB.png", render ); // bricks
var tex2 = texLoader.load( "https://upload.wikimedia.org/wikipedia/commons/6/68/NGC772_-_SDSS_DR14.jpg", render ); // space
var mat1 = new THREE.MeshLambertMaterial( { map: tex1 } );
var mat2 = new THREE.MeshLambertMaterial( { map: tex2 } );
// First, segment your geometry however you need it.
// This one is segmented into 1 horizontal segment with 2 vertical segments.
var planeGeo = new THREE.PlaneGeometry( 10, 10, 1, 2 );
// Next you need to set up your faces to use specific materials.
planeGeo.faces[ 0 ].materialIndex = 0;
planeGeo.faces[ 1 ].materialIndex = 0;
planeGeo.faces[ 2 ].materialIndex = 1;
planeGeo.faces[ 3 ].materialIndex = 1;
// You can create a mesh using an array of materials, referenced by materialIndex.
var mesh = new THREE.Mesh( planeGeo, [ mat1, mat2 ] );
scene.add( mesh );
/**********************/
/* Render Function */
/**********************/
function render () {
renderer.render( scene, camera );
}
render();
/**********************/
/* Animation Loop */
/**********************/
function animate () {
requestAnimationFrame( animate );
controls.update();
}
animate();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<title>TEST</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
</head>
<body>
<canvas id="view" width="500" height="500" style="border: 1px black solid;"></canvas>
<script src="test.js"></script>
</body>
</html>