05-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(0xffffff, 0.015, 100); // 创建一个相机
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; // 创建地面
var planeGeometry = new THREE.PlaneGeometry(60, 40, 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 = 0;
plane.position.y = 0;
plane.position.z = 0; // 添加地面到场景中去
scene.add(plane); // 相机对准场景
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); // 添加自然光
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight); // 添加聚光灯
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight); // 添加到DOM元素中去
document.getElementById("WebGL-output").appendChild(renderer.domElement); var step = 0; var controls = new function () {
this.rotationSpeed = 0.02;
this.numberOfObjects = scene.children.length; this.removeCube = function () {
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length - 1];
if (lastObject instanceof THREE.Mesh) {
scene.remove(lastObject);
this.numberOfObjects = scene.children.length;
}
}; this.addCube = function () { var cubeSize = Math.ceil((Math.random() * 3));
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true; // 在场景中随机位置
cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
cube.position.y = Math.round((Math.random() * 5));
cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height)); // 场景中添加物体
scene.add(cube);
this.numberOfObjects = scene.children.length;
}; this.outputObjects = function () {
console.log(scene.children);
}
}; var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'addCube');
gui.add(controls, 'removeCube');
gui.add(controls, 'outputObjects');
gui.add(controls, 'numberOfObjects').listen(); render(); function render() {
stats.update(); // 旋转场景中所有元素
scene.traverse(function (e) {
if (e instanceof THREE.Mesh && e != plane) { e.rotation.x += controls.rotationSpeed;
e.rotation.y += controls.rotationSpeed;
e.rotation.z += controls.rotationSpeed;
}
}); 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>
05-THREE.JS 产生大雾的效果的更多相关文章
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 面向对象原生js幻灯片代淡出效果
面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- Turn.js 实现翻书效果的学习与总结
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
随机推荐
- Linux中vim命令出现E325错误解决方法
出现该问题的原因是: vim在编辑文件的时候会创建一个swp file来保证文件的安全性,如果没有正常退出vim的,下次打开这个文件就会报E325的错误,提示swp文件已经存在. 解决方法也简单:把这 ...
- Python基础-时间模块和radom模块
时间模块 import time # 引入时间模块 print(time.time()) # 1508146954.9455004: 时间戳 print(time.clock()) # 计算CPU执行 ...
- 模版抽离 优化url
抽离出base模板 复制index的代码到base里面,指定views里面跳转到base.html,删除掉会变化的保留通用的 把主要内容写写在block里面,写了三个block {% block le ...
- 【转】Python爬虫_示例2
爬虫项目:爬取并筛选拉钩网职位信息自动提交简历 一 目标站点分析 #一:实验前准备: 浏览器用Chrome 用Ctrl+Shift+Delete清除浏览器缓存的Cookie 打开network准备 ...
- 42和为S的两个数字
题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 设置 ...
- Fidder详解之抓包
前言 本文是博主发表的第一篇文章,如有傻逼之处,请大家见谅.最近遇到很多人说接口相关的问题,比如:什么是接口,我该怎么做接口测试,还有我总是抓不到APP上的https请求(这个巨坑,不知道坑了多少小白 ...
- iOS Xcode 8 快捷键 (注释 失效 处理)
在升级后,好用的VVDocumment 插件不能用了.(但是苹果这次内置了好多好用的插件,也有自己的注释功能了 AddDocumentation) 上网上有查到 传播很广泛的一条信息 "这个 ...
- iOS 52个技巧学习心得笔记 第二章 对象 , 消息, 运行期
1. 属性 在开发过程中经常要用到定义属性,@property和@synthesize是经常用到的属性, property在.h文件中作声明,@synthesize在.m文件中用于实现 // Stud ...
- 给嵌入式linux串口添加密码的一些总结
要添加串口登录密码就需要修改 /etc/inittab 文件的配置 但是不同的开发板情况不一样,有的是没有这个文件的,BusyBox会检查/etc/inittab文件是否存在, 如果此文件不存在, B ...
- Git常见命令整理
Git常见命令整理 + 注释 git init # 初始化本地git仓库(创建新仓库) git config --global user.name "xxx" # 配置用户名 gi ...