three.js：具有紋理座標的BufferGeometry

Question

我找不到具有紋理座標的THREE.BufferGeometry示例。它應該用於紋理網格嗎？我無法讓它工作。這裏是我的測試代碼：

var quad_vertices = 
[ 
    -30.0, 30.0, 0.0, 
    30.0, 30.0, 0.0, 
    30.0, -30.0, 0.0, 
    -30.0, -30.0, 0.0 
]; 

var quad_uvs = 
[ 
    0.0, 0.0, 
    1.0, 0.0, 
    1.0, 1.0, 
    0.0, 1.0 
]; 

var quad_indices = 
[ 
    0, 2, 1, 0, 3, 2 
]; 

var geometry = new THREE.BufferGeometry(); 

geometry.attributes = 
{ 
    position: 
    { 
     itemSize: 3, 
     array: new Float32Array(3 * 4) 
    }, 

    uv: 
    { 
     itemSize: 2, 
     array: new Float32Array(2 * 4) 
    }, 

    index: 
    { 
     itemSize: 1, 
     array: new Uint16Array(6) 
    } 
}; 

var positions = geometry.attributes.position.array; 
var uvs  = geometry.attributes.uv.array; 
var indices = geometry.attributes.index.array; 

var i; 
for(i = 0; i < positions.length; i += 3) 
{ 
    positions[i]  = quad_vertices[i]; 
    positions[i + 1] = quad_vertices[i + 1]; 
    positions[i + 2] = quad_vertices[i + 2]; 
} 

for(i = 0; i < uvs.length; i += 2) 
{ 
    uvs[i]  = quad_uvs[i]; 
    uvs[i + 1] = quad_uvs[i + 1]; 
} 

for(i = 0; i < indices.length; i++) 
    indices[i] = quad_indices[i]; 

var texture = THREE.ImageUtils.loadTexture('./assets/texture.png'); 
texture.anisotropy = renderer.getMaxAnisotropy(); 

var material = new THREE.MeshBasicMaterial({ map: texture }); 

var mesh = new THREE.Mesh(geometry, material); 

mesh.position.z = -100; 

scene.add(mesh); 

只是用THREE.Geometry創建網格是好的，所以我不知道這段代碼可能會出現什麼問題。有什麼想法嗎？

Answer 1

這是一個使用uvs索引BufferGeometry的工作示例。我更新了你的例子，使用three.js r83。我看到舊代碼有兩個問題。首先，您不能將geometry.attributes設置爲等於JSON對象定義。 THREE.BufferAttribute是一個類，但是您的JSON缺少THREE.Renderer所需的原型上的函數定義。第二個THREE.ImageUtils已被THREE.TextureLoader取代，所以我在示例中更新了它。

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

var quad_vertices = 
[ 
-30.0, 30.0, 0.0, 
30.0, 30.0, 0.0, 
30.0, -30.0, 0.0, 
-30.0, -30.0, 0.0 
]; 

var quad_uvs = 
[ 
0.0, 0.0, 
1.0, 0.0, 
1.0, 1.0, 
0.0, 1.0 
]; 

var quad_indices = 
[ 
0, 2, 1, 0, 3, 2 
]; 

var geometry = new THREE.BufferGeometry(); 

var vertices = new Float32Array(quad_vertices); 
// Each vertex has one uv coordinate for texture mapping 
var uvs = new Float32Array(quad_uvs); 
// Use the four vertices to draw the two triangles that make up the square. 
var indices = new Uint32Array(quad_indices) 

// itemSize = 3 because there are 3 values (components) per vertex 
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); 
geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2)); 
geometry.setIndex(new THREE.BufferAttribute(indices, 1)); 

// Load the texture asynchronously 
var textureLoader = new THREE.TextureLoader(); 
textureLoader.load('./assets/texture.jpg', function (texture){ 
console.log('texture loaded'); 

var material = new THREE.MeshBasicMaterial({map: texture }); 
var mesh = new THREE.Mesh(geometry, material); 
mesh.position.z = -100; 

scene.add(mesh); 

renderer.render(scene, camera); 
}, undefined, function (err) { 
console.error('texture not loaded', err) 
}); 

爲了進一步參考：

https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene https://threejs.org/docs/index.html?q=attr#Reference/Core/BufferAttribute