Thêm ánh sáng vào cảnh không có hiệu lực

Question

Tôi chỉ mới bắt đầu chơi với Three.JS nhưng tôi bị kẹt ngay từ đầu. Khi tôi thêm ánh sáng vào cảnh, nó không có hiệu lực.

renderer = new THREE.WebGLRenderer() 
camera = new THREE.PerspectiveCamera 45, # View Angle 
    800/640, # Aspect 
    0.1, # Near 
    10000 # Far 

camera.position.z = 300 

scene = new THREE.Scene() 
renderer.setSize 800, 640 

document.body.appendChild(renderer.domElement) 

createSphere = (radius = 50, segments = 16, rings = 16) -> 
    sphere = new THREE.SphereGeometry(radius, segments, rings) 
    material = new THREE.MeshBasicMaterial { 
    color: 0xCC000F, 
    shading: THREE.SmoothShading, 
    ambient: 0x555555, 
    specular: 0xffffff 
    } 

    new THREE.Mesh sphere, material 

light = new THREE.PointLight(0x0040ff) 
light.position.x = 10 
light.position.y = 50 
light.position.z = 300 
light.intensity = 0.1 

object = createSphere() 
scene.add new THREE.AmbientLight(0x0000F0) 
scene.add light 
scene.add object 

draw = -> 
    time = new Date().getTime() * 0.0005; 
    light.position.x = Math.sin(time * 0.7) * 30 
    object.rotation.x += 0.02 
    renderer.render scene, camera 
    requestAnimationFrame draw 

draw() 

Tôi cũng đã tạo một js fiddle với js được phân tích cú pháp.

Answer 1

MeshBasicMaterial không hỗ trợ ánh sáng, bạn nên thay đổi tài liệu của mình. Một vật liệu cơ bản hỗ trợ ánh sáng là MeshLambertMaterial, tôi có updated jsfiddle của bạn.

Ví dụ chi tiết hơn: http://mrdoob.github.com/three.js/examples/canvas_lights_pointlights.html