纹理形状在three.js中挤出 [英] Texture shape extrude in three.js

问题描述

我试图在Three.js中纹理挤压形状。在下面的代码中，我创建一个弯曲的形状，拉伸形状，然后创建一个网格与几何和我从一个Jpg文件加载的材料。线框显示，但纹理不。纹理大小为512 * 512像素。

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.

这篇关于纹理形状在three.js中挤出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！