javascript - Three.js 纹理未应用于网格

Question

我正在尝试使用以下内容将纹理应用到我的球体网格。

var loader =  new THREE.TextureLoader();
var balltex = loader.load("pic1.jpg");
var ballmat = new THREE.MeshBasicMaterial({ map:balltex }); 
var ballgeo = new THREE.SphereGeometry( 0.3, 20, 20 );
var ball = new THREE.Mesh( ballgeo , ballmat );
scene.add(ball);    

现在我只是得到一个黑色球体而不是纹理球体。我不知道代码有什么问题。
请帮助我。

Answer 1

如果没有完整的示例，很难确定，但我的第一个猜测是最简单的情况:渲染网格时纹理尚未完成加载。

如果这是问题所在，请确保在调用渲染循环之前加载纹理。有很多方法可以做到这一点，在没有看到代码的情况下很难说哪种方法最好，但最直接的处理方法是将函数传递给加载器的 load() 方法并调用渲染器从中。一个简单但完整的示例重新编写您发布的代码:

var scene, camera, light, renderer, balltex;

load();

function load() {
        var loader;

        loader = new THREE.TextureLoader(new THREE.LoadingManager());
        loader.load('pic1.jpg', function(obj) {
                balltex = obj;
                init();
                animate();
        });
}

function init() {
        var height = 500, width = 500, bg = '#000000';

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(45, height/width, 1, 10000);
        camera.position.set(1.5, 1.5, 1.5);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

        light = new THREE.AmbientLight(0xffffff);
        scene.add(light);

        var ballmat = new THREE.MeshBasicMaterial({
                map:    balltex
        }); 
        var ballgeo = new THREE.SphereGeometry( 0.3, 20, 20 );
        var ball = new THREE.Mesh( ballgeo , ballmat );
        scene.add(ball);

        renderer = new THREE.WebGLRenderer({ antialias: true } );
        renderer.setClearColor(bg);
        renderer.setSize(width, height);

        var d = document.createElement('div');
        document.body.appendChild(d);
        d.appendChild(renderer.domElement);

        var c = document.getElementsByTagName('canvas')[0];
        c.style.width = width + 'px';
        c.style.height = height + 'px'
}

function animate() {
        requestAnimationFrame(animate);
        render();
}

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