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

我试图在一个物体上放置一个图像，如下所示：

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”，但它没有显示在框中

我被期望运行一个web服务器，或者我可以使用一个数据url，因为本地图像加载无法工作，正如开发人员重新迭代的那样

• 运行web服务器是一种不可接受的变通方法，将不予考虑
• 我可能愿意将每个图像转换为Base64，但我不知道如何集成该解决方案

---

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

如果操作正确，它与使用数据URI代替图像文件名一样容易：

---

另一种将图像加载为纹理的方法是，使用图像的相对路径并根据需要加载：

我用的是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);

---

这回答了你的问题吗？这个问题以前被问过多次：@Marquizzo否，在问题中明确禁止运行服务器这取决于node.js，因此不是一个有效的答案我理解，但我希望这个答案可以帮助其他人解决node.js上的这个问题或作出反应。

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