使用 THREE.js 将图像加载到 BufferGeometry 表面时出现问题

Question

我正在尝试使用 BufferGeometry 在 THREE.js 中创建一个立方体，但图像无法正确加载。我已经尝试了一些东西，但似乎没有任何效果，而且 uv 似乎不起作用。

script.js

//Load the canvas to draw on
var canvas = document.querySelector('#canvas')
// The three.js scene: the 3D world where you put objects
const scene = new THREE.Scene();


function degrees_to_radians(degrees) {
    let pi = Math.PI;
    return degrees * (pi / 180);
}


// The camera
const camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    0.0001,
    10000
);

// The renderer: something that draws 3D objects onto the canvas
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x4a4a4a, 1);
document.body.appendChild(renderer.domElement);

const controls = new THREE.PointerLockControls(camera, document.body);

document.addEventListener('click', function () {
    controls.lock();
});

var key_map = {}; // You could also use an array
onkeydown = onkeyup = function (e) {
    e = e || event; // to deal with IE
    key_map[e.keyCode] = e.type == 'keydown';
}


const light = new THREE.PointLight( 0xffffff, 2, 0, 2 );
light.position.set( 10, 50, 10 );
scene.add( light );

camera.position.z = 4


const vertices = new Float32Array([
    -1.0, -1.0, 0.0,
    1.0, -1.0, 0.0,
    1.0, 1.0, 0.0,

    1.0, 1.0, 0.0,
    -1.0, 1.0, 0.0,
    -1.0, -1.0, 0.0
]);

const uvs = new Float32Array([
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,

    1.0, 1.0,
    0.0, 1.0,
    0.0, 0.0
]);

let textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('./images/grass.jpg');

const material = new THREE.MeshLambertMaterial({ map: texture });

const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 3));
geometry.computeVertexNormals();

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

scene.add(mesh);


const walk_speed = 0.05;
const sprint_speed = 0.15;
const fly_speed = 0.06;
var speed = 0;
var f_speed = 0;
var b_speed = 0;
var l_speed = 0;
var r_speed = 0;

function render() {
    //handle keypresses
    var cameraDirection = controls.getDirection(new THREE.Vector3()).clone();
    var angle = Math.atan2(cameraDirection.x, cameraDirection.z);

    if (key_map[87]) {
        //forwards
        if (key_map[17]) {
            f_speed = sprint_speed;
        } else {
            f_speed = walk_speed;
        }
        controls.getObject().position.z += (Math.cos(angle)) * f_speed;
        controls.getObject().position.x += (Math.sin(angle)) * f_speed;
    }
    if (key_map[83]) {
        //backwards
        if (key_map[17]) {
            speed = sprint_speed;
        } else {
            speed = walk_speed;
        }
        controls.getObject().position.z -= (Math.cos(angle)) * speed;
        controls.getObject().position.x -= (Math.sin(angle)) * speed;
    }
    if (key_map[65]) {
        //left
        if (key_map[17]) {
            speed = sprint_speed;
        } else {
            speed = walk_speed;
        }
        controls.getObject().position.z -= (Math.sin(angle)) * speed;
        controls.getObject().position.x += (Math.cos(angle)) * speed;
    }
    if (key_map[68]) {
        //right
        if (key_map[17]) {
            speed = sprint_speed;
        } else {
            speed = walk_speed;
        }
        controls.getObject().position.z += (Math.sin(angle)) * speed;
        controls.getObject().position.x -= (Math.cos(angle)) * speed;
    }

    if (key_map[16]) {
        //down
        camera.position.y -= fly_speed;
    }
    if (key_map[32]) {
        //up
        camera.position.y += fly_speed;
    }

    renderer.render(scene, camera);

    // Make it call the render() function about every 1/60 second
    requestAnimationFrame(render);
}


render();

我有一个奇怪的错误，纹理不起作用。

Picture

Answer 1

我没有看到您设置任何 UV 纹理坐标。没有它们，渲染器、着色器、WebGL 程序（或魔法发生的地方）不知道如何将纹理应用到网格。

const vertices = new Float32Array([
    -1.0, -1.0, 1.0,
    1.0, -1.0, 1.0,
    1.0, 1.0, 1.0,

    1.0, 1.0, 1.0,
    -1.0, 1.0, 1.0,
    -1.0, -1.0, 1.0
]);

const uvs = new Float32Array([
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,

    1.0, 1.0,
    0.0, 1.0,
    0.0, 0.0
]);

this.geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
this.geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));

如果您尝试创建一个每边都有不同纹理的立方体，您也可以只使用 BoxGeometry。它已经为每一面都有一个不同的 material 索引。因此，您只需要将 6 material 的数组应用于网格。

使用 THREE.js 将图像加载到 BufferGeometry 表面时出现问题

Trouble loading images onto a BufferGeometry surface with THREE.js

javascript

three.js

image-loading

buffer-geometry