[英]how do I add a texture to a triangle in three.js?
我已经创建了一个场景,其中包含许多立方体,球体等,并且能够将纹理应用于这些基元,但是当我想要将纹理添加到简单的三角形时,我完全迷失了。
这是我最接近正确的方法:
var texture=THREE.ImageUtils.loadTexture('/f/3d-images/texture-steel.jpg');
var materialDecalRoof=new THREE.MeshBasicMaterial( {
'map': texture,
'wireframe': false,
'overdraw': true
} );
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(tentX/2+1, tentY, tentZ/2+1));
geometry.vertices.push(new THREE.Vector3(0, tentT, 0));
geometry.vertices.push(new THREE.Vector3(0, tentT, 0));
geometry.vertices.push(new THREE.Vector3(-tentX/2-1, tentY, tentZ/2+1));
geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
geometry.faceVertexUvs[0].push([
new THREE.UV(0, 0),
new THREE.UV(0, 0),
new THREE.UV(0, 0),
new THREE.UV(0, 0)
]);
geometry.computeFaceNormals();
geometry.computeCentroids();
geometry.computeVertexNormals();
var mesh= new THREE.Mesh( geometry, materialDecalRoof);
scene.add(mesh);
这不起作用。 我得到的是一个闪烁的三角形(当场景移动时)应该是一个图像。
要测试这一点,请访问https://www.poptents.eu/3dFrame.php ,在Roof部分上传图像,然后拖动视图以查看屋顶闪烁。
有谁知道我在这里做错了什么?
你需要阅读一下UV Mapping 。 您无法使用(0,0)将其初始化为所有4个角。 您需要指定0到1之间的数字,这是纹理宽度和高度的百分比。 意思是,如果顶点像(左上角),(右上角),Face4上的完整纹理将是(0,0),(1,0),(1,1),(0,1), (右下角),(左下角)......等等......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.