如何将纹理应用于THREE.挤压几何体
How to apply a texture to THREE.ExtrudeGeometry?
var arcShape = new THREE.Shape();
arcShape.moveTo( 50, 10 );
arcShape.absarc( 10, 10, 40, 0, Math.PI*2, false );
var map1 = new THREE.ImageUtils.loadTexture( 'moon.jpg' );
var geometry = new THREE.ExtrudeGeometry( arcShape, extrudeSettings );
var new3D = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: map1 } ) );
new3D.receiveShadow = true;
obj3Dmassive.add( new3D );
纹理(512x512(:http://f3.s.qip.ru/cMfvUhNj.png
结果:http://f3.s.qip.ru/cMfvUhNh.png
如何填充纹理图形?
如果您只有一个直的挤出路径,则可以将纹理应用于挤出的形状,而无需自定义UV生成器。例如
var extrudeSettings = {
bevelEnabled: false,
steps: 1,
amount: 20, //extrusion depth, don't define an extrudePath
material:0, //material index of the front and back face
extrudeMaterial : 1 //material index of the side faces
};
var geometry = shape.extrude(extrudeSettings);
var mesh = new THREE.Mesh(geometry,
new THREE.MeshFaceMaterial([materialFace, materialSide]));
这对于饼干切割器类型的形状很方便。
你很幸运。您试图做的事情已经在以下示例中完成:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_extrude_uvs2.html
您必须指定自己的UV生成器功能。这个例子向您展示了如何做到这一点。
记住,这只是一个例子。在您的案例中,它可能不正确,也不容易实现。
相关文章:
- 如何将Three.js场景中的几何体导出为已修改的OBJ
- Three.js(r75)-为什么是Three.几何体没有用于存储边的数组
- Three.js-如何反序列化几何体.toJSON()?(几何体.fromJSON在哪里?)
- three.js无法在three.Points几何体中渲染法线
- 在Three.js中为几何体中的顶点指定颜色
- three.js为几何体中的每个顶点指定不同的颜色(渐变)
- 在 Three.js 中渲染自定义几何体
- Three.js:缩放几何体后出现错误的BoundingBox
- 如何克隆three.js几何体
- 如何在Three.js中挤出圆形几何体
- Three.js中几何体的缩放动画
- 使用ShaderMaterial为自定义几何体加载纹理在Three.js中不起作用
- 样条线与Three.js中的“挤出几何体”不匹配
- 如何在three.js中使用挤出几何体创建的形状的每一侧应用不同的颜色
- 仅向上缩放Three.js几何体
- 如何更改Three.js中几何体的基本参数(例如半径、顶点数等)
- 在three.js中动态添加和旋转一个几何体
- 为什么从JSONLoader导入到THREE.js的几何体只有在添加到场景中才会显示?加载回调函数
- 在Three.js中计算自定义几何体的光线
- 在three.js中合并几何体不起作用