Three.js黑暗中的萤火虫
效果图
demo
import './index.css';
// stats
var stats;
(function(){
stats = new Stats();
document.body.appendChild( stats.dom );
})();
// gui
var gui;
(function(){
gui = new dat.GUI();
var fn = new function() {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03 ;
}
gui.add(fn,'rotationSpeed', 0, 0.5);
gui.add(fn,'bouncingSpeed', 0, 0.5);
})();
// renderer
var renderer;
(function(){
renderer = new THREE.WebGLRenderer();
renderer.physicallyCorrectLights = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
})();
// scene
var scene;
(function(){
scene = new THREE.Scene();
})();
// 相机
var camera;
(function(){
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.x = -4;
camera.position.z = 4;
camera.position.y = 2;
})();
// controls
(function(){
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
window.addEventListener('resize', function(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}, false);
})();
// 设置光源
var bulbLight;
(function(){
// 创建灯泡
var bulbGeometry = new THREE.SphereBufferGeometry( 0.02, 16, 8 );
bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
var bulbMat = new THREE.MeshStandardMaterial( {
emissive: 0xffffee,
emissiveIntensity: 1,
color: 0x000000
});
bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
bulbLight.position.set( 0, 2, 0 );
bulbLight.castShadow = true;
bulbLight.power = 400;
scene.add( bulbLight );
// 创建球形光源
var hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
scene.add( hemiLight );
})();
// 加载模型
(function(){
// 创建地板
var floorMat = new THREE.MeshStandardMaterial( {
roughness: 0.8,
color: 0xffffff,
metalness: 0.2,
bumpScale: 0.0005
});
var textureLoader = new THREE.TextureLoader();
textureLoader.load( "./static/textures/hardwood2_diffuse.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
floorMat.map = map;
floorMat.needsUpdate = true;
} );
textureLoader.load( "./static/textures/hardwood2_bump.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
floorMat.bumpMap = map;
floorMat.needsUpdate = true;
} );
textureLoader.load( "./static/textures/hardwood2_roughness.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
floorMat.roughnessMap = map;
floorMat.needsUpdate = true;
} );
var floorGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
var floorMesh = new THREE.Mesh( floorGeometry, floorMat );
floorMesh.receiveShadow = true;
floorMesh.rotation.x = -Math.PI / 2.0;
scene.add( floorMesh );
// 创建立方体
var cubeMat = new THREE.MeshStandardMaterial( {
roughness: 0.7,
color: 0xffffff,
bumpScale: 0.002,
metalness: 0.2
});
textureLoader.load( "./static/textures/brick_bump.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
cubeMat.map = map;
cubeMat.needsUpdate = true;
} );
textureLoader.load( "./static/textures/brick_diffuse.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
cubeMat.map = map;
cubeMat.needsUpdate = true;
} );
var boxGeometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
var boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
boxMesh.position.set( -0.5, 0.25, -1 );
boxMesh.castShadow = true;
scene.add( boxMesh );
var boxMesh2 = new THREE.Mesh( boxGeometry, cubeMat );
boxMesh2.position.set( 0, 0.25, -5 );
boxMesh2.castShadow = true;
scene.add( boxMesh2 );
var boxMesh3 = new THREE.Mesh( boxGeometry, cubeMat );
boxMesh3.position.set( 7, 0.25, 0 );
boxMesh3.castShadow = true;
scene.add( boxMesh3 );
// 创建球体
var ballMat = new THREE.MeshStandardMaterial( {
color: 0xffffff,
roughness: 0.5,
metalness: 1.0
});
textureLoader.load( "./static/textures/brick_bump.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
ballMat.map = map;
ballMat.needsUpdate = true;
} );
textureLoader.load( "./static/textures/brick_diffuse.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
ballMat.map = map;
ballMat.needsUpdate = true;
} );
var ballGeometry = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
var ballMesh = new THREE.Mesh( ballGeometry, ballMat );
ballMesh.position.set( 1, 0.5, 1 );
ballMesh.rotation.y = Math.PI;
ballMesh.castShadow = true;
scene.add( ballMesh );
})();
var time;
var animate = function () {
requestAnimationFrame(animate);
time = Date.now() * 0.0005;
bulbLight.position.x = Math.cos( time * 0.3 ) * 5;
bulbLight.position.y = Math.cos( time ) * 0.75 + 1.25;
bulbLight.position.z = Math.cos( time * 0.3 ) * 5;
stats.begin();
renderer.render( scene, camera );
stats.end();
};
animate();
Three.js黑暗中的萤火虫的更多相关文章
- Firebug中调试中的js脚本中中文内容显示为乱码
Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...
- js文件中函数前加分号和感叹号是什么意思?
本文转自:http://blog.csdn.net/h_o_w_e/article/details/51388500 !function(){}(); !有什么用? 从语法上来开,JavaScri ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- 解决webkit浏览器中js方法中使用window.event提示未定义的问题
这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...
- 在JS方法中返回多个值的三种方法
在使用JS编程中,有时需要在一个方法返回两个个或两个以上的数据,用下面的几种方法都可以实现: 1 使用数组的方式,如下: <html> <head> <title> ...
- 关于js代码中与或运算符||&&的妙用
看bootstrap时看到如下一行JavaScript代码产生了疑惑. return window.pageYOffset || e.scrollTop ||在这里的作用是什么呢? 首先明确概念,在j ...
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...
- JS 正则表达式中的特殊字符
正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个 ...
- js jquery中 的数据类型
任何一门语言, buguan 是动态的, 还是像C语言的, 都有严格的 类型 "概念的", 这个是由于 编译器和解释器要求的, 需要的. 所以在是使用像 js, jquey ,ph ...
随机推荐
- 析构函数和Dispose方法的区别
1. 析构函数(Finalize)只能释放非托管资源, 它是由GC调用. 2. Dispose方法可以释放托管资源和非托管资源,它是由用户手动调用的. 在Dispose()中调用 GC.Suppres ...
- neutron二层网络实现
一.基本概念 1.tap设备 比如vnet0,是虚拟化技术和KVM和XEN用来实现虚拟网卡的,当一个以太网帧发送给TAP设备时,这个以太网帧就会被虚拟机操作系统所接手,命名空间用于隔离虚拟网络设备. ...
- Apache Samza流处理框架介绍——kafka+LevelDB的Key/Value数据库来存储历史消息+?
转自:http://www.infoq.com/cn/news/2015/02/apache-samza-top-project Apache Samza是一个开源.分布式的流处理框架,它使用开源分布 ...
- opencv:访问像素
a.使用指针 #include <opencv.hpp> using namespace cv; using namespace std; int main() { //指针访问每个像素并 ...
- TCPL学习毕节:第六章hash表
对于P126的哈希表构成: struct nlist *install(char *name, char *defn) { struct nlist *np; unsigned hashval; if ...
- Tinymce group plugin
本文介绍一个tinymce插件,用来组合显示下拉的按钮.基于4.x,不兼容3.x. 以前 配置toolbar功能按钮 需要 toolbar1: "code undo red ...
- GoogLeNet 神经网络结构
GoogLeNet是2014年 ILSVRC 冠军模型,top-5 错误率 6.7% ,GoogLeNet做了更大胆的网络上的尝试而不像vgg继承了lenet以及alexnet的一些框架,该模型虽然有 ...
- Visual Studio和Sublime Text全系列激活码
自己经常用,做个备份 VS2012 Microsoft Visual Studio Ultimate 2012 旗舰版 有效注册密钥: YKCW6-BPFPF-BT8C9-7DCTH-QXGWC Mi ...
- 随机获取图片的api接口
http://lorempixel.com/1600/900 https://unsplash.it/1600/900?random(国内加载略慢) https://uploadbeta.com/ap ...
- (效果一)js实现上拉加载
实现思路:获取滚动元素的高度,滚动条距离顶部的距离,滚动条的高度, 算式:可视窗口的高度 + 滚动条距离顶部的距离 == 滚动条的高度就说明到底部. HTML <!doctype html> ...