Canvas 纹理形状在three.js中挤出
我正在尝试在Three.js中对挤出的形状进行纹理处理。在下面的代码中,我创建了一个弯曲的形状,拉伸该形状,然后使用我从Jpg文件加载的几何体和材质创建一个网格。线框将显示,但纹理不会显示。纹理大小为512*512px 我是否使用了正确的方法?我需要手动UV贴图纹理吗?我希望纹理包裹到整个拉伸面,而不是每个单独的四边形Canvas 纹理形状在three.js中挤出,canvas,3d,three.js,webgl,uv-mapping,Canvas,3d,Three.js,Webgl,Uv Mapping,我正在尝试在Three.js中对挤出的形状进行纹理处理。在下面的代码中,我创建了一个弯曲的形状,拉伸该形状,然后使用我从Jpg文件加载的几何体和材质创建一个网格。线框将显示,但纹理不会显示。纹理大小为512*512px 我是否使用了正确的方法?我需要手动UV贴图纹理吗?我希望纹理包裹到整个拉伸面,而不是每个单独的四边形 var x = -50, y = 20, z = 150; var rx = 0, ry = Math.PI/4, rz = 0; var scale = 1; var colo
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 );
挤出计量法最初是为挤出字体而编写的,它为您创建的UV可能无法工作。您必须手动提供UV
检查源代码,您将看到您可以选择用自己的替换THREE.ExtradeGeometry.WorldUVGenerator
。我最后只是使用Blender来计算UV。谢谢你的帮助!