実際、私は初めてで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>