Question

通过尝试教程（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>

所以我在这里做错了???

感谢您提前的帮助

最好的问候卡斯滕

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

three.js纹理没有加载

1 个答案: