我的threejs学习笔记(五)——点光源属性控制

写在前面

主要练习了点光源的距离和密度属性。
理解了threejs里颜色使用的原理。

代码

pointLight.distance=controls.pointlight_distance;    
pointLight.intensity=controls.pointlight_intensity;

distance(距离)控制光源的照射范围;intensity(密度)控制光源的强度。

全文


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs 005!title>
    <script src="../three.js-master/build/three.min.js">script>
    <script src="../jquery/jquery.js">script>
    <script src="../../lib/dat.gui-master/build/dat.gui.min.js">script>
    <link rel="stylesheet" href="../../lib/dat.gui-master/build/dat.gui.css">

    <style>
        body{
            margin:0;
            overflow: hidden;
        }
        /*测试节点是否可以在canvas之上显示,结论是可以的*/
        p{
            position:absolute;
            /*top:30px;*/
            color:#ddd;
        }
    style>

head>
<body>

<p>我能被显示出来吗???看来是的!p>

<script>


    //创建场景和相机
    var scene=new THREE.Scene();
//    scene.overrideMaterial=new THREE.MeshLambertMaterial({color:"#ff0"});
    var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);

    //向场景中加入控制手柄
    var controls=new function () {
        //场景的y轴旋转角度
        this.angle=0;
        this.camera_posZ=15;
        //点光源的有效照射距离和密度
        this.pointlight_distance=10;
        this.pointlight_intensity=1;

        //增加物体的函数
      this.addCube=function () {
          //cube的大小是随机的
          var cubeSize=Math.ceil(Math.random()*2);
          var cube_geometry=new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize);
          var cube_material=new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});
          var cube=new THREE.Mesh(cube_geometry,cube_material);
          //cube的位置在空间中的三个轴都是随机的
          cube.position.set(-6+Math.random()*12,-6+Math.random()*12,-6+Math.random()*12);
          //cube的三轴旋转角度也是随机的
          cube.rotation.set(Math.random()*2,Math.random()*2,Math.random()*2);
          scene.add(cube);
      }  ;
    };

    //生成控制器
    var gui=new dat.GUI();
    gui.add(controls,"addCube");
    gui.add(controls,"angle",0,4*Math.PI);
    gui.add(controls,"camera_posZ",12,20);
    gui.add(controls,"pointlight_distance",0.1,20);
    gui.add(controls,"pointlight_intensity",0.1,5);


    //渲染器
    var renderer=new THREE.WebGLRenderer();
    renderer.setClearColor("#666");
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 场景初始化时有一个默认的物体
    var cubeGeometry=new THREE.CubeGeometry(1,1,1);
    var cubeMaterial=new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});
    var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
    scene.add(cube);

//    var pointLight_1=new THREE.PointLight();
//    pointLight_1.position.y=3;
//    pointLight_1.position.z=3;
//    scene.add(pointLight_1);

    //点光源
    var pointLight=new THREE.PointLight();
    pointLight.position.set(0,0,0);
    scene.add(pointLight);

    //环境光,影响整个场景
    var ambientLight=new THREE.AmbientLight({color:"#003300"});
//    scene.add(ambientLight);


    //动画
    var render=function () {
      requestAnimationFrame(render);
      pointLight.distance=controls.pointlight_distance;
      pointLight.intensity=controls.pointlight_intensity;
      camera.position.z=controls.camera_posZ;
      //camera.lookAt(new THREE.Vector3(5*Math.sin(controls.angle),5*Math.cos(controls.angle),0));
      renderer.render(scene,camera);
      scene.rotation.y=controls.angle;
    };

    render();

script>
body>
html>

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