var scene = new THREE.Scene();场景
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );透视投影
var renderer = new THREE.WebGLRenderer();渲染器
document.body.appendChild( renderer.domElement );
var p=new THREE.PlaneGeometry(10,10);
var pMaterial = new THREE.MeshLambertMaterial({color:0xffff00});
var plane=new THREE.Mesh(p,pMaterial);
plane.castShadow = true;//这两个是显示阴影用的
plane.receiveShadow=true;
scene.add(plane);
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
var cube = new THREE.Mesh( geometry, material );
cube.position.z=1;
cube.castShadow=true;
scene.add( cube );//创建一个立方体 材质+网格
var light;
light = new THREE.SpotLight(0xffffff);
light.castShadow = true;
light.position.set( 3, 2, 1.1);
light.target = plane;//照向谁
scene.add(light);//
//var target = new THREE.Object3D();
//target.position.set(30, 0, 0);
//scene.add(target);//target=target这个是让你不用专门照向谁
renderer.shadowMapEnabled=true;//开启阴影
var render = function () {
requestAnimationFrame( render );//update函数
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
render()一下开始循环
完整代码
<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <script src="libs/Three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); document.body.appendChild( renderer.domElement ); var p=new THREE.PlaneGeometry(10,10); var pMaterial = new THREE.MeshLambertMaterial({color:0xffff00}); var plane=new THREE.Mesh(p,pMaterial); plane.castShadow = true; plane.receiveShadow=true; scene.add(plane); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshLambertMaterial( { color: 0xff0000 } ); var cube = new THREE.Mesh( geometry, material ); cube.position.z=1; //cube.position.y=0.5; console.log(cube.position); cube.castShadow=true; scene.add( cube ); var light; light = new THREE.SpotLight(0xffffff); light.castShadow = true; light.position.set( 3, 2, 1.1); light.target = plane; scene.add(light); camera.position.z = 5; camera.position.x=2; // renderer.setColor(0xffffff,1.0); //renderer.setClearColor(0xfff000,1.0); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.shadowMapEnabled=true; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; render(); </script> </body> </html>