html5 vr效果,HTML5 Three.js 虚拟现实小实验（VR Experiment）

HTML

导入代码模板：

/*! Reticulum - v1.0.12 - 2015-08-17

* https://gqpbj.github.io/examples/basic.html

*

* Copyright (c) 2015 Godfrey Q;

* Licensed under the MIT license */

var Reticulum = (function() {

var INTERSECTED = null;

var collisionList = [];

var raycaster;

var vector;

var clock;

var reticle = {};

var fuse = {};

var frustum;

var cameraViewProjectionMatrix;

//Settings from user

var settings = {

camera: null, //Required

proximity: false

};

//Vibrate

var vibrate = navigator.vibrate ? navigator.vibrate.bind(navigator) : function() {};

//Fuse

fuse.initiate = function(options) {

var parameters = options || {};

this.visible = parameters.visible !== false; //default to true;

this.duration = parameters.duration || 2.5;

this.vibratePattern = parameters.vibrate || 100;

this.color = parameters.color || 0x000000;

this.innerRadius = parameters.innerRadius || reticle.innerRadiusTo;

this.outerRadius = parameters.outerRadius || reticle.outerRadiusTo;

this.phiSegments = 3;

this.thetaSegments = 32;

this.thetaStart = Math.PI / 2;

//var geometry = new THREE.CircleGeometry( reticle.outerRadiusTo, 32, Math.PI/2, 0 );

var geometry = new THREE.RingGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, 0);

//Make Mesh

this.mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({

color: this.color,

side: THREE.BackSide,

fog: false

}));

//Set mesh visibility

this.mesh.visible = this.visible;

//Change position and rotation of fuse

this.mesh.position.z = 0.0001; // Keep in front of reticle

this.mesh.rotation.y = 180 * (Math.PI / 180); //Make it clockwise

//Add to reticle

reticle.mesh.add(this.mesh);

//geometry.dispose();

};

fuse.out = function() {

this.active = false;

this.mesh.visible = false;

this.update(0);

}

fuse.over = function() {

this.active = true;

this.update(0);

this.mesh.visible = this.visible;

}

fuse.update = function(elapsed) {

if (!this.active) return;

//--RING

var gazedTime = elapsed / this.duration;

var thetaLength = gazedTime * (Math.PI * 2);

var vertices = this.mesh.geometry.vertices;

var radius = this.innerRadius;

var radiusStep = ((this.outerRadius - this.innerRadius) / this.phiSegments);

var count = 0;

for (var i = 0; i < this.phiSegments + 1; i++) {

for (var o = 0; o < this.thetaSegments + 1; o++) {

var vertex = vertices[count];

var segment = this.thetaStart + o / this.thetaSegments * thetaLength;

vertex.x = radius * Math.cos(segment);

vertex.y = radius * Math.sin(segment);

count++;

}

radius += radiusStep;

}

this.mesh.geometry.verticesNeedUpdate = true;

//Disable fuse if reached 100%

if (gazedTime >= 1) {

this.active = false;

}

//--RING EOF

}

//Reticle

reticle.initiate = function(options) {

var parameters = options || {};

this.active = true;

this.visible = parameters.visible !== false; //default to true;

this.far = parameters.far || settings.camera.far - 10.0;

this.color = parameters.color || 0xcc0000;

this.innerRadius = parameters.innerRadius || 0.0001;

this.outerRadius = parameters.outerRadius || 0.003;

this.worldPosition = new THREE.Vector3();

this.ignoreInvisible = parameters.ignoreInvisible !== false; //default to true;

//Hover

this.innerRadiusTo = parameters.hover.innerRadius || 0.02;

this.outerRadiusTo = parameters.hover.outerRadius || 0.024;

this.colorTo = parameters.hover.color || this.color;

this.vibratePattern = parameters.hover.vibrate || 50;

this.hit = false;

//Animation options

this.speed = parameters.hover.speed || 5;

this.moveSpeed = 0;

//Geometry

var geometry = new THREE.RingGeometry(this.innerRadius, this.outerRadius, 32, 3, 0, Math.PI * 2);

var geometryScale = new THREE.RingGeometry(this.innerRadiusTo, this.outerRadiusTo, 32, 3, 0, Math.PI * 2);

//Add Morph Targets for scale animation

geometry.morphTargets.push({

name: "target1",

vertices: geometryScale.vertices

});

//Make Mesh

this.mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({

color: this.color,

morphTargets: true,

fog: false

}));

this.mesh.visible = this.visible;

//set depth and scale

this.setDepthAndScale();

//Add to camera

settings.camera.add(this.mesh);

};

//Sets the depth and scale of the reticle - reduces eyestrain and depth issues

reticle.setDepthAndScale = function(depth) {

var cross