Question

其实我是webGl的新用户，特别是three.js，我正在尝试学习http://stemkoski.github.com/Three.js/中的示例。

现在我的问题：我建立了一个小3D场景。立方体，球体，地板和点光源。现在我想要点光源来创建阴影。我把这个命令“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>

Answer 1

您是否在渲染器上启用了阴影？

renderer.shadowMapEnabled = true;

阴影不适用于three.js

1 个答案: