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