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

供进一步参考:

创建一个场景

BufferAttribute