Three.js中有紋理的球體

Question

我是Three.js的新手，所以我提出一個基本問題。我無法在球體上加載紋理。 它在函數createEarthMaterial中。我的紋理圖像被稱爲'map2.png'。 我嘗試了幾乎所有的東西。我的代碼來自「Three.js Essentials」一書，它不起作用。你能提供任何好的解決方案嗎？提前致謝。 這裏是代碼：

 // global variables 
    var renderer; 
    var scene; 
    var camera; 
    var control; 
    var stats; 
    var cameraControl; 


    /** 
* Initializes the scene, camera and objects. Called when the window is 
* loaded by using window.onload (see below) 
*/ 






function init() { 
    // create a scene, that will hold all our elements such as objects, cameras and lights. 
    scene = new THREE.Scene(); 
    // create a camera, which defines where we're looking at. 
    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 
    // create a render, sets the background color and the size 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setClearColor(0xcccccc, 1.0); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.shadowMapEnabled = true; 



    var sphereGeometry = new THREE.SphereGeometry(15, 30, 30); 




    var sphereMaterial = createEarthMaterial(); 
    var earthMesh = new THREE.Mesh(sphereGeometry, sphereMaterial); 
    earthMesh.name = 'earth'; 
    scene.add(earthMesh); 







    // position and point the camera to the center of the scene 
    camera.position.x = 35; 
    camera.position.y = 36; 
    camera.position.z = 33; 
    camera.lookAt(scene.position); 
    // add controls 
cameraControl = new THREE.OrbitControls(camera); 

    // setup the control object for the control gui 
    control = new function() { 
     this.rotationSpeed = 0.005; 
     this.opacity = 0.6; 
    }; 
    // add extras 

    // add the output of the renderer to the html element 
    document.body.appendChild(renderer.domElement); 
    // call the render function, after the first render, interval is determined 
    // by requestAnimationFrame 
    render(); 
    } 


    function createEarthMaterial() { 
    // 4096 is the maximum width for maps 
    var earthTexture = THREE.ImageUtils.loadTexture("map2.png"); 

    var earthMaterial = new THREE.MeshBasicMaterial(); 
    earthMaterial.map = earthTexture; 

    return earthMaterial; 
    } 

/** 
* Called when the scene needs to be rendered. Delegates to requestAnimationFrame 
* for future renders 
*/ 

function addControlGui(controlObject) { 
    var gui = new dat.GUI(); 
    gui.add(controlObject, 'rotationSpeed', -0.01, 0.01); 
} 



    function addStatsObject() { 
    stats = new Stats(); 
    stats.setMode(0); 
    stats.domElement.style.position = 'absolute'; 
    stats.domElement.style.left = '0px'; 
    stats.domElement.style.top = '0px'; 
    document.body.appendChild(stats.domElement); 
    } 



    function render() { 
    // update stats 
    //stats.update(); 

    cameraControl.update(); 
    // update the camera 

    scene.getObjectByName('earth').rotation.y+=control.rotationSpeed; 
    // and render the scene 
    renderer.render(scene,camera); 
    // render using requestAnimationFrame 
    requestAnimationFrame(render); 
    } 
    /** 
    * Function handles the resize event. This make sure the camera and the renderer 
    * are updated at the correct moment. 
    */ 
    function handleResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    } 



    // calls the init function when the window is done loading. 
    window.onload = init; 
    // calls the handleResize function when the window is resized 
    window.addEventListener('resize', handleResize, false); 

Answer 1

你沒有考慮一個事實，即圖像加載是異步的。看看例子http://threejs.org/examples/#canvas_geometry_earth和圖像加載代碼：

var loader = new THREE.TextureLoader(); 
loader.load('textures/land_ocean_ice_cloud_2048.jpg', function (texture) { 

    var geometry = new THREE.SphereGeometry(200, 20, 20); 

    var material = new THREE.MeshBasicMaterial({ map: texture, overdraw: 0.5 }); 
    var mesh = new THREE.Mesh(geometry, material); 
    group.add(mesh); 

});