如何在 THREE.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，因为本地图像加载不起作用，正如开发人员所重申的那样。

运行 Web 服务器是不可接受的解决方法，不会予以考虑。
我可能愿意做将每张图片转换为 Base64 的苦差事，但我不知道如何集成该解决方案。

我意识到图像可能没有显示，因为它在调用之前尚未加载。加载图像最简单的方法是什么？

Answer 1

它就像使用数据 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);

Answer 2

另一种将图像作为纹理加载的方法是使用 require 并使用图像的相对路径：

我正在使用 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);

如何在 THREE.js 中加载本地图像？

How can I load a local image in THREE.js?

javascript

base64

three.js