ThreeJS中的纹理

如何解决ThreeJS中的纹理

我试图将纹理放在ThreeJS的 BoxGeometry 中，但是我失败了，我使用了绝对路径，在同一目录中全部失败了。

我的脚本，谢谢。

const scene = new THREE.Scene();

const light = new THREE.AmbientLight(0xFFFFFF,0.5);

scene.add(light);

const light1 = new THREE.PointLight(0xFFFFFF,0.5);

scene.add(light1);

const camera = new THREE.PerspectiveCamera(

    75,window.innerWidth / window.innerHeight,0.1,1000
);

const renderer = new THREE.WebGLRenderer({antialias: true });

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);


const geometry = new THREE.BoxGeometry( 100,100,100 );

const material = new THREE.MeshPhongMaterial({
    color: 0xf3ffe2,map: new THREE.TextureLoader().load('img.png'),// problem

    specular:0xffffff,shininess:1   
});

const cube = new THREE.Mesh( geometry,material );

cube.position.set(0,-200);
scene.add( cube );

camera.position.z = 250; 

function animate(){
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.rotation.z += 0.01;
    renderer.render(scene,camera);
}

animate();

解决方法

图像必须在服务器上才能有效渲染。就像马奎佐指出的那样。 我总是遇到这个问题。

我对安全工作流程的建议：

如果可能的话，请始终通过https://threejs.org/editor/进行纹理处理，如果您具有复杂的纹理工作，则搅拌器可能是以前的超级解开UV并进行处理的超级工具，然后导出到GLB，导入threejs编辑器以增加照明效果-调整外观。当你高兴的时候，发布你的作品

祝你好运！