向场景添加灯光没有效果

问题描述

我刚刚开始使用 Three.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()

我还使用解析后的 js 创建了一个 js fiddle.

I also created a js fiddle with the parsed js.

推荐答案

MeshBasicMaterial 不支持光照，你应该改变你的材质.支持照明的基本材料是 MeshLambertMaterial，我已更新您的 jsfiddle.

MeshBasicMaterial doesn't support lighting, you should change your material. A basic material supporting lighting is MeshLambertMaterial, I have updated your jsfiddle.

更详细的例子:http://mrdoob.github.com/three.js/examples/canvas_lights_pointlights.html

这篇关于向场景添加灯光没有效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！