three.js 纹理未应用于网格答案

【问题标题】：three.js texture not applied to meshthree.js 纹理未应用于网格
【发布时间】：2016-06-14 14:50:40
【问题描述】：

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

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

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

【问题讨论】：

确认你的素材颜色不是黑色，图片是否和js脚本在同一个主机上。使用完整的 textureLoader 实现来捕获错误。控制台没有错误？
你需要在onLoad回调中应用纹理。
THREE JS TextureLoader的可能重复
检查我对类似问题的回答here（它有一个演示）

标签： javascript three.js

【解决方案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);
}

【讨论】：