17-THREE.JS 光晕滤镜
<!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 光晕滤镜的更多相关文章
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...
- 1-7 basket.js localstorage.js缓存css、js
basket.js 源码分析 api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/ 一.前言 b ...
- 10.17 elemen.js
今天终于把element.js的官方文档看完了,主要是基础组件的用法,看的时候有种之前学bootstrap的感觉,似曾相识. 虽然它是基于VUE的,但是展示给我们的代码已经精简到不用会VUE也能看懂了 ...
- 17.Node.js 回调函数--异步编程
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程 ...
- 10月17日 JS开始日~
1.变量提升 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域,叫window, window分为两个模块,一个叫做内存模块,一个叫做运行模块,内存模块找到当前作用域下的 ...
- vue.js 开发生态总结
---title: Vue 1.0 的技术栈date: 2016-09-26 00:48:50tags:category:--- ## vuejs概述 Vue.js是用于构建交互式的Web界面的库.它 ...
- 前端必备的js知识点(转载)
1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点? ...
- js高级应用
特别板块:js跨域请求Tomcat6.tomcat7 跨域设置(包含html5 的CORS) 需要下载两个jar文件,cors-filter-1.7.jar,Java-property-utils-1 ...
- JS疑难点和GC原理
js解析与序列化json数据(一)json.stringify()的基本用法: 对象有两个方法:stringify()和parse().在最简单的情况下,这两个方法分别用于把JavaScript对象序 ...
随机推荐
- ZFI_VENDOR_CREATE
创建供应商函数, 需要考虑是 G_TASK = I /U /M FUNCTION zfyj_vendor_create. *"-------------------------------- ...
- Kafka配置参数说明
配置文件目录:/usr/local/kafka/config配置文件server.propertis参数说明:broker.id=0每一个broker在集群中的唯一标识,要求是正数,当该服务器的IP地 ...
- Nginx配置参数说明
一.主配置段1.正常运行必备的配置#运行用户和组,组身份可以省略user nginx nginx; #指定nginx守护进程的pid文件pid path/to/nginx.pid; #指定所有work ...
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
- 美图秀秀 web开发图片编辑器
美图秀秀web开发平台 http://open.web.meitu.com/wiki/ 1.环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的c ...
- 06_Hadoop配置伪分布式模式详解
查看IP地址,设为手动模式: 配置hadoop用户sudo权限 su切换到root身份,配置vim /etc/sudoers文件,加入 hadoop ALL=(root)NOPASSWD:ALL ...
- VMWare中安装windowsXP遇到的问题
XP系统安装 1.安装Windows和安装linux不一样,创建虚拟机完成后Linux自动根据硬盘进行系统安装,不需要提前分区.而windows必须进行提前分区,这个分区是在虚拟磁盘上完成的,就是你创 ...
- 【CodeChef】Small factorials(BigInteger笔记)
You are asked to calculate factorials of some small positive integers. Input An integer t, 1<=t&l ...
- 嵌入式Qt程序启动参数-qws 不需要X11桌面系统
1 背景 通过串口终端启动arm开发板(linux系统)的Qt应用程序,提示: [root@FORLINX6410]# /opt/qt-4.7.1/demos/textedit/textedit s3 ...
- Linux网络检测手段汇总
1.iftop iftop可测量通过每一个套接字连接传输的数据:它采用的工作方式有别于nload.iftop使用pcap库来捕获进出网络适配器的数据包,然后汇总数据包大小和数量,搞清楚总的带宽使用情况 ...