<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>

    <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>

    <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 stats = initStats();

        // 创建一个场景

        var scene = new THREE.Scene();

        scene.fog = new THREE.Fog(0xaaaaaa, 0.010, 200);

        // 创建一个相机

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

        // 创建一个渲染器

        var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

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

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

        renderer.shadowMapEnabled = true;

        // 创建草坪

        var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");

        textureGrass.wrapS = THREE.RepeatWrapping;

        textureGrass.wrapT = THREE.RepeatWrapping;

        textureGrass.repeat.set(4, 4);

		//创建地面

        var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);

        var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});

        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, 25, 25);

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

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

        // 设置圆球坐标

        sphere.position.x = 10;

        sphere.position.y = 5;

        sphere.position.z = 10;

        sphere.castShadow = true;

        // 把圆球添加到场景中

        scene.add(sphere);

        // 设置相机坐标

        camera.position.x = -20;

        camera.position.y = 15;

        camera.position.z = 45;

        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, 60, -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);

        var spotLight = new THREE.DirectionalLight(pointColor);

        spotLight.position.set(30, 10, -50);

        spotLight.castShadow = true;

        spotLight.shadowCameraNear = 0.1;

        spotLight.shadowCameraFar = 100;

        spotLight.shadowCameraFov = 50;

        spotLight.target = plane;

        spotLight.distance = 0;

        spotLight.shadowCameraNear = 2;

        spotLight.shadowCameraFar = 200;

        spotLight.shadowCameraLeft = -100;

        spotLight.shadowCameraRight = 100;

        spotLight.shadowCameraTop = 100;

        spotLight.shadowCameraBottom = -100;

        spotLight.shadowMapWidth = 2048;

        spotLight.shadowMapHeight = 2048;

        scene.add(spotLight);

       //把渲染后的效果放到DOM元素中去

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

        var step = 0;

        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 = 0.1;

            this.distance = 0;

            this.exponent = 30;

            this.angle = 0.1;

            this.debug = false;

            this.castShadow = true;

            this.onlyShadow = false;

            this.target = "Plane";

        };

        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, 'intensity', 0, 5).onChange(function (e) {

            spotLight.intensity = e;

        });

        var textureFlare0 = THREE.ImageUtils.loadTexture("../assets/textures/lensflare/lensflare0.png");

        var textureFlare3 = THREE.ImageUtils.loadTexture("../assets/textures/lensflare/lensflare3.png");

		//眩晕设置

        var flareColor = new THREE.Color(0xffaacc);

        var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor);

        lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);

        lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);

        lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);

        lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);

        lensFlare.position.copy(spotLight.position);

        scene.add(lensFlare);

        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)));

            requestAnimationFrame(render);

            renderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

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

            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>

　　

17-THREE.JS 光晕滤镜的更多相关文章

  1. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

  2. 1-7 basket.js localstorage.js缓存css、js

    basket.js 源码分析   api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/       一.前言 b ...

  3. 10.17 elemen.js

    今天终于把element.js的官方文档看完了,主要是基础组件的用法,看的时候有种之前学bootstrap的感觉,似曾相识. 虽然它是基于VUE的,但是展示给我们的代码已经精简到不用会VUE也能看懂了 ...

  4. 17.Node.js 回调函数--异步编程

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程 ...

  5. 10月17日 JS开始日~

    1.变量提升 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域,叫window, window分为两个模块,一个叫做内存模块,一个叫做运行模块,内存模块找到当前作用域下的 ...

  6. vue.js 开发生态总结

    ---title: Vue 1.0 的技术栈date: 2016-09-26 00:48:50tags:category:--- ## vuejs概述 Vue.js是用于构建交互式的Web界面的库.它 ...

  7. 前端必备的js知识点（转载）

    1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点?    ...

  8. js高级应用

    特别板块:js跨域请求Tomcat6.tomcat7 跨域设置(包含html5 的CORS) 需要下载两个jar文件,cors-filter-1.7.jar,Java-property-utils-1 ...

  9. JS疑难点和GC原理

    js解析与序列化json数据(一)json.stringify()的基本用法: 对象有两个方法:stringify()和parse().在最简单的情况下,这两个方法分别用于把JavaScript对象序 ...

随机推荐

  1. 001-centos7安装 笔记本 联想G510

    一.准备前提 1.联想G510AT 用winpe进入笔记本电脑,找到一个分区,删除即可 2.使用U盘安装 2.1.准备一个8G 的U盘,格式化ntfs. 2.2.在window下,下载UltraISO ...

  2. boost之算法

    STL里的算法已经很好了,在boost里有几个小的算法 1.BOOST_FOREACH使用方法,定义一个容器里内部类型数据,容器作为参数传递. #include <iostream> #i ...

  3. Python学习笔记1_初识Python

    一.Python的发展 1.CNRI时期:CNRI是自助Python发展初期的重要单位,Python1.5版之前的成果大部分都在此时期内完成 2.BeOpen时期:Guido van Rossum与B ...

  4. 剑指offer 面试56题

    面试56题: 题目:数组中数字出现的次数 题:一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 解题思路: 方法一:异或运算,详见<剑指offer&g ...

  5. Win8.1和office2013使用电话激活步骤

    Win8.1和office2013使用电话激活步骤: 先从Win8.1贴吧的最后几个回复中找到几个密钥,最后的通常是最新的,然后输入到Win8.1中,会提示你密钥无效,如果有效你就走了狗屎运了,无效的 ...

  6. css样式之补充

    css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图片的位置(也就是设置元素 ...

  7. Loadrunder之脚本篇——检查点

    VuGen判断脚本是否执行成功是根据服务器返回的状态来确定的,如果服务器返回的是HTTP状态为200 OK,那么VuGen就认为脚本正确地运行了,并且是运行通过的.而大多数系统出错时是不会返回错误页面 ...

  8. I.MX6Q(TQIMX6Q/TQE9)学习笔记——U-Boot移植

    其实Freescale的BSP移植文档已经将u-boot的移植步骤讲述的非常详细了,但为了以后方便查阅,还是按照自己的理解记录在这里. 获取源码 根据前一篇文章搭建好LTIB环境后就可以非常方便的导出 ...

  9. for update排他锁详解

    使用场景: 高并发并且对于数据的准确性很有要求. 落实到mysql就是在事务中使用,只有使用InnoDB时才用,在begin于commit之间使用(只有此引擎支持事务). 本质: 给表或行上个锁以便接 ...

  10. 换行符在textarea、div、pre中的区别

    关于换行符,网上有许多说法,IE早期的浏览器是\r\n,有的浏览器是\r,但很难找到确切的版本号.经过本人正则匹配测试,chrome.firefox.safari.IE11都是\n, 因此保险起见,若 ...