Gentleman sex is not different also, good fake in the matter also-Threejs introduction trackballcontrols view Scene

Gentleman sex is not different also, good fake in the matter also-Threejs introduction trackballcontrols view Scene

The beautiful Life of the Sun Vulcan (http://blog.csdn.net/opengl_es)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Sun Vulcan's Beautiful Life-this blog focuses on Agile development and mobile and IoT device research: IOS, Android, HTML5, Arduino, Pcduino , Otherwise, the article from this blog refused to reprint or re-reproduced, thank you for your cooperation.

The following is the key code for the introduction of the Trackballcontrols Library in the HTML source file, where camera and renderer need to know about Threejs to understand:

<script>var controls;controls = new three. Trackballcontrols (camera, renderer.domelement), function animate () {Requestanimationframe (animate, renderer.domelement); Controls.update (); Renderer.render (scene, camera);} </script>

The following code is owned by the original author, but in the following two Web site did not find the latest code consistent with this, and some similar available code, you can refer to.

The Js/controls/trackballcontrols.js code referenced in the above code is original, can be copied can be introduced by the new trackballcontrols.js, and can be used as follows:

/** * @author Eberhard graether/http://egraether.com/* @author Mark lundin/http://mark-lundin.com */three. Trackballcontrols = function (object, domelement) {var _this = This;var state = {NONE:-1, rotate:0, Zoom:1, Pan:2, Touch_rotate:3, Touch_zoom_pan:4};this.object = Object;this.domelement = (domelement!== undefined)? domelement:document;//apithis.enabled = True;this.screen = {left:0, top:0, width:0, height:0};this.rotateSpeed = 1.0;this.zoomspeed = 1.2;this.panspeed = 0.3;this.norotate = False;this.nozoom = False;this.nopan = False;this.noRoll = FA lse;this.staticmoving = False;this.dynamicdampingfactor = 0.2;this.mindistance = 0;this.maxdistance = Infinity; This.keys = [/*a*/,/*s*/,/*d*/];//internalsthis.target = new three. Vector3 (); var EPS = 0.000001;var lastposition = new three. Vector3 (); var _state = state. None,_prevstate = state. None,_eye = new three. Vector3 (), _rotatestart = new three. Vector3 (), _rotateend = new three. Vector3 (), _zoomstart =New three. Vector2 (), _zoomend = new three. Vector2 (), _touchzoomdistancestart = 0,_touchzoomdistanceend = 0,_panstart = new three. Vector2 (), _panend = new three. Vector2 ();//For resetthis.target0 = This.target.clone (); this.position0 = This.object.position.clone (); this.up0 = This.object.up.clone ();//Eventsvar ChangeEvent = {type: ' change '};var startevent = {type: ' start '};var endevent = {ty PE: ' End '};//methodsthis.handleresize = function () {if (this.domelement = = = document) {This.screen.left = 0;this.scree N.top = 0;this.screen.width = Window.innerwidth;this.screen.height = Window.innerheight;} else {var box = This.domElement.getBoundingClientRect ();//adjustments come from similar code in the jquery offset () funct Ionvar d = this.domelement.ownerdocument.documentelement;this.screen.left = Box.left + Window.pageXOffset- D.clientleft;this.screen.top = box.top + window.pageyoffset-d.clienttop;this.screen.width = box.width; This.screen.height = Box.height;}}; This.handleevent = FunctioN (Event) {if (typeof this[event.type] = = ' function ') {this[Event.type] (event);}}; var Getmouseonscreen = (function () {var vector = new three. Vector2 (); return function (PageX, pagey) {vector.set (PageX-_this.screen.left)/_this.screen.width, (Pagey-_this. Screen.top)/_this.screen.height); return vector;};} ()) var Getmouseprojectiononball = (function () {var vector = new three. Vector3 (); var objectup = new three. Vector3 (); var mouseonball = new three. Vector3 (); return function (PageX, pagey) {mouseonball.set (PageX-_this.screen.width * 0.5-_this.screen.left)/(_t  his.screen.width*.5), (_this.screen.height * 0.5 + _this.screen.top-pagey)/(_this.screen.height*.5), 0.0); var length =  Mouseonball.length (); if (_this.noroll) {if (length < math.sqrt1_2) {mouseonball.z = Math.sqrt (1.0-length*length );} else {mouseonball.z =. 5/length;}} else if (length > 1.0) {mouseonball.normalize ();} else {mouseonball.z = math.sqrt (1.0-length * length);} _eye. copy (_this.object.position). Sub (_this.target); Vector.copy (_this.object.up). SetLength (MOUSEONBALL.Y) Vector.add  (Objectup.copy (_this.object.up). Cross (_eye). SetLength (mouseonball.x)); Vector.add (_eye.setlength (MOUSEONBALL.Z) ); return vector;};} ()); This.rotatecamera = (function () {var axis = new three. Vector3 (), quaternion = new three. Quaternion (); return function () {var angle = Math.acos (_rotatestart.dot (_rotateend)/_rotatestart.length ()/_rotateen D.length ()); if (angle) {axis.crossvectors (_rotatestart, _rotateend). normalize (); angle *= _this.rotatespeed; Quaternion.setfromaxisangle (axis,-angle); _eye.applyquaternion (quaternion); _this.object.up.applyquaternion ( quaternion); _rotateend.applyquaternion (quaternion); if (_this.staticmoving) {_rotatestart.copy (_rotateEnd);} else { Quaternion.setfromaxisangle (axis, Angle * (_this.dynamicdampingfactor-1.0)); _rotatestart.applyquaternion ( quaternion);}}} ()); This.zoomcamera = function () {if (_state = = = STASei Touch_zoom_pan) {var factor = _touchzoomdistancestart/_touchzoomdistanceend;_touchzoomdistancestart = _ Touchzoomdistanceend;_eye.multiplyscalar (factor);} else {var factor = 1.0 + (_ZOOMEND.Y-_zoomstart.y) * _THIS.ZOOMSPEED;IF (Factor!== 1.0 && factor > 0.0)  {_eye.multiplyscalar (factor), if (_this.staticmoving) {_zoomstart.copy (_zoomend);} else {_zoomstart.y + = (_zoomend.y -_ZOOMSTART.Y) * This.dynamicdampingfactor;}}}; This.pancamera = (function () {var mousechange = new three. Vector2 (), Objectup = new three. Vector3 (), pan = new three. Vector3 (); return function () {mousechange.copy (_panend). Sub (_panstart); if (MOUSECHANGE.LENGTHSQ ()) {Mousechange.mul Tiplyscalar (_eye.length () * _this.panspeed);p an.copy (_eye). Cross (_this.object.up). SetLength (mousechange.x); Pan.add (Objectup.copy (_this.object.up) setLength (MOUSECHANGE.Y)); _this.object.position.add (pan); _ This.target.add (PAN), if (_this.staticmoving) {_panstart.copy (_panend);} else {_panStart.add (Mousechange.subvectors (_panend, _panstart). Multiplyscalar (_this.dynamicdampingfactor));}}}  ()); this.checkdistances = function () {if (!_this.nozoom | |!_this.nopan) {if (_EYE.LENGTHSQ () > _this.maxdistance * _this.maxdistance) {_this.object.position.addvectors (_this.target, _eye.setlength (_this.maxDistance));} if (_EYE.LENGTHSQ () < _this.mindistance * _this.mindistance) {_this.object.position.addvectors (_this.target, _ Eye.setlength (_this.mindistance));}}; This.update = function () {_eye.subvectors (_this.object.position, _this.target), if (!_this.norotate) {_this.rotatecam Era ();} if (!_this.nozoom) {_this.zoomcamera ();} if (!_this.nopan) {_this.pancamera ();} _this.object.position.addvectors (_this.target, _eye); _this.checkdistances (); _this.object.lookat (_this.target); if (lastposition.distancetosquared (_this.object.position) > EPS) {_this.dispatchevent (changeevent); lastPosition . copy (_this.object.position);}; This.reset = function () {_State = state. None;_prevstate = state. None;_this.target.copy (_this.target0); _this.object.position.copy (_this.position0); _this.object.up.copy (_ THIS.UP0); _eye.subvectors (_this.object.position, _this.target); _this.object.lookat (_this.target); _ This.dispatchevent (ChangeEvent); lastposition.copy (_this.object.position);};/  /listenersfunction KeyDown (event) {if (_this.enabled = = = False) Return;window.removeeventlistener (' KeyDown ', KeyDown ); _prevstate = _state;if (_state!== state. NONE) {return;} else if (Event.keycode = = = _this.keys[State. ROTATE] &&!_this.norotate) {_state = state. ROTATE;} else if (Event.keycode = = = _this.keys[State. ZOOM] &&!_this.nozoom) {_state = state. ZOOM;} else if (Event.keycode = = = _this.keys[State. PAN] &&!_this.nopan) {_state = state. PAN;}} function KeyUp (event) {if (_this.enabled = = = False) Return;_state = _prevstate;window.addeventlistener (' KeyDown ', key Down, false);} function MouseDown (event) {if (_thIs.enabled = = = False) Return;event.preventdefault (); event.stoppropagation (); if (_state = = State). NONE) {_state = Event.button;} if (_state = = = State. ROTATE &&!_this.norotate) {_rotatestart.copy (Getmouseprojectiononball (Event.pagex, Event.pagey)); _ Rotateend.copy (_rotatestart);} else if (_state = = = State. ZOOM &&!_this.nozoom) {_zoomstart.copy (Getmouseonscreen (Event.pagex, Event.pagey)); _zoomend.copy (_ Zoomstart);} else if (_state = = = State. PAN &&!_this.nopan) {_panstart.copy (Getmouseonscreen (Event.pagex, Event.pagey)); _panend.copy (_panStart)} Document.addeventlistener (' MouseMove ', MouseMove, False);d Ocument.addeventlistener (' MouseUp ', MouseUp, false); _ This.dispatchevent (startevent);} function MouseMove (event) {if (_this.enabled = = = False) Return;event.preventdefault (); event.stoppropagation (); if (_st ate = = = state. ROTATE &&!_this.norotate) {_rotateend.copy (Getmouseprojectiononball (Event.pagex, Event.pagey));} else if (_state = = = State. ZOOM &&!_this.nozoom) {_zoomend.copy (Getmouseonscreen (Event.pagex, Event.pagey));} else if (_state = = = STAT E.pan &&!_this.nopan) {_panend.copy (Getmouseonscreen (Event.pagex, Event.pagey));}} function MouseUp (event) {if (_this.enabled = = = False) Return;event.preventdefault (); Event.stoppropagation (); _state = S TATE. None;document.removeeventlistener (' MouseMove ', MouseMove);d ocument.removeeventlistener (' MouseUp ', MouseUp); _ This.dispatchevent (endevent);} Function MouseWheel (event) {if (_this.enabled = = = False) Return;event.preventdefault (); event.stoppropagation (); var de  LTA = 0;if (Event.wheeldelta) {//Webkit/opera/explorer 9delta = event.wheeldelta/40;} else if (Event.detail) { Firefoxdelta =-EVENT.DETAIL/3;} _ZOOMSTART.Y + = Delta * 0.01;_this.dispatchevent (startevent); _this.dispatchevent (endevent);} function Touchstart (event) {if (_this.enabled = = = False) Return;switch (event.touches.length) {Case 1:_state = State. Touch_rotate;_rotatestart.copy (Getmouseprojectiononball (event.touches[0].pagex, event.touches[0].pageY)); _ Rotateend.copy (_rotatestart); Break;case 2:_state = state. Touch_zoom_pan;var dx = event.touches[0].pagex-event.touches[1].pagex;var dy = event.touches[0].pagey-event.touc  hes[1].pagey;_touchzoomdistanceend = _touchzoomdistancestart = math.sqrt (dx * dx + dy * dy); var x = (event.touches[0 ].pagex + event.touches[1].pagex)/2;var y = (event.touches[0].pagey + event.touches[1].pagey)/2;_panStart.co PY (Getmouseonscreen (x, y)); _panend.copy (_panstart); break;default:_state = state. NONE;} _this.dispatchevent (startevent);} function Touchmove (event) {if (_this.enabled = = = False) Return;event.preventdefault (); event.stoppropagation (); switch (event.touches.length) {case 1:_rotateend.copy (Getmouseprojectiononball (event.touches[0].pagex, event.touches[0]. Pagey)); break;case 2:var dx = event.touches[0].pagex-event.touches[1].pagex;vAr dy = event.touches[0].pagey-event.touches[1].pagey;_touchzoomdistanceend = math.sqrt (dx * dx + dy * dy); var x =  (event.touches[0].pagex + event.touches[1].pagex)/2;var y = (event.touches[0].pagey + event.touches[1].pageY )/2;_panend.copy (Getmouseonscreen (x, y)); break;default:_state = state. NONE;}}  function Touchend (event) {if (_this.enabled = = = False) Return;switch (event.touches.length) {case 1:_rotateend.copy ( Getmouseprojectiononball (event.touches[0].pagex, event.touches[0].pagey)); _rotatestart.copy (_rotateEnd); break;c ASE 2:_touchzoomdistancestart = _touchzoomdistanceend = 0;var x = (event.touches[0].pagex + event.touches[1].pageX) /2;var y = (event.touches[0].pagey + event.touches[1].pagey)/2;_panend.copy (Getmouseonscreen (x, y)); _panStart . copy (_panend); break;} _state = state. None;_this.dispatchevent (endevent);} This.domElement.addEventListener (' ContextMenu ', function (event) {Event.preventdefault ();}, false); thiS.domelement.addeventlistener (' MouseDown ', MouseDown, false); This.domElement.addEventListener (' MouseWheel ', MouseWheel, False); This.domElement.addEventListener (' Dommousescroll ', MouseWheel, false); Firefoxthis.domElement.addEventListener (' Touchstart ', Touchstart, false); This.domElement.addEventListener (' Touchend ', touchend, false); This.domElement.addEventListener (' Touchmove ', Touchmove, false); Window.addeventlistener (' KeyDown ', KeyDown, false); Window.addeventlistener (' KeyUp ', KeyUp, false); This.handleresize ();//Force a update at startthis.update ();}; Three. Trackballcontrols.prototype = Object.create (three. Eventdispatcher.prototype);