2015-02-07 46 views
1

第一次嘗試三個js ...我的立方體是黑色的...我把顏色設置爲紅色,是有原因的嗎?三個js立方體是黑色的...不是紅色的

<!DOCTYPE html> 
<html> 

    <head> 
     <title>Some shapes</title> 
     <script type="text/javascript" src="../lib/threejs/build/three.js"></script> 
     <script type="text/javascript" src="../lib/jquery-2.1.3.js"></script> 
     <style> 
      body { 
       margin: 0; 
       overflow: hidden; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="output"> 

     </div> 

     <script type="text/javascript"> 
      $(function() { 
       var scene = new THREE.Scene(); 

       var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 

       var renderer = new THREE.WebGLRenderer(); 
       renderer.setClearColor(0xEEEEEE); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       renderer.shadowMapEnabled = true; 

       var cubeGeometry = new THREE.CubeGeometry(8,8,8); 

       var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x990000}); 

       var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 

       cube.position.x = -4; 
       cube.position.y = 3; 
       cube.position.z = 0; 

       scene.add(cube); 

       camera.position.x = -30; 
       camera.position.y = 40; 
       camera.position.z = 30; 
       camera.lookAt(scene.position); 

       $("#output").append(renderer.domElement); 
       renderer.render(scene, camera); 
      }); 
     </script> 
    </body> 

</html> 

我在網格lambert材料中設置顏色......但我不認爲我需要做的比這更多嗎?在瀏覽器中它出來黑色......它可能與setClearColour有什麼關係?

+1

我將MeshLambertMaterial更改爲MeshBasicMaterial並且它工作正常,我猜測這是因爲lambert材質顏色可能是由物體上的某種光源決定的,因爲沒有光線,顏色會出現黑色... – user2405469 2015-02-07 11:51:31

回答

1

這是我原來的評論:

我改變MeshLambertMaterial到MeshBasicMaterial和它的工作,我猜測,因爲蘭伯特材料的顏色很可能是由某種物體上的光源的決定,因爲沒有光,顏色現身黑色...

我返工我第一次嘗試這樣的:

$(function() { 
       var scene = new THREE.Scene(); 

       var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 

       var renderer = new THREE.WebGLRenderer(); 
       renderer.setClearColor(0xEEEEEE); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       renderer.shadowMapEnabled = true; 

       var cubeGeometry = new THREE.CubeGeometry(8,8,8); 

       var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x990000}); 

       var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 

       cube.position.x = -4; 
       cube.position.y = 3; 
       cube.position.z = 0; 

       scene.add(cube); 

       //add some lighting 
       var ambientLight = new THREE.AmbientLight(0x0c0c0c); 
       scene.add(ambientLight); 

       var spotLight = new THREE.SpotLight(0xffffff); 
       spotLight.position.set(-40, 60, -10); 

       spotLight.castShadow = true; 

       scene.add(spotLight); 


       camera.position.x = -30; 
       camera.position.y = 40; 
       camera.position.z = 30; 
       camera.lookAt(scene.position); 

       $("#output").append(renderer.domElement); 
       renderer.render(scene, camera); 
      }); 

我的猜測是正確的,在使用蘭伯特或海防材料,你需要一些燈光,否則在黑暗中,y由於材料會對某些照明作出反應,因此您將無法看到顏色。

+0

這非常有趣 – user2405469 2015-02-07 12:01:08