三.js:带纹理坐标的BufferGeometry [英] three.js: BufferGeometry with texture coordinates

问题描述

我找不到具有纹理坐标的 THREE.BufferGeometry 示例.它应该用于纹理网格吗?我无法让它工作.这是我的测试代码:

I could not found example of THREE.BufferGeometry with texture coordinates. Is it supposed to be used for textured mesh? I can't get it to work. Here is my test code:

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 创建网格就可以了，所以我不知道这段代码有什么问题.有什么想法吗?

Just creating mesh with THREE.Geometry is OK so I have no idea what can be wrong with this code. Any thoughts?

推荐答案

这里是一个带有 uvs 的索引 BufferGeometry 的工作示例.我更新了您的示例以使用three.js r83.我看到旧代码有两个问题.首先，您不能仅将 geometry.attributes 设置为等于 JSON 对象定义.THREE.BufferAttribute 是一个类，但您的 JSON 缺少 THREE.Renderer 所需的原型上的函数定义.第二个 THREE.ImageUtils 已被 THREE.TextureLoader 替换，因此我也在示例中更新了它.

Here is a working example of indexed BufferGeometry with uvs. I updated your example to work with three.js r83. I saw two problems with the old code. First, you can't just set geometry.attributes equal to a JSON object definition. THREE.BufferAttribute is a class, but your JSON is missing the function definitions on its prototype that are required by the THREE.Renderer. Second THREE.ImageUtils has been replaced by THREE.TextureLoader, so I updated that in the example as well.

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

这篇关于三.js:带纹理坐标的BufferGeometry的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！