Как я могу загрузить локальное изображение в ТРИ. js?

Question

Я пытаюсь поместить изображение на объект, например так:

var texture = new THREE.TextureLoader().load( 'crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

У меня есть "crate.gif" в моей локальной папке, но он не отображается на коробке.

Ожидается, что я либо запусту веб-сервер, либо я могу использовать URL-адрес данных, поскольку локальная загрузка изображений не работает, как повторяет разработчик.

• Запуск веб-сервера это недопустимый обходной путь, и не будет рассматриваться.
• Возможно, я захочу выполнить работу по преобразованию каждого отдельного изображения в Base64, но я не знаю, как интегрировать это решение.

Я понимаю, что изображение может не отображаться, поскольку оно не загружалось до вызова. Какой самый простой способ загрузить изображение?

Answer 1

Другой способ загрузить изображение как текстуру - использовать требование и использовать относительный путь вашего изображения:

Я использую React и работает для меня.

const textureImage = require('../assets/images/image.png');
const texture = new THREE.TextureLoader().load(textureImage);
const geometry = geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
const material = new THREE.MeshBasicMaterial( { map: texture } );
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Answer 2

Это так же просто, как использовать URI данных вместо имени файла изображения, , если все сделано правильно :

var geometry = new THREE.SphereGeometry(0.5, 32, 32);
var texture = new THREE.TextureLoader().load( "data:image/jpeg;base64,/9j/4AAQSkZJRgA--(truncated-for-example)--BAgEASABIAAD" );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);