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