0

実際、私は初めてでwebGl、特にhttp://stemkoski.github.com/Three.js/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>
4

1 に答える 1

3

レンダラーでシャドウを有効にしましたか？

renderer.shadowMapEnabled = true;
于 2013-02-20T16:28:16.320 に答える