I was just starting to play around with Three.JS but I am stuck at the beginning. When I add a light to the scene, it has no effect.
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()
I also created a js fiddle with the parsed js.
I was just starting to play around with Three.JS but I am stuck at the beginning. When I add a light to the scene, it has no effect.
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()
I also created a js fiddle with the parsed js.
Share Improve this question asked Oct 9, 2011 at 12:52 nocksocknocksock 5,5276 gold badges41 silver badges66 bronze badges1 Answer
Reset to default 16MeshBasicMaterial doesn't support lighting, you should change your material. A basic material supporting lighting is MeshLambertMaterial, I have updated your jsfiddle.
More detailed example: http://mrdoob.github./three.js/examples/canvas_lights_pointlights.html