在Three.js中的平面上应用两个纹理
在Three.js中的平面上应用两个纹理
提问于 2018-01-31 15:15:32
能在一架飞机上同时添加两个纹理吗？还是立方体？
我想在飞机的上半部分应用一种纹理，在下半部应用另一种纹理。
就像这样：
这就是我到目前为止所做的
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);Stack Overflow用户
回答已采纳
发布于 2018-01-31 16:02:24
你会想要分割你的几何学，并使用多种材料。
这意味着您将使用widthSegments和heightSegments参数PlaneGeometry来定义一个平面，而不仅仅是两个面。这是必要的，因为每个脸只能有一个材料(除非你正在做一些认真的幻想混合)。
一旦你有一个分割的平面，你可以分配每个脸的materialIndex指向一个单独的材料。
您还将使用一个材料数组来定义网格，而不仅仅是一个--每个脸的materialIndex引用材料数组中的一个索引。
我要做的最后一件事，我将留给你们，是调整面部超视距和纹理重复/包装，以实现你想要的效果。
如果你对这个话题还有更多的疑问，请留下评论，我会试着解决它们。
// 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48545475
复制相关文章
相似问题
腾讯云开发者
