three.js 纹理未加载答案

【问题标题】：three.js texture is not loadingthree.js 纹理未加载
【发布时间】：2014-03-10 19:10:31
【问题描述】：

通过尝试教程 (http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/) 未加载所需的纹理。这是我在 index.html 脚本区域中尝试的代码

<script src="js/jquery.js"></script>
<script src="js/threejs/build/three.js"></script>
<script>
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth /     window.innerHeight, 0.01, 1000 );
    camera.position.z = 1.5; 
    var texture = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');
    texture.anisotropy = 16;
    var material = new THREE.MeshPhongMaterial( { map: texture } );

    /*material.bumpMap = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');
    material.bumpScale = 0.05;*/
    var scene = new THREE.Scene();
    var light = new THREE.AmbientLight(0x888888);
    scene.add(light);
    var light = new THREE.DirectionalLight( 0xCCCCCC, 1 );
    light.position.set(5,3,5);
    scene.add(light); 

    var earthMesh = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), material);
    scene.add(earthMesh);

    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize(window.innerWidth, window.innerHeight);
    var $container = $('#container');
    $container.append(renderer.domElement);

    renderer.render(scene, camera);

</script>

所以我在这里做错了什么？？？

提前感谢您的帮助

最好的问候卡斯滕

【问题讨论】：

您在 /images/earthmap1k.jpg 中有图像文件吗？还要检查浏览器中的 Javascript 控制台日志（在 Firefox 中为 ctrl+shift+k，在 Chrome 中为 ctrl+shift+j）
嗨，prabindh，是的，它在这个目录中。在控制台日志中，图像正确显示。
检查你的纹理图像大小，然后检查几何半径......
您好，在警告 texture.image hat 是 HTMLImageObject 之后，会显示纹理。如果我删除警报方法，纹理也会消失。那是什么效果？？？
将图像添加到 Mesh 后，图像似乎没有完全加载。这可能吗？

标签： three.js textures

【解决方案1】：

试试这个..

var tUrl = "images/earthbump1k.jpg";
var texture = THREE.ImageUtils.loadTexture(tUrl, {}, createMesh);
function createMesh(texture){
var material = new THREE.MeshPhongMaterial( { map: texture } );
var earthMesh = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), material);
scene.add(earthMesh);
}

【讨论】：

那也行不通。相同的功能。如果我有一次提醒某事，那么地球会显示出来，但没有提醒一切都是黑色的。
这里的 creeteMesh() 是 onload 函数...一旦你的纹理加载，onload 函数就会被回调调用...你能分享你的完整代码吗..
所以现在我通过使用名为 animate 的函数并执行 requestAnimationFrame 来修复它，然后它可以在没有警报的情况下工作:)
代码对于 cmets 来说太长了，我可以在 8 小时内先写出我的问题的答案。