阴影不适用于three.js
实际上，我是新来的阴影不适用于three.js,three.js,shadow,Three.js,Shadow,实际上，我是新来的webGl，特别是three.js，我正在努力学习它，同时从中学习示例 现在我的问题是：我建立了一个小3D场景。立方体、球体、地板和点光源。现在我想要点光源创建阴影。我把这个命令“castShadow=true；”放到立方体、点光源和球体上，然后把“receiveShadow=true；”放到地板上。但是那里没有影子 希望有人能帮助我 另一个问题是，主要目标是建造一个有窗户的房子，并有一个像太阳一样的充满活力的灯光。这意味着每个网格必须投射阴影，也必须接收阴影。可能吗 我的代码
webGlthree.js <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>
#容器{
背景：#225；
宽度：400px；
高度：300px；
}
//设置场景大小
可变宽度=400，
高度=400；
//设置一些摄影机属性
var视图_角度=45，
纵横比=宽度/高度，
接近=0.1，
FAR=10000；
var$container=$（“#container”）；
//创建WebGL渲染器、摄影机
//还有一个场景
var renderer=new THREE.WebGLRenderer（）；
var摄像机=
新型三透视照相机(
视角，
方面,，
近的
远）；
var scene=new THREE.scene（）；
/////////////////////////摄像机/////////////////////
场景。添加（摄影机）；
摄像机位置设置（180，-180300）；
摄像机。注视（场景。位置）；
/////////////////////////地板/////////////////////
var地板测量法=新的三平面几何（200200）；
var floorMaterial=新的3.MeshLambertMaterial（{color:0x008800}）；
var地板=新的三层网格（地板测量、地板材料）；
地板。位置。设置（0,0，-25）；
地板。旋转。设置（0,0,0）；
floor.doubleside=true；
floor.receiveShadow=true；
场景。添加（楼层）；
/////////////////////////立方体/////////////////////
var立方计量法=新的三个立方计量法（50,50,50）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0x000088}）；
立方体=新的三网格（立方计量法、立方材料）；
立方体位置集（0,0,0）；
cube.castShadow=true；
场景.添加（立方体）；
/////////////////////////球体/////////////////////
var比色法=新的三种比色法（50,16,16）；
var sphereMaterial=new THREE.MeshLambertMaterial（{color:0xCC0000}）；
球体=新的三个网格（球体测量法、球体材料）；
球体位置设置（100100,0）；
sphere.castShadow=true；
场景。添加（球体）；
/////////////////////////点光源/////////////////////
var pointLight=新的三点光源（0xFFFFFF）；
点光源位置设置（50,50130）；
pointLight.shadowCameravible=true；
pointLight.shadowDarkness=1；
点光源强度=2；
pointLight.castShadow=true；
场景。添加（点光源）；
设置大小（宽度、高度）；
$container.append（renderer.domeElement）；
渲染器。渲染（场景、摄影机）；
renderer.shadowMapEnabled = true;
是否在渲染器上启用了阴影
renderer.shadowMapEnabled = true;
此外，点光源不会投射阴影。方向灯和聚光灯都可以。真的！完全正确：-）谢谢，把它放在渲染器上。设置大小（宽度，高度）；renderer.shadowMapEnabled=true$container.append（renderer.domeElement）；渲染器。渲染（场景、摄影机）；现在地板不见了。将您的示例与JSFIDLE联机，这样我们就可以看到发生了什么！此外，点光源不会投射阴影。方向灯和聚光灯都可以。真的！完全正确：-）谢谢，把它放在渲染器上。设置大小（宽度，高度）；renderer.shadowMapEnabled=true$container.append（renderer.domeElement）；渲染器。渲染（场景、摄影机）；现在地板不见了。将您的示例与JSFIDLE联机，这样我们就可以看到发生了什么！不要从网上复制旧的例子。请仅参考与当前版本r.56兼容的官方three.js示例。如果您在一个问题中不提出多个问题，则此处效果更好。不要从网上复制旧示例。请仅参考与当前版本r.56兼容的官方three.js示例。如果您在一个问题中不提出多个问题，则在此处效果更好。