Three.js 纹理不加载答案

【问题标题】：Three.js texture does not loadThree.js 纹理不加载
【发布时间】：2021-11-11 03:22:53
【问题描述】：

我正在尝试制作地球的模型，但无法加载纹理，我不知道为什么会发生这种情况，我尝试更改图像格式并将其用作导出链接，但它仍然存在不工作。

我的代码：

import * as THREE from 'https://cdn.skypack.dev/three@0.134.0'





const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer(
);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);




renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement);




const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(5, 50, 50), 
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('.img/global.jpeg')
        })
        
    
    );
    



scene.add(sphere);
camera.position.z = 15;


function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

【问题讨论】：

请使用浏览器开发工具确认图片是否实际加载。在许多类似的情况下，纹理路径错误或后端服务器未正确提供图像。
谢谢，我发现错误是调用错误 = .img/global.jpeg 正确 = img/global.jpeg

标签： javascript three.js

【解决方案1】：

我的第一个建议是将代码拆分为单独的步骤，以便查明发生错误的位置。此外，TextureLoader.load() 有 a few callback functions 可以帮助您确定加载是否成功：

const geom = new THREE.SphereGeometry(5, 50, 50);

const texLoader = new THREE.TextureLoader();
const texture = texLoader.load(
    // Location
    '.img/global.jpeg', 

    // On success
    function(texture) {
        console.log("Success!");
        console.log(texture);
    },

    // Progress (ignored)
    undefined,

    // On error
    function(err) {
        console.log("Error");
        console.log(err);

    }
);

const mat = new THREE.MeshBasicMaterial({map: texture});
const sphere = new THREE.Mesh(geom, mat);

然后您可以检查控制台以查看日志显示的内容。

【讨论】：