在three.js纹理形状挤压纹理、形状、three、js

2023-09-08 00:50:43 作者:回忆劝我忘

我想纹理Three.js挤压的形状。在以下code口创建一个弯曲形状,挤出的形状,然后创建与几何体,我已经从JPG文件装载的材料的网格。线框显示,但质地却没有。质地512 * 512PX的大小。

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.

我使用了正确的方法?我是否需要手动UV贴图纹理?我想纹理换行到整个拉伸面,而不是每一个人四。

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 ); 

推荐答案

ExtrudeGeometry 最初是挤出字体,以及它为你可能的乌布苏将无法正常工作。您必须手动提供的UV。

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

检查源,你会看到,你可以选择替换 THREE.ExtrudeGeometry.WorldUVGenerator 用你自己的。

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