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

Source: Internet
Author: User

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


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.