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

问题描述

我正在尝试在 Three.js 中对挤出的形状进行纹理处理.在下面的代码中，我创建了一个弯曲的形状，挤出了这个形状，然后使用我从 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 可能无法正常工作.您必须手动提供 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屋！