Question

我是Three.js的新手，并且正在Three.js中学习闪电和阴影。

我的场景中有球体和飞机。计划是要接收球体的阴影。

我的球体是红色的。看来球体本身已开始被阴影覆盖而不是投射阴影。

我在飞机上没有阴影。

我的js代码是：

console.log(" i am here to print ");

var scene , camera , render , mesh ;

var keyboard = {} ;

var player = {height : 22};


function init(){

	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(90 , window.innerWidth / window.innerHeight  , 0.1 , 1000);

	mesh = new THREE.Mesh(
		 new THREE.BoxGeometry(1 ,1 ,  1 ),
		 new THREE.MeshBasicMaterial({color: 0xff4444 , wireframe: true })
		);

	scene.add(mesh);

	controls = new THREE.TrackballControls( camera );
	
	scene = new THREE.Scene();
	// scene.add( new THREE.HemisphereLight() );





	var sphereGeometry = new THREE.SphereBufferGeometry( 5 , 32 , 32);
	var spherematerial = new THREE.MeshStandardMaterial({color: 0xff0000});
	var sphere = new 	THREE.Mesh( sphereGeometry, spherematerial);
	sphere.castShadow = true ;
	sphere.recieveShadow = false ;
	sphere.position.set(0 , 10 , 22);
	scene.add(sphere);

	var directionalLight = new THREE.DirectionalLight( 0xffffff  , 1 , 100 );
	// directionalLight.position.y = 100 ; 
	directionalLight.position.set( 88, 122, 5 );
	directionalLight.target = sphere;
	directionalLight.castShadow=true;

	// directionalLight.shadow = new 	THREE.LightShadow(new THREE.PerspectiveCamera(100 , 1 , 500 , 1000));

	directionalLight.shadow.bias = 0.01;
	directionalLight.shadow.mapSize.width = 512;
	directionalLight.shadow.mapSize.height = 512;
	directionalLight.shadow.camera.near = 0;
	directionalLight.shadow.camera.far= 500;
	

	var PlaneBufferGeometry = new THREE.PlaneBufferGeometry(220 , 220 , 20 , 20 );
	var Planematerial  =  new THREE.MeshPhongMaterial({color:0xffffff});
	var plane = new THREE.Mesh(PlaneBufferGeometry , Planematerial);
	plane.rotation.x=THREE.Math.degToRad(-90);
	plane.recieveShadow = true;
	plane.position.set(-1 , -1 , -4);
	scene.add( plane);



	// var ambientlight = new THREE.AmbientLight(0xffffff , 0.2);
	// scene.add(ambientlight);

	scene.add( directionalLight );
	var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
				grid.material.opacity = 0.2;
				grid.material.transparent = true;
				scene.add( grid );



	camera.position.z = 999;
	camera.lookAt(new THREE.Vector3(0,player.height,0));

	renderer = new THREE.WebGLRenderer();

	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type =   THREE.PCFSoftShadowMap;

	renderer.setClearColor(0xcccccc);

	document.body.appendChild(renderer.domElement);

	animate();
}


function animate()

{
	

	// mesh.rotation.x += 0.01 ;
	// mesh.rotation.y += 0.02 ; 


	if (keyboard[37]) {

			mesh.rotation.y -= Math.PI*0.01 ; 
	}

	if (keyboard[38]){

			mesh.rotation.x += Math.PI*0.01;

	}

	if (keyboard[39]) {

			mesh.rotation.y += Math.PI*0.01 ; 
	}

	if (keyboard[40]){

			mesh.rotation.x += Math.PI*0.01;

	}


	if (keyboard[65]) {

			camera.rotation.y += Math.PI*0.01 ; 
	}

	if (keyboard[68]){

			camera.rotation.y -= Math.PI*0.01;

	}


	controls.update();
	renderer.render(scene , camera);
	requestAnimationFrame(animate);
}

function keyUp(event)
{

	keyboard[event.keyCode] = false ; 
}

function keyDown(event)
{
	keyboard[event.keyCode] = true ; 

}

window.addEventListener('keyup', keyUp);
window.addEventListener('keydown' , keyDown);

window.onload = init;

<!DOCTYPE html>
<html>
<head>
	<title> ThreeJS </title>
	<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
</head>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.js"></script>
<script src = "demo.js"> </script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/loaders/TDSLoader.js"></script>
<script  src = "js/libs/inflate.min.js"type="text/javascript"></script>
<script type="text/javascript" src="js/loaders/FBXloader.js"></script>


</body>
</html>

在输出中，平面上不存在阴影。我想其中有球的自阴影。

输出为：

three.js中的照明和阴影

0 个答案: