three.js : 텍스처 좌표가있는 BufferGeometry

Question

텍스처 좌표가있는 THREE.BufferGeometry의 예제를 찾을 수 없습니다. 텍스쳐 메쉬에 사용 되나요? 나는 그것을 작동시킬 수 없다. 이 코드로 잘못 될 수 있는지 아무 생각이 없다, 그래서 THREE.Geometry와

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); 

그냥 만드는 메시는 OK입니다 : 여기에 내 테스트 코드입니다. 이견있는 사람?

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) 
}); 

: THREE.BufferGeometryUtils.fromGeometry (기하학, 설정)`에서

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