Three.js入门（二）添加材质、光源和阴影效果

基本材质（THREE.MeshBasicMaterial）不会对光源有任何反应，可以更换其他材质

屏幕快照 2018-06-11 下午8.23.00.png

function init(){
            
            var scene  = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45,window.innerHeight/window.innerWidth,0.1,1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE);
            renderer.setSize(window.innerWidth,window.innerHeight);
            renderer.shadowMapEnabled=true;

            var axes = new THREE.AxesHelper(20);
            scene.add(axes);

            var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
            var planeMeterial = new THREE.MeshLambertMaterial({color:0xcccccc});

            var plane = new THREE.Mesh(planeGeometry,planeMeterial);

            plane.rotation.x=-0.5*Math.PI;
            plane.position.x=15;
            plane.position.y=0;
            plane.position.z=0;

            scene.add(plane);

            var cubeGeometry = new THREE.BoxGeometry(4,4,4);
            var cubeMeterial = new THREE.MeshLambertMaterial({color:0xff000});
            var cube = new THREE.Mesh(cubeGeometry,cubeMeterial);

            cube.position.x=-4;
            cube.position.y=3;
            cube.position.z=0;

            scene.add(cube);

            var sphereGeometry = new THREE.SphereGeometry(4,20,20);
            var sphereMeterial = new THREE.MeshLambertMaterial({color:0x7777ff});
            var sphere = new THREE.Mesh(sphereGeometry,sphereMeterial);

            sphere.position.x=20;
            sphere.position.y=4;
            sphere.position.z=2;

            scene.add(sphere);

            camera.position.x=-60;
            camera.position.y=80;
            camera.position.z=60;

            camera.lookAt(scene.position);

            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-40,60,-10);
            scene.add(spotLight);

            plane.receiveShadow = true;  //接受阴影
            cube.castShadow=true;          //投射阴影
            sphere.castShadow=true;       //投射阴影

            spotLight.castShadow=true;  //光源



            document.getElementById("WebGL-output").appendChild(renderer.domElement);
            renderer.render(scene,camera);

        };
        window.onload=init()