燈沒有在對象

Question

上顯示，所以我一直在與this搞，我終於爲我做了一切工作。我是任何類型的JavaScript的初學者，所以我不知道這是一個簡單的修復。基本上，我不能讓燈光在月球上出現，就像original那樣。

那麼這是我迄今爲止。

<script type="text/javascript" id="mainCode"> 

var container, 
    renderer, 
    scene, 
    camera, 
    mesh, 
    light = { 
     speed: 0.1, 
     distance: 1000, 
     position: new THREE.Vector3(0, 0, 0), 
     orbit: function (center, time) { 
      this.position.x = 
       (center.x + this.distance) * Math.sin(time * -this.speed); 

      this.position.z = 
       (center.z + this.distance) * Math.cos(time * this.speed); 
     } 
    }, 
    clock, 
    controls; 


     init(); 

     function init() { 

     // grab the container from the DOM 
     container = document.getElementById("container"); 


     scene = new THREE.Scene(); 

     var fov = 35, 
     aspect = window.innerWidth/window.innerHeight, 
     near = 1, 
     far = 65536; 

     renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true}); 
     renderer.setClearColor(0x000000, 1); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     container.appendChild(renderer.domElement); 

     camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 
     camera.position.set(0, 0, 800); 

     scene.add(camera); 

     controls = new THREE.TrackballControls(camera); 
     controls.rotateSpeed = 0.5; 
     controls.dynamicDampingFactor = 0.5; 

     clock = new THREE.Clock(); 

     var radius = 100; 
     var xSegments = 50; 
     var ySegments = 50; 
     var geo = new THREE.SphereGeometry(radius, xSegments, ySegments); 

     var mat = new THREE.ShaderMaterial({ 
      uniforms: { 
       lightPosition: { 
        type: 'v3', 
        value: light.position 
       }, 
       textureMap: { 
        type: 't', 
        value: THREE.ImageUtils.loadTexture("img/maps/moon.jpg") 
       }, 
       normalMap: { 
        type: 't', 
        value: THREE.ImageUtils.loadTexture("img/maps/normal.jpg") 
       }, 
       uvScale: { 
        type: 'v2', 
        value: new THREE.Vector2(1.0, 1.0) 

       } 


      }, 
      vertexShader:document.getElementById('vertexShader').textContent, 
      fragmentShader:document.getElementById('fragmentShader').textContent 

     }); 

      mesh = new THREE.Mesh(geo, mat);  
      mesh.geometry.computeTangents(); 
      mesh.position.set(0, 0, 0); 
      mesh.rotation.set(0, 180, 0); 
      scene.add(mesh); 


    } 

    function onWindowResize() { 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     camera.aspect = window.innerWidth/window.innerHeight; 
     camera.updateProjectionMatrix(); 
    } 

    function animate() { 
     requestAnimationFrame(animate); 
     light.orbit(mesh.position, clock.getElapsedTime()); 
     controls.update(camera); 
     renderer.render(scene, camera); 

    } 
    animate(); 

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


</script> 

Answer 1

您從不在場景中添加任何燈光。月亮示例使用比您現在需要的更復雜的自定義着色器。你需要創建一個常規的三個光並把它添加到你的場景，例如

http://threejs.org/docs/#Reference/Lights/PointLight

從three.js所r.72取出

var light = new THREE.PointLight(0xff0000, 1, 100); 
light.position.set(50, 50, 50); 
scene.add(light);