webvr-mirror.js

import animitter from 'animitter';
import * as THREE from 'three';
import * as webvrui from 'webvr-ui';

const OrbitControls = require('three-orbit-controls')(THREE);

window.THREE = THREE;

require('./three-extras/vr-controls');
require('./three-extras/vr-effect');
require('./three-extras/mirror');
require('./three-extras/vive-controller');


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.01, 10000);
const renderer = new THREE.WebGLRenderer();

let loop = animitter();

const controls = new OrbitControls(camera);
const vrControls = new THREE.VRControls(camera);
const vrEffect = new THREE.VREffect(renderer);

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(camera);
camera.position.z = 4;

const room = new THREE.Mesh(
    new THREE.BoxBufferGeometry(11, 11, 11),
    new THREE.MeshStandardMaterial({
        roughness: 1.0,
        metalness: 0.2,
        color: 0xdddd99,
        side: THREE.BackSide
    })
);

room.position.set(0, 4, 0);

scene.add(room);

var mirror = new THREE.Mirror(renderer, camera, {
    clipBias: 0.003,
    //debugMode: true,
    textureWidth: window.innerWidth,
    textureHeight: window.innerHeight,
    color: 0x777777
});



var mirrorMesh = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(5.1, 5.1),
    mirror.material
);

mirrorMesh.add(mirror);
mirrorMesh.position.set(0, 0, -2);
scene.add(mirrorMesh);

var mesh = new THREE.Mesh(
    new THREE.SphereGeometry(0.1, 16, 16),
    new THREE.MeshStandardMaterial({
        roughness: 0.6,
        metalness: 0.9,
        color: 0xaaaaaa,
        depthWrite: false,
        depthTest: false
    })
);


var hemiLight = new THREE.HemisphereLight(0xcccccc, 1.5, 1.5);
//scene.add(hemiLight);
// lights
var mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
mainLight.position.y = 6;
scene.add( mainLight );

var blueLight = new THREE.PointLight(0x0000ff, 0.25, 1000);
blueLight.position.set(0, 1.25, 6);
scene.add(blueLight);

scene.add(mesh);

const sleep = (ms)=>
    new Promise(resolve=>setTimeout(resolve, ms));

const button = new webvrui.EnterVRButton(renderer.domElement, {
    beforeExit: ()=>{
        loop.removeAllListeners();
        loop.on('update', desktopUpdate); 
        loop.setRequestAnimationFrameObject(window);
        return new Promise(r=>r());
    }
});

button.on('enter', ()=>{
    
    const left = new THREE.ViveController(0);
    const right = new THREE.ViveController(1);
    
    left.standingMatrix = vrControls.getStandingMatrix();
    right.standingMatrix = vrControls.getStandingMatrix();
    scene.add(left, right);
    
    
    const box = new THREE.BoxBufferGeometry(0.1, 0.4, 0.1);
    
    const leftMesh = new THREE.Mesh(
        box,
        new THREE.MeshStandardMaterial({
            roughness: 1.0,
            color: 0xff0000,
            side: THREE.DoubleSide
        })
    );
    
    leftMesh.rotation.x = Math.PI / 2;
    leftMesh.position.z = 0.2;
    

    left.add(leftMesh);
    
    const rightMesh = new THREE.Mesh(
        box,
        new THREE.MeshStandardMaterial({
            roughness: 1.0,
            color: 0xffff00,
            side: THREE.DoubleSide
        })
    );
    rightMesh.rotation.x = Math.PI / 2;
    rightMesh.position.z = 0.2;
    
    right.add(rightMesh);
    
    
    const cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry(0.1, 0.1, 0.35),
        new THREE.MeshStandardMaterial({
            roughness: 1.0,
            color: 0x0000ff
        })
    );
    
    scene.add(cylinder);
    
    const el = document.createElement('div');
    Object.assign(el.style,{
        position: 'fixed',
        bottom: '15px',
        right: '15px'
    });
    document.body.appendChild(el);
    function vrUpdate(delta){
        el.innerHTML = ~~(1000 / delta / 10);
        left.update();
        right.update();
        mesh.position.copy(camera.position);
        cylinder.position.copy(camera.position);
        cylinder.position.y -= 0.35;
        vrControls.update();
        vrEffect.render(scene, camera);
        
        mirror.render();
        renderer.render(scene, camera);
    }
    
    loop
        .setRequestAnimationFrameObject(button.manager.defaultDisplay)
        .off('update', desktopUpdate)
        .on('update', vrUpdate);

});

document.body.appendChild(button.domElement);

const desktopUpdate = ()=>{
    controls.update();
    mirror.render();
    renderer.render(scene, camera);
};


loop.on('update', desktopUpdate);
loop.start();