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

写在前面

调整了光源的参数和位置后,阴影效果比较好。

代码

var d_light=new THREE.DirectionalLight(ambiColor);
d_light.target=cube_2;
d_light.castShadow=true;
d_light.shadowCameraVisible=true;
d_light.shadowCameraNear = 2;
d_light.shadowCameraFar = 100;
d_light.shadowCameraLeft = -30;
d_light.shadowCameraRight = 30;
d_light.shadowCameraTop = 50;
d_light.shadowCameraBottom = -10;
d_light.position.set(0,36,4);
scene.add(d_light);

shadowCameraNear控制阴影近场,shadowCameraFar控制阴影远场,用于平行光的照射范围是一个长方体,所以有top,bottom,left,right来控制四个边际面的位置(不应该是六个面吗?)。
将光源位置调整合适,即可看到渲染的阴影。效果还是不错的。

我的threejs学习笔记(十)---平行光(二)_第1张图片

代码全文


<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({color:"#a00"});
    var cube_1=new THREE.Mesh(cubeGeo_1,cubeMaterial_1);

    cube_1.castShadow=true;
    cube_1.receiveShadow=true;
    scene.add(cube_1);
    var cube_2=new THREE.Mesh(cubeGeo_1,cubeMaterial_1);
    cube_2.castShadow=true;
    scene.add(cube_2);


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

    var d_light=new THREE.DirectionalLight(ambiColor);
    d_light.target=cube_2;
    d_light.castShadow=true;
    d_light.shadowCameraVisible=true;
    d_light.shadowCameraNear = 2;
    d_light.shadowCameraFar = 100;
    d_light.shadowCameraLeft = -30;
    d_light.shadowCameraRight = 30;
    d_light.shadowCameraTop = 50;
    d_light.shadowCameraBottom = -10;
    d_light.position.set(0,36,4);
    scene.add(d_light);


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


//    function createParticles() {
//        var geom=new THREE.Geometry();
//        var material=new THREE.ParticleBasicMaterial({size:4,vertexColors:true,color:0xffff00});
//        for(var x=-5;x<5;x++){
//            for(var y=1;y<5;y++){
//                var particle=new THREE.Vector3(x*10,y*10,Math.random()*6);
//                geom.vertices.push(particle);
//                geom.colors.push(new THREE.Color(Math.random()*0xffffff));
//            }
//        }
//
//        var system=new THREE.ParticleSystem(geom,material);
//        scene.add(system);
//    }
//
//    createParticles();

    camera.position.set(36,66,45);
    camera.lookAt(scene.position);
    var angle=0;
    var render=function () {
      requestAnimationFrame(render);
      angle+=0.04;
      cube_1.position.set(15*Math.sin(angle),5,15*Math.cos(angle));
      cube_2.position.set(15*Math.cos(angle),15,15*Math.sin(angle));
      renderer.render(scene,camera);
    };
    render();
script>
body>
html>

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