我的threejs学习笔记(九)---平行光

写在前面

今天没出作品。效果不太满意。明早还得早起。先睡吧。明天再仔细研究平行光。

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平行光title>
    <script src="../three.js-master/three.js">script>
    <script src="../../lib/dat.gui-master/build/dat.gui.min.js">script>
    <style>
        body{
            margin:0;
            overflow: hidden;
        }
    style>
head>
<body>
<script>
    var scene=new THREE.Scene();

    var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);



    var renderer=new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setClearColor("#333");
    renderer.shadowMapEnabled=true;
    document.body.appendChild(renderer.domElement);

    var planeGeo=new THREE.PlaneGeometry(60,40,1,1);
    var planeMaterial=new THREE.MeshLambertMaterial();
    var plane=new THREE.Mesh(planeGeo,planeMaterial);
    plane.rotation.x=-0.5*Math.PI;
    plane.receiveShadow=true;
    scene.add(plane);

    var cubeGeo_1=new THREE.BoxGeometry(5,5,5);
    var cubeMaterial_1=new THREE.MeshLambertMaterial();
    var cube_1=new THREE.Mesh(cubeGeo_1,cubeMaterial_1);
    cube_1.position.set(2,19,9);
    cube_1.castShadow=true;
    scene.add(cube_1);
    var cube_2=new THREE.Mesh(cubeGeo_1,cubeMaterial_1);
    cube_2.position.set(-2,2,2);
    //scene.add(cube_2);


    var ambiColor="#538682";
    var ambiLight=new THREE.AmbientLight(ambiColor);
    //scene.add(ambiLight);

    var d_light=new THREE.DirectionalLight("#080");
    d_light.target=cube_1;
    d_light.castShadow=true;
    d_light.shadowCameraVisible=true;
    d_light.position.set(0,26,4);
    scene.add(d_light);




    var controls=new function () {
        this.camera_x=36;
        this.camera_y=44;
        this.camera_z=45;
        this.change_color=ambiColor;
    };
    var gui=new dat.GUI();
    gui.add(controls,"camera_x",-60,60).onChange(function (e) {
        cube_1.position.x=e;
    });
    gui.add(controls,"camera_y",0,60).onChange(function (e) {
        cube_1.position.y=e;
    });
    gui.add(controls,"camera_z",0,70).onChange(function (e) {
        cube_1.position.z=e;
    });
    gui.addColor(controls,"change_color").onChange(function (e) {
        ambiLight.color=new THREE.Color(e);
    });


    camera.position.set(36,44,45);
    camera.lookAt(scene.position);
    var render=function () {
      requestAnimationFrame(render);
      renderer.render(scene,camera);
    };
    render();
script>
body>
html>

问题是平面上的阴影似乎没有出来。应该是有阴影,但参数没调好。
平行光同样有shadowMapEnabled可以调试阴影的生成过程。有target属性可以追踪场景物体。

你可能感兴趣的:(学习笔记,three.js学习笔记)