14-THREE.JS 聚光灯

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        body {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div id="Stats-output">

</div>

<div id="WebGL-output">

</div>

<script type="text/javascript">

    // 初始化

    function init() {

        var stopMovingLight = false;

        var stats = initStats();

        // 创建一个场景

        var scene = new THREE.Scene();

        // 创建一个照相机

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

        // 创建一个渲染器

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.shadowMapEnabled = true;

        renderer.shadowMapType = THREE.PCFShadowMap;

        // 创建一个地板

        var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);

        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

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

        plane.receiveShadow = true;

        // 给地板一个坐标

        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 cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3333});

        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        cube.castShadow = true;

        // 给这个正方体坐标

        cube.position.x = -4;

        cube.position.y = 3;

        cube.position.z = 0;

        // 把正方体添加到场景中去

        scene.add(cube);

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});

        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // 正方体坐标位置

        sphere.position.x = 20;

        sphere.position.y = 0;

        sphere.position.z = 2;

        sphere.castShadow = true;

        // 把正方体添加到场景中

        scene.add(sphere);

        // 创建位置和朝向

        camera.position.x = -35;

        camera.position.y = 30;

        camera.position.z = 25;

        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // 添加自然光

        var ambiColor = "#1c1c1c";

        var ambientLight = new THREE.AmbientLight(ambiColor);

        scene.add(ambientLight);

        // 添加聚光灯

        var spotLight0 = new THREE.SpotLight(0xcccccc);

        spotLight0.position.set(-40, 30, -10);

        spotLight0.lookAt(plane);

        scene.add(spotLight0);

        var target = new THREE.Object3D();

        target.position = new THREE.Vector3(5, 0, 0);

        //添加聚光灯

        var pointColor = "#ffffff";

        var spotLight = new THREE.SpotLight(pointColor);

        spotLight.position.set(-40, 60, -10);

        spotLight.castShadow = true;

        spotLight.shadowCameraNear = 2;

        spotLight.shadowCameraFar = 200;

        spotLight.shadowCameraFov = 30;

        spotLight.target = plane;

        spotLight.distance = 0; //光的距离

        spotLight.angle = 0.4; //光的强度

        scene.add(spotLight);

        // 添加一个小的圆形  点光源

        var sphereLight = new THREE.SphereGeometry(0.2);

        var sphereLightMaterial = new THREE.MeshBasicMaterial({color: 0xac6c25});

        var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);

        sphereLightMesh.castShadow = true;

        sphereLightMesh.position = new THREE.Vector3(3, 20, 3);

        scene.add(sphereLightMesh);

        // 把渲染元素放到DOM元素里面去

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function

        var step = 0;

        // used to determine the switch point for the light animation

        var invert = 1;

        var phase = 0;

        var controls = new function () {

            this.rotationSpeed = 0.03;

            this.bouncingSpeed = 0.03;

            this.ambientColor = ambiColor;

            this.pointColor = pointColor;

            this.intensity = 1;  //影子大小

            this.distance = 0;

            this.exponent = 30;

            this.angle = 0.1;

            this.debug = false; //是否调试

            this.castShadow = true;

            this.onlyShadow = false;

            this.target = "Plane";

            this.stopMovingLight = false;

        };

        var gui = new dat.GUI();

        gui.addColor(controls, 'ambientColor').onChange(function (e) {

            ambientLight.color = new THREE.Color(e);

        });

        gui.addColor(controls, 'pointColor').onChange(function (e) {

            spotLight.color = new THREE.Color(e);

        });

        gui.add(controls, 'angle', 0, Math.PI * 2).onChange(function (e) {

            spotLight.angle = e;

        });

        gui.add(controls, 'intensity', 0, 5).onChange(function (e) {

            spotLight.intensity = e;

        });

        gui.add(controls, 'distance', 0, 200).onChange(function (e) {

            spotLight.distance = e;

        });

        gui.add(controls, 'exponent', 0, 100).onChange(function (e) {

            spotLight.exponent = e;

        });

        gui.add(controls, 'debug').onChange(function (e) {

            spotLight.shadowCameraVisible = e;

        });

        gui.add(controls, 'castShadow').onChange(function (e) {

            spotLight.castShadow = e;

        });

        gui.add(controls, 'onlyShadow').onChange(function (e) {

            spotLight.onlyShadow = e;

        });

        gui.add(controls, 'target', ['Plane', 'Sphere', 'Cube']).onChange(function (e) {

            console.log(e);

            switch (e) {

                case "Plane":

                    spotLight.target = plane;

                    break;

                case "Sphere":

                    spotLight.target = sphere;

                    break;

                case "Cube":

                    spotLight.target = cube;

                    break;

            }

        });

        gui.add(controls, 'stopMovingLight').onChange(function (e) {

            stopMovingLight = e;

        });

        render();

        function render() {

            stats.update();

            // 旋转正方体

            cube.rotation.x += controls.rotationSpeed;

            cube.rotation.y += controls.rotationSpeed;

            cube.rotation.z += controls.rotationSpeed;

            // 控制球体的移动

            step += controls.bouncingSpeed;

            sphere.position.x = 20 + ( 10 * (Math.cos(step)));

            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            // 移动光点

            if (!stopMovingLight) {

                if (phase > 2 * Math.PI) {

                    invert = invert * -1;

                    phase -= 2 * Math.PI;

                } else {

                    phase += controls.rotationSpeed;

                }

                sphereLightMesh.position.z = +(7 * (Math.sin(phase)));

                sphereLightMesh.position.x = +(14 * (Math.cos(phase)));

                sphereLightMesh.position.y = 10;

                if (invert < 0) {

                    var pivot = 14;

                    sphereLightMesh.position.x = (invert * (sphereLightMesh.position.x - pivot)) + pivot;

                }

                spotLight.position.copy(sphereLightMesh.position);

            }

            requestAnimationFrame(render);

            renderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            stats.domElement.style.position = 'absolute';

            stats.domElement.style.left = '0px';

            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;

        }

    }

    window.onload = init;

</script>

</body>

</html>

14-THREE.JS 聚光灯的更多相关文章

2016.02.14 总结JS事件
今天主要总结JS事件的基本知识以及使用技巧,并作出相应的DEMO.
14 (H5*) JS第4天函数、作用域、预解析
目录 1:函数的其他定义 2:函数作为参数 3:函数作为返回值 4:作用域 5:作用域链 6:预解析 7:预解析分段复习 <script> /* * 复习: * 函数:把一些重复的代码封 ...
14.data.js
dict_data = { "_id":1, name:"王五", age:55, gender:true } db.stu.insert(dict_data) ...
arcgis api for js入门开发系列一arcgis api离线部署
在我的GIS之家QQ群里,很多都是arcgis api for js开发的新手,他们一般都是GIS专业的学生,或者从计算机专业刚刚转向来的giser,他们难免会遇到各种webgis开发的简单问题,由于 ...
[转]OC与JS的交互详解
事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...
关于JS
首先推荐一个小插件:W3Cfuns前端开发工具箱整理一些杂乱的知识点. 1,Dom用于操作html元素 2,window.location.reload();//刷新当前页********** 3, ...
JS疑难点和GC原理
js解析与序列化json数据(一)json.stringify()的基本用法: 对象有两个方法:stringify()和parse().在最简单的情况下,这两个方法分别用于把JavaScript对象序 ...
Vue.js实例练习
最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接标题用了自定义组件,代码如下: components ...
iOS之与JS交互通信
随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法一.UIWebview && iframe && ...

随机推荐

jQuery实现复选框全选、全不选、反选问题解析
今天打算用jQuery实现一下复选框的全选.全不选和反选问题,刚开始用的是attr("checked",true/false)方法,发现只能在最开始实现一次全选,可以实现全不选,无 ...
Linux中进程在前后台的切换
把进程放入后台执行 tar -zcf etc.tar.gz /etc &把进程放入后台暂停在命令执行的过程中,按下ctrl+z 查看后台的命令 jobs[root@localhost tem ...
Linux中权限管理之文件属性权限
chattr [+-=][选项] 文件或目录名 + 增加权限 - 删除权限 = 等于某权限选项: i 文件设置i属性,不允许对文件进行删除.改名.添加.修改数据,相当于把整个文件锁起来了目录设置i ...
李治军老师操作系统课程资源分享（视频+pdf）
最近别人推荐,看看了哈工大的李治军老师主讲的操作系统,李治军老师通过linux0.11内核源码的讲解,学习了很多,更加形象了解了理论知识. 分享给大家,有pdf 链接:https://pan.baid ...
PhoneGap 兼容IOS上移20px(包括启动页，拍照)
引自:http://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap 情景:在ios7下PhoneGap app会 ...
ACM解题之素矩阵
题意: 如果一个矩形的两条边都是素数,则称此矩形为素矩形.本题给出一个素矩形的面积,请计算其两条边的值.有多个测试用例.每个用例占一行,包含一个表示素矩形面积且不超过 108 的正整数.输入直至没有数 ...
常用mysql导入导出数据的命令
To export 导出指定db_name的数据: $ mysqldump -u [uname] -p[pass] db_name > db_backup.sql 导出整个库的数据: $ mys ...
前端基础之jquery_mouse相关操作与不同
jquery中mouse相关操作与不同 mousedown() //当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件 mouseup() //当鼠标指针移动到元素上方,并松 ...
POJ - 2464 Brownie Points II 【树状数组 + 离散化】【好题】
题目链接 http://poj.org/problem?id=2464 题意在一个二维坐标系上给出一些点 Stan 先画一条过一点的水平线 Odd 再画一条过Stan那条水平线上的任一点的垂直线 ...
iOS 认识runtime 中的三个指针 isa , IMP , SEL
runtime中函数调用经常被提及的三个概念 isa,IMP,SEL 一 isa:是类指针,之所以说isa是指针是因为Class其实是一个指向objc_class结构体的指针,而isa 是它唯一的私 ...

14-THREE.JS 聚光灯

14-THREE.JS 聚光灯的更多相关文章

随机推荐

热门专题