效果图

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黑暗中的萤火虫的更多相关文章

  1. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...

  2. js文件中函数前加分号和感叹号是什么意思?

    本文转自:http://blog.csdn.net/h_o_w_e/article/details/51388500 !function(){}();   !有什么用? 从语法上来开,JavaScri ...

  3. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  4. 解决webkit浏览器中js方法中使用window.event提示未定义的问题

    这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...

  5. 在JS方法中返回多个值的三种方法

    在使用JS编程中,有时需要在一个方法返回两个个或两个以上的数据,用下面的几种方法都可以实现: 1 使用数组的方式,如下: <html> <head> <title> ...

  6. 关于js代码中与或运算符||&&的妙用

    看bootstrap时看到如下一行JavaScript代码产生了疑惑. return window.pageYOffset || e.scrollTop ||在这里的作用是什么呢? 首先明确概念,在j ...

  7. Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

    使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...

  8. JS 正则表达式中的特殊字符

    正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个 ...

  9. js jquery中 的数据类型

    任何一门语言, buguan 是动态的, 还是像C语言的, 都有严格的 类型 "概念的", 这个是由于 编译器和解释器要求的, 需要的. 所以在是使用像 js, jquey ,ph ...

随机推荐

  1. 析构函数和Dispose方法的区别

    1. 析构函数(Finalize)只能释放非托管资源, 它是由GC调用. 2. Dispose方法可以释放托管资源和非托管资源,它是由用户手动调用的. 在Dispose()中调用 GC.Suppres ...

  2. neutron二层网络实现

    一.基本概念 1.tap设备 比如vnet0,是虚拟化技术和KVM和XEN用来实现虚拟网卡的,当一个以太网帧发送给TAP设备时,这个以太网帧就会被虚拟机操作系统所接手,命名空间用于隔离虚拟网络设备. ...

  3. Apache Samza流处理框架介绍——kafka+LevelDB的Key/Value数据库来存储历史消息+?

    转自:http://www.infoq.com/cn/news/2015/02/apache-samza-top-project Apache Samza是一个开源.分布式的流处理框架,它使用开源分布 ...

  4. opencv:访问像素

    a.使用指针 #include <opencv.hpp> using namespace cv; using namespace std; int main() { //指针访问每个像素并 ...

  5. TCPL学习毕节:第六章hash表

    对于P126的哈希表构成: struct nlist *install(char *name, char *defn) { struct nlist *np; unsigned hashval; if ...

  6. Tinymce group plugin

    本文介绍一个tinymce插件,用来组合显示下拉的按钮.基于4.x,不兼容3.x. 以前 配置toolbar功能按钮 需要          toolbar1: "code undo red ...

  7. GoogLeNet 神经网络结构

    GoogLeNet是2014年 ILSVRC 冠军模型,top-5 错误率 6.7% ,GoogLeNet做了更大胆的网络上的尝试而不像vgg继承了lenet以及alexnet的一些框架,该模型虽然有 ...

  8. Visual Studio和Sublime Text全系列激活码

    自己经常用,做个备份 VS2012 Microsoft Visual Studio Ultimate 2012 旗舰版 有效注册密钥: YKCW6-BPFPF-BT8C9-7DCTH-QXGWC Mi ...

  9. 随机获取图片的api接口

    http://lorempixel.com/1600/900 https://unsplash.it/1600/900?random(国内加载略慢) https://uploadbeta.com/ap ...

  10. (效果一)js实现上拉加载

    实现思路:获取滚动元素的高度,滚动条距离顶部的距离,滚动条的高度, 算式:可视窗口的高度 + 滚动条距离顶部的距离 == 滚动条的高度就说明到底部. HTML <!doctype html> ...