[英]Texture in Three.js
I'm trying to apply a texture to the birds example in three.js. 我正在尝试将纹理应用于Three.js中的Birds示例 。
// instantiate a loader var loader = new THREE.TextureLoader(); // load a resource loader.load('imgs/birdtexture.jpg', function (texture) { var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide }); var bird = new THREE.Mesh( new Bird(), material); );
For some reason this doesn't work and I don't get any errors .It seems I'm missing something. 由于某种原因,这不起作用,并且我没有收到任何错误。似乎我缺少了一些东西。 What am I doing wrong? 我究竟做错了什么?
EDIT: I got it working by using UV as describe here . 编辑:我把它用UV工作作为描述在这里 。 Here's the code: 这是代码:
var texture = new THREE.TextureLoader().load("imgs/birdtexture.jpg");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.05, 0.05);
var geometry = new Bird();
function assignUVs(geometry) {
geometry.faceVertexUvs[0] = [];
geometry.faces.forEach(function(face) {
var components = ['x', 'y', 'z'].sort(function(a, b) {
return Math.abs(face.normal[a]) > Math.abs(face.normal[b]);
});
var v1 = geometry.vertices[face.a];
var v2 = geometry.vertices[face.b];
var v3 = geometry.vertices[face.c];
geometry.faceVertexUvs[0].push([
new THREE.Vector2(v1[components[0]], v1[components[1]]),
new THREE.Vector2(v2[components[0]], v2[components[1]]),
new THREE.Vector2(v3[components[0]], v3[components[1]])
]);
});
geometry.uvsNeedUpdate = true;
}
assignUVs(geometry);
var bird = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {map:texture, side: THREE.DoubleSide }));
Try this (untested): 试试这个(未试用):
// instantiate a loader
var loader = new THREE.TextureLoader();
// Create material
var material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide});
// load a resource
loader.load('imgs/birdtexture.jpg', function (texture) {
marterial.map = texture;
});
var bird = new THREE.Mesh( new Bird(), material);
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.