threejs第一用

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>

猜你喜欢