在three.js中,我想创建一条道路。我有这个
var width = 5;
var length = 4;
var height = 1;
var geometry = new THREE.BoxGeometry( width, length, height );
var textureloader = new THREE.TextureLoader();
var texture = textureloader.load('images/tile_brick.png', function(tx) {
var material = new THREE.MeshBasicMaterial({
map: tx,
wireframe: false
});
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
});
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( width, length );
它最终看起来像这样
在x轴上重复5次,这很好,在y轴上重复4次,这很好,但是对于z轴,它也重复4次,这不好,因为它被压缩了,我希望它重复1次。那里。
有人知道如何解决吗?
谢谢
二维纹理必须包装在3D盒子对象上。纹理包裹的重复因子取决于长方体侧面的尺寸。您必须为3对不同的侧面创建3个纹理对象:
var width = 5, length = 4, height = 1;
var textureloader = new THREE.TextureLoader();
var texture1 = new THREE.TextureLoader().load('images/tile_brick.png');
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( width, length );
var material1 = new THREE.MeshBasicMaterial( { map: texture1 } );
var texture2 = new THREE.TextureLoader().load('images/tile_brick.png');
texture2.wrapS = THREE.RepeatWrapping;
texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.set( width, height );
var material2 = new THREE.MeshBasicMaterial( { map: texture2 } );
var texture3 = new THREE.TextureLoader().load('images/tile_brick.png');
texture3.wrapS = THREE.RepeatWrapping;
texture3.wrapT = THREE.RepeatWrapping;
texture3.repeat.set( height, length );
var material3 = new THREE.MeshBasicMaterial( { map: texture3 } );
var geometry = new THREE.BoxGeometry( width, length, height );
var mesh = new THREE.Mesh(geometry, [material3, material3, material2, material2, material1, material1]);
scene.add(mesh);
示例:
(function onLoad() {
var camera, scene, renderer, orbitControls;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: false
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, -4, 4);
camera.lookAt( 0, 0, 0 );
loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
scene = new THREE.Scene();
scene.background = new THREE.Color(0x7f7f7f);
scene.add(camera);
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
orbitControls = new THREE.OrbitControls(camera, document.body);
createModel();
}
function createModel() {
var width = 5, length = 4, height = 1;
var textureloader = new THREE.TextureLoader();
var texture1 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/brickwall.png");
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( width, length );
var material1 = new THREE.MeshBasicMaterial( { map: texture1 } );
var texture2 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/brickwall.png");
texture2.wrapS = THREE.RepeatWrapping;
texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.set( width, height );
var material2 = new THREE.MeshBasicMaterial( { map: texture2 } );
var texture3 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/brickwall.png");
texture3.wrapS = THREE.RepeatWrapping;
texture3.wrapT = THREE.RepeatWrapping;
texture3.repeat.set( height, length );
var material3 = new THREE.MeshBasicMaterial( { map: texture3 } );
var geometry = new THREE.BoxGeometry( width, length, height );
var mesh = new THREE.Mesh(geometry, [material3, material3, material2, material2, material1, material1]);
scene.add(mesh);
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
material.map = texture1;
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>