Question

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

if (checklist.indexOf(i) !== -1) {
    console.log("Found !");
}

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

Answer 1

如果没有一个完整的例子，很难肯定地说，但我的第一个猜测是最简单的情况：纹理在渲染网格时没有完成加载。

如果这是问题，请确保在调用渲染循环之前已加载纹理。有很多方法可以做到这一点很难说没有看到你的代码哪个是最好的，但最直接的处理方法是将函数传递给loader的 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);
}

three.js纹理未应用于网格

1 个答案: