Texture shape extrude in three.js

那年仲夏 提交于 2019-12-06 08:46:21

问题


I'm trying to texture an extruded shape in Three.js. In the following code I create a curved shape, extrude the shape, then create a mesh with the geometry and a material I've loaded from a Jpg file. The wireframe displays but the texture does not. The texture is 512*512px in size.

Am I using the correct approach? Do I need to manually UV map the texture? I'd like the texture to wrap to the entire extruded face instead of each individual quad.

var x = -50, y = 20, z = 150;
var rx = 0, ry = Math.PI/4, rz = 0;
var scale = 1;
var color = 0x00ff00;

var shape = new THREE.Shape();

shape.moveTo( x, y );
shape.quadraticCurveTo(x+50, y, x+100, y+50);
shape.quadraticCurveTo(x+50, y, x, y);      

var texture = new THREE.ImageUtils.loadTexture('images/checkerboard.jpg');        
var material = new THREE.MeshBasicMaterial({ map:texture, doubleSided:true });

/* 3D */
var extrudeSettings = { amount: 100 };
extrudeSettings.bevelEnabled = false;
extrudeSettings.steps = 1;

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );       

//var mesh = new THREE.Mesh( geometry, material );
var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ material, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );
mesh.position.set( x, y, z);
mesh.rotation.set( rx, ry, rz );

scene.add( mesh ); 


回答1:


ExtrudeGeometry was originally written to extrude fonts, and the UVs it creates for you likely will not work. You have to manually provide UVs.

Check the source, and you will see you can optionally replace THREE.ExtrudeGeometry.WorldUVGenerator with your own.



来源:https://stackoverflow.com/questions/15802448/texture-shape-extrude-in-three-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!