Three.js一個場景中的多個紋理和圖像

Question

我使用THREE.js在瀏覽器中顯示一個3d旋轉的地球。我也想要一個圖像出現在旋轉的地球周圍。 我嘗試使用內置的方法，

var img = new THREE.ImageLoader(); 
img.load("texture/circle.png"); 

但圖像不會只出現。這只是旋轉的球體。

我想是這樣的

這裏是我的腳本標籤，

<script> 

    var container, stats; 
    var camera, scene, renderer; 
    var group; 
    var mouseX = 0, mouseY = 0; 

    var windowHalfX = window.innerWidth/2; 
    var windowHalfY = window.innerHeight/2; 

    init(); 
    animate(); 

    function init() { 

    container = document.getElementById('container'); 

    camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 2000); 
    camera.position.z = 650; 

    scene = new THREE.Scene(); 

    group = new THREE.Object3D(); 
    scene.add(group); 

    // 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: true }); 
    var mesh = new THREE.Mesh(geometry, material); 
    group.add(mesh); 


    }); 

    // shadow 

    var canvas = document.createElement('canvas'); 
    canvas.width = 128; 
    canvas.height = 128; 

    var context = canvas.getContext('2d'); 
    var gradient = context.createRadialGradient(
    canvas.width/2, 
    canvas.height/2, 
    0, 
    canvas.width/2, 
    canvas.height/2, 
    canvas.width/2 
    ); 
    //gradient.addColorStop(0.1, 'rgba(210,210,210,1)'); 
    //gradient.addColorStop(1, 'rgba(255,255,255,1)'); 

    context.fillStyle = gradient; 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    var texture = new THREE.Texture(canvas); 
    texture.needsUpdate = true; 

    var geometry = new THREE.PlaneGeometry(300, 300, 3, 3); 
    var material = new THREE.MeshBasicMaterial({ map: texture, overdraw: true }); 

    var mesh = new THREE.Mesh(geometry, material); 
    mesh.position.y = - 250; 
    mesh.rotation.x = - Math.PI/2; 
    group.add(mesh); 

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    container.appendChild(renderer.domElement); 

    stats = new Stats(); 
    stats.domElement.style.position = 'absolute'; 
    stats.domElement.style.top = '0px'; 
    container.appendChild(stats.domElement); 

    document.addEventListener('mousemove', onDocumentMouseMove, false); 

    // 

    window.addEventListener('resize', onWindowResize, false); 

    } 

    function onWindowResize() { 

    windowHalfX = window.innerWidth/2; 
    windowHalfY = window.innerHeight/2; 

    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 

    renderer.setSize(window.innerWidth, window.innerHeight); 

    } 

    function onDocumentMouseMove(event) { 

    mouseX = (event.clientX - windowHalfX); 
    mouseY = (event.clientY - windowHalfY); 

    } 



    function animate() { 

    requestAnimationFrame(animate); 

    render(); 
    stats.update(); 

    } 

    function render() { 

    //camera.position.x += (mouseX - camera.position.x) * 0.05; 
    //camera.position.y += (- mouseY - camera.position.y) * 0.05; 
    camera.lookAt(scene.position); 

    group.rotation.y -= 0.003; 

    renderer.render(scene, camera); 

    } 


    </script> 

Answer 1

的平面是水平的。刪除這一行：

mesh.rotation.x = - Math.PI/2; 

確保梯度設置你想要的方式，例如，

gradient.addColorStop(0.9, 'rgba(210, 210, 210, 1)'); 
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)'); 

此外，CanvasRenderer將與相交對象文物。

three.js r.62