Three.js - Применение текстуры (2D-изображение PNG) вокруг 3D-сферы появляется черным

Question

Я использую THREE.js для отображения 3d вращающейся земли в браузере. Я также хочу, чтобы изображение появилось вокруг вращающейся земли.

Я пробовал несколько методов, но они вообще не работали. Я использовал загрузчик изображений, но он ничего не показывает.

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

Я в основном хотел что-то вроде этого, http://imgur.com/AV28hq6

Глобус работает хорошо, мне просто нужно иметь круговое изображение над ним, как показано на рисунке.

Вот мой сценарий тег,

<script> 

    var container, stats, raycaster; 
    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 = 500; 

    scene = new THREE.Scene(); 

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

    // earth 



    var loader = new THREE.TextureLoader(); 
    loader.load('textures/1.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); 
    raycaster = new THREE.Raycaster(); 


    }); 


    // 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.001; 







    renderer.render(scene, camera); 

    } 


    </script> 

Answer 1

, если вы ищете какие-то вещи, как это .... Ваш код может потребоваться изменения ... проверить эту ссылку .. http://jsfiddle.net/MP6BF/

var container, stats, raycaster; 
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.createElement('div'); 
document.body.appendChild(container); 

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

scene = new THREE.Scene(); 

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

// earth 



var loader = new THREE.TextureLoader(); 
//loader.load('http://i.imgur.com/AV28hq6.jpg', function (texture) { 
    loader.load('http://www.joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg',function(texture){ 
var geometry = new THREE.SphereGeometry(200, 25, 200); 

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


}); 
    loader.load('http://i.imgur.com/AV28hq6.jpg', function (texture) { 
var geometry = new THREE.PlaneGeometry(600, 575, 30, 30); 
var material = new THREE.MeshBasicMaterial({ map: texture, overdraw: true }); 

var mesh = new THREE.Mesh(geometry, material); 
mesh.position.z = 100; 
//mesh.rotation.x = - Math.PI/2; 
scene.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; 
scene.add(mesh); 

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

container.appendChild(renderer.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(); 

} 

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.001; 







renderer.render(scene, camera); 

} 

Answer 2

Может быть, вы забыли йо добавить немного света?

/ add subtle ambient lighting 
var ambientLight = new THREE.AmbientLight(0x555555); 
scene.add(ambientLight); 

// add directional light source 
var directionalLight = new THREE.DirectionalLight(0xffffff); 
directionalLight.position.set(1, 1, 1).normalize(); 
scene.add(directionalLight); 

Надеюсь, это поможет!