2012-06-26 30 views
9

我不明白为什么照明不能在我的代码中工作。我下载了一个简单的OBJ。文件来测试OBJLoader,但该模型不受影响。在我更多地编辑照明之前,至少环境光照会起作用。也许是OBJ。模型需要纹理?为什么照明在Three.js中不起作用?

  var container, stats; 

     var camera, scene, renderer, controls; 


     init(); 
     animate(); 


     function init() { 

      container = document.createElement('div'); 
      document.body.appendChild(container); 

      scene = new THREE.Scene(); 

      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.z = 2.5; 
      scene.add(camera); 

      controls = new THREE.TrackballControls(camera); 

      controls.rotateSpeed = 2.0; 
      controls.zoomSpeed = 1.2; 
      controls.panSpeed = 0.0; 

      controls.noZoom = false; 
      controls.noPan = true; 

      controls.staticMoving = true; 
      controls.dynamicDampingFactor = 0.3; 

      controls.keys = [ 65, 83, 68 ]; 

      controls.addEventListener('change', render); 

      var ambient = new THREE.AmbientLight(0x020202); 
      scene.add(ambient); 

      directionalLight = new THREE.DirectionalLight(0xffffff); 
      directionalLight.position.set(1, 1, 0.5).normalize(); 
      scene.add(directionalLight); 

      pointLight = new THREE.PointLight(0xffaa00); 
      pointLight.position.set(0, 0, 0); 
      scene.add(pointLight); 

      sphere = new THREE.SphereGeometry(100, 16, 8); 
      lightMesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xffaa00 })); 
      lightMesh.scale.set(0.05, 0.05, 0.05); 
      lightMesh.position = pointLight.position; 
      scene.add(lightMesh); 


      var loader = new THREE.OBJLoader(); 
      loader.load("originalMeanModel.obj", function (object) { 
       scene.add(object); 
      }); 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 
      controls.update(); 

     } 

     function render() { 

      camera.lookAt(scene.position); 

      renderer.render(scene, camera); 

     } 
+1

您能分享您正在加载的obj文件吗? – mrdoob

+0

照明根本不起作用吗?或者只是阴影?您可以拥有定向照明,而不会有任何物体投射的实际阴影。 –

回答

0

也许this会帮助你,如果你是前几天遇到像我同样的问题,如果你在你的obj这绝对地方看不法线。

你可以尝试先从MeshBasicMaterial也只是为了检查顶点/面孔都ok:new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 })

而且,正如刚才所说杜布,请考虑分享你加载OBJ。

2

我使用three.js所出口商搅拌机时有类似的问题,一切都显得暗甚至在原来的搅拌器模型设置漫颜色和环境光添加到场景中three.js所代码。原来,修复是编辑转换模型文件的一部分,有一条线的效果:

"colorAmbient" : [0, 0, 0] 

我手动更改为

"colorAmbient" : [0.75, 0.75, 0.75] 

无处不在它出现了,该固定问题。我提出这个问题是因为我最好的猜测是你遇到类似这样的问题。在没有看到* obj文件,很难准确地诊断问题,但也许在你的模型设置,您可以尝试改变周围环境的颜色值,而不是说,漫反射颜色值,也就是我们通常认为的颜色分配的时候到一个模型。

11

MeshBasicMaterial在three.js所就像一个香椿着色器(好silouhette,阴影图或线框),并和不受灯。

Try MeshLambertMaterial or MeshPhongMaterial

相关问题