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