陰影不與three.js所

工作，其實我是新上webGl並特意用three.js，我試圖瞭解它，而從http://stemkoski.github.com/Three.js/學習的例子。陰影不與three.js所

現在我的問題：我建立了一個小三維場景。立方體，球體，地板和點光源。現在我想讓點光源創建陰影。我把這個命令「castShadow = true;」立方體，點光源和球體，然後「receiveShadow = true;」到地板上。但那裏沒有影子。

希望有人能幫助我。

其他問題，主要目標是建立一所房子的窗戶和動畫輕如太陽。這意味着每個網格必須投射陰影並且也會接收陰影。那可能嗎？

我的代碼：

<html> 
    <head> 
     <style> 
      #container { 
       background: #225; 
       width: 400px; 
       height: 300px; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="container"> 


     </div> 

    </body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script src="js/Three.js"></script> 

    <script type="text/javascript"> 
// set the scene size 
var WIDTH = 400, 
    HEIGHT = 400; 

// set some camera attributes 
var VIEW_ANGLE = 45, 
    ASPECT = WIDTH/HEIGHT, 
    NEAR = 0.1, 
    FAR = 10000; 


var $container = $('#container'); 

// create a WebGL renderer, camera 
// and a scene 
var renderer = new THREE.WebGLRenderer(); 
var camera = 
    new THREE.PerspectiveCamera(
    VIEW_ANGLE, 
    ASPECT, 
    NEAR, 
    FAR); 

var scene = new THREE.Scene(); 

///////////////////////// Camera ///////////////////// 

scene.add(camera); 
camera.position.set(180,-180,300); 
camera.lookAt(scene.position); 

///////////////////////// Floor ///////////////////// 
var floorGeometry = new THREE.PlaneGeometry(200, 200); 
    var floorMaterial = new THREE.MeshLambertMaterial({ color: 0x008800 }); 
    var floor = new THREE.Mesh(floorGeometry, floorMaterial); 
    floor.position.set(0,0,-25); 
    floor.rotation.set(0,0,0); 
    floor.doubleSided = true; 
    floor.receiveShadow = true; 
    scene.add(floor); 


///////////////////////// Cube ///////////////////// 
var cubeGeometry = new THREE.CubeGeometry(50, 50, 50); 
    var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x000088 }); 
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
    cube.position.set(0,0,0); 
    cube.castShadow = true; 
    scene.add(cube); 


///////////////////////// Sphere ///////////////////// 

var sphereGeometry = new THREE.SphereGeometry(50, 16, 16); 
    var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 }); 
    sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); 
    sphere.position.set(100,100,0); 
    sphere.castShadow = true; 
    scene.add(sphere); 




///////////////////////// Point Light ///////////////////// 
var pointLight = new THREE.PointLight(0xFFFFFF); 
    pointLight.position.set(50,50,130); 
    pointLight.shadowCameraVisible = true; 
    pointLight.shadowDarkness = 1; 
    pointLight.intensity = 2; 
    pointLight.castShadow = true; 
    scene.add(pointLight); 




renderer.setSize(WIDTH, HEIGHT); 
$container.append(renderer.domElement); 
renderer.render(scene, camera); 

    </script> 
</html>

來源

2013-02-20 Larkis

不要複製網絡中的舊例子。請參閱與當前版本r.56兼容的官方three.js示例。 – WestLangley 2013-02-20 16:44:50

如果你在一個問題中沒有提出多個問題，它在這裏效果會更好。 – 2013-02-20 16:49:22

你啓用渲染陰影？

renderer.shadowMapEnabled = true;

來源

2013-02-20 16:28:16 sole

此外，點燈不會投射陰影。定向燈和聚光燈。 – gaitat 2013-02-20 16:33:41

沒錯！共發現上:-) – sole 2013-02-20 16:34:59

謝謝，把它在renderer.setSize（寬度，高度）; renderer.shadowMapEnabled = true; $ container.append（renderer.domElement）; renderer.render（scene，camera）;現在地板已經消失了。 – Larkis 2013-02-20 16:38:21

陰影不與three.js所

回答

相關問題