Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

.

Browse Source
pull/7/head
FishOrBear 8 years ago
commit 1ecb96b24b
12 changed files with 1569 additions and 0 deletions
Show Stats Download Patch File Download Diff File

20
.vscode/launch.json vendored
Unescape View File

@ -0,0 +1,20 @@
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8188",
"webRoot": "${workspaceRoot}",
"runtimeExecutable": "X:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}

631
built/OrbitControls.js
Unescape View File

@ -0,0 +1,631 @@
/**
* @author qiao / https://github.com/qiao
* @author mrdoob / http://mrdoob.com
* @author alteredq / http://alteredqualia.com/
* @author WestLangley / http://github.com/WestLangley
* @author erich666 / http://erichaines.com
*/
// This set of controls performs orbiting, dollying (zooming), and panning.
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
//
// Orbit - left mouse / touch: one finger move
// Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
// Pan - right mouse, or arrow keys / touch: three finger swipe
THREE.OrbitControls = function (object, domElement) {
this.object = object;
this.domElement = (domElement !== undefined) ? domElement : document;
// Set to false to disable this control
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = -Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
this.enableDamping = false;
this.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
this.enableZoom = true;
this.zoomSpeed = 1.0;
// Set to false to disable rotating
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
this.enableKeys = true;
// The four arrow keys
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.zoom0 = this.object.zoom;
//
// public methods
//
this.getPolarAngle = function () {
return spherical.phi;
};
this.getAzimuthalAngle = function () {
return spherical.theta;
};
this.saveState = function () {
scope.target0.copy(scope.target);
scope.position0.copy(scope.object.position);
scope.zoom0 = scope.object.zoom;
};
this.reset = function () {
scope.target.copy(scope.target0);
scope.object.position.copy(scope.position0);
scope.object.zoom = scope.zoom0;
scope.object.updateProjectionMatrix();
scope.dispatchEvent(changeEvent);
scope.update();
state = STATE.NONE;
};
// this method is exposed, but perhaps it would be better if we can make it private...
this.update = function () {
var offset = new THREE.Vector3();
// so camera.up is the orbit axis
var quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
var quatInverse = quat.clone().inverse();
var lastPosition = new THREE.Vector3();
var lastQuaternion = new THREE.Quaternion();
return function update() {
var position = scope.object.position;
offset.copy(position).sub(scope.target);
// rotate offset to "y-axis-is-up" space
offset.applyQuaternion(quat);
// angle from z-axis around y-axis
spherical.setFromVector3(offset);
if (scope.autoRotate && state === STATE.NONE) {
rotateLeft(getAutoRotationAngle());
}
spherical.theta += sphericalDelta.theta;
spherical.phi += sphericalDelta.phi;
// restrict theta to be between desired limits
spherical.theta = Math.max(scope.minAzimuthAngle, Math.min(scope.maxAzimuthAngle, spherical.theta));
// restrict phi to be between desired limits
spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi));
spherical.makeSafe();
spherical.radius *= scale;
// restrict radius to be between desired limits
spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius));
// move target to panned location
scope.target.add(panOffset);
offset.setFromSpherical(spherical);
// rotate offset back to "camera-up-vector-is-up" space
offset.applyQuaternion(quatInverse);
position.copy(scope.target).add(offset);
scope.object.lookAt(scope.target);
if (scope.enableDamping === true) {
sphericalDelta.theta *= (1 - scope.dampingFactor);
sphericalDelta.phi *= (1 - scope.dampingFactor);
}
else {
sphericalDelta.set(0, 0, 0);
}
scale = 1;
panOffset.set(0, 0, 0);
// update condition is:
// min(camera displacement, camera rotation in radians)^2 > EPS
// using small-angle approximation cos(x/2) = 1 - x^2 / 8
if (zoomChanged ||
lastPosition.distanceToSquared(scope.object.position) > EPS ||
8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {
scope.dispatchEvent(changeEvent);
lastPosition.copy(scope.object.position);
lastQuaternion.copy(scope.object.quaternion);
zoomChanged = false;
return true;
}
return false;
};
}();
this.dispose = function () {
scope.domElement.removeEventListener('contextmenu', onContextMenu, false);
scope.domElement.removeEventListener('mousedown', onMouseDown, false);
scope.domElement.removeEventListener('wheel', onMouseWheel, false);
scope.domElement.removeEventListener('touchstart', onTouchStart, false);
scope.domElement.removeEventListener('touchend', onTouchEnd, false);
scope.domElement.removeEventListener('touchmove', onTouchMove, false);
document.removeEventListener('mousemove', onMouseMove, false);
document.removeEventListener('mouseup', onMouseUp, false);
window.removeEventListener('keydown', onKeyDown, false);
//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
};
//
// internals
//
var scope = this;
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
var STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
var state = STATE.NONE;
var EPS = 0.000001;
// current position in spherical coordinates
var spherical = new THREE.Spherical();
var sphericalDelta = new THREE.Spherical();
var scale = 1;
var panOffset = new THREE.Vector3();
var zoomChanged = false;
var rotateStart = new THREE.Vector2();
var rotateEnd = new THREE.Vector2();
var rotateDelta = new THREE.Vector2();
var panStart = new THREE.Vector2();
var panEnd = new THREE.Vector2();
var panDelta = new THREE.Vector2();
var dollyStart = new THREE.Vector2();
var dollyEnd = new THREE.Vector2();
var dollyDelta = new THREE.Vector2();
function getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
}
function getZoomScale() {
return Math.pow(0.95, scope.zoomSpeed);
}
function rotateLeft(angle) {
sphericalDelta.theta -= angle;
}
function rotateUp(angle) {
sphericalDelta.phi -= angle;
}
var panLeft = function () {
var v = new THREE.Vector3();
return function panLeft(distance, objectMatrix) {
v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
v.multiplyScalar(-distance);
panOffset.add(v);
};
}();
var panUp = function () {
var v = new THREE.Vector3();
return function panUp(distance, objectMatrix) {
v.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix
v.multiplyScalar(distance);
panOffset.add(v);
};
}();
// deltaX and deltaY are in pixels; right and down are positive
var pan = function () {
var offset = new THREE.Vector3();
return function pan(deltaX, deltaY) {
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
if (scope.object instanceof THREE.PerspectiveCamera) {
// perspective
var position = scope.object.position;
offset.copy(position).sub(scope.target);
var targetDistance = offset.length();
// half of the fov is center to top of screen
targetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0);
// we actually don't use screenWidth, since perspective camera is fixed to screen height
panLeft(2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix);
panUp(2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix);
}
else if (scope.object instanceof THREE.OrthographicCamera) {
// orthographic
panLeft(deltaX * (scope.object.right - scope.object.left) / scope.object.zoom / element.clientWidth, scope.object.matrix);
panUp(deltaY * (scope.object.top - scope.object.bottom) / scope.object.zoom / element.clientHeight, scope.object.matrix);
}
else {
// camera neither orthographic nor perspective
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.');
scope.enablePan = false;
}
};
}();
function dollyIn(dollyScale) {
if (scope.object instanceof THREE.PerspectiveCamera) {
scale /= dollyScale;
}
else if (scope.object instanceof THREE.OrthographicCamera) {
scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale));
scope.object.updateProjectionMatrix();
zoomChanged = true;
}
else {
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
scope.enableZoom = false;
}
}
function dollyOut(dollyScale) {
if (scope.object instanceof THREE.PerspectiveCamera) {
scale *= dollyScale;
}
else if (scope.object instanceof THREE.OrthographicCamera) {
scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));
scope.object.updateProjectionMatrix();
zoomChanged = true;
}
else {
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
scope.enableZoom = false;
}
}
//
// event callbacks - update the object state
//
function handleMouseDownRotate(event) {
//console.log( 'handleMouseDownRotate' );
rotateStart.set(event.clientX, event.clientY);
}
function handleMouseDownDolly(event) {
//console.log( 'handleMouseDownDolly' );
dollyStart.set(event.clientX, event.clientY);
}
function handleMouseDownPan(event) {
//console.log( 'handleMouseDownPan' );
panStart.set(event.clientX, event.clientY);
}
function handleMouseMoveRotate(event) {
//console.log( 'handleMouseMoveRotate' );
rotateEnd.set(event.clientX, event.clientY);
rotateDelta.subVectors(rotateEnd, rotateStart);
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
// rotating across whole screen goes 360 degrees around
rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
// rotating up and down along whole screen attempts to go 360, but limited to 180
rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);
rotateStart.copy(rotateEnd);
scope.update();
}
function handleMouseMoveDolly(event) {
//console.log( 'handleMouseMoveDolly' );
dollyEnd.set(event.clientX, event.clientY);
dollyDelta.subVectors(dollyEnd, dollyStart);
if (dollyDelta.y > 0) {
dollyIn(getZoomScale());
}
else if (dollyDelta.y < 0) {
dollyOut(getZoomScale());
}
dollyStart.copy(dollyEnd);
scope.update();
}
function handleMouseMovePan(event) {
//console.log( 'handleMouseMovePan' );
panEnd.set(event.clientX, event.clientY);
panDelta.subVectors(panEnd, panStart);
pan(panDelta.x, panDelta.y);
panStart.copy(panEnd);
scope.update();
}
function handleMouseUp(event) {
// console.log( 'handleMouseUp' );
}
function handleMouseWheel(event) {
// console.log( 'handleMouseWheel' );
if (event.deltaY < 0) {
dollyOut(getZoomScale());
}
else if (event.deltaY > 0) {
dollyIn(getZoomScale());
}
scope.update();
}
function handleKeyDown(event) {
//console.log( 'handleKeyDown' );
switch (event.keyCode) {
case scope.keys.UP:
pan(0, scope.keyPanSpeed);
scope.update();
break;
case scope.keys.BOTTOM:
pan(0, -scope.keyPanSpeed);
scope.update();
break;
case scope.keys.LEFT:
pan(scope.keyPanSpeed, 0);
scope.update();
break;
case scope.keys.RIGHT:
pan(-scope.keyPanSpeed, 0);
scope.update();
break;
}
}
function handleTouchStartRotate(event) {
//console.log( 'handleTouchStartRotate' );
rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
}
function handleTouchStartDolly(event) {
//console.log( 'handleTouchStartDolly' );
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
dollyStart.set(0, distance);
}
function handleTouchStartPan(event) {
//console.log( 'handleTouchStartPan' );
panStart.set(event.touches[0].pageX, event.touches[0].pageY);
}
function handleTouchMoveRotate(event) {
//console.log( 'handleTouchMoveRotate' );
rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
rotateDelta.subVectors(rotateEnd, rotateStart);
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
// rotating across whole screen goes 360 degrees around
rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
// rotating up and down along whole screen attempts to go 360, but limited to 180
rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);
rotateStart.copy(rotateEnd);
scope.update();
}
function handleTouchMoveDolly(event) {
//console.log( 'handleTouchMoveDolly' );
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
dollyEnd.set(0, distance);
dollyDelta.subVectors(dollyEnd, dollyStart);
if (dollyDelta.y > 0) {
dollyOut(getZoomScale());
}
else if (dollyDelta.y < 0) {
dollyIn(getZoomScale());
}
dollyStart.copy(dollyEnd);
scope.update();
}
function handleTouchMovePan(event) {
//console.log( 'handleTouchMovePan' );
panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
panDelta.subVectors(panEnd, panStart);
pan(panDelta.x, panDelta.y);
panStart.copy(panEnd);
scope.update();
}
function handleTouchEnd(event) {
//console.log( 'handleTouchEnd' );
}
//
// event handlers - FSM: listen for events and reset state
//
function onMouseDown(event) {
if (scope.enabled === false)
return;
event.preventDefault();
switch (event.button) {
case scope.mouseButtons.ORBIT:
if (scope.enableRotate === false)
return;
handleMouseDownRotate(event);
state = STATE.ROTATE;
break;
case scope.mouseButtons.ZOOM:
if (scope.enableZoom === false)
return;
handleMouseDownDolly(event);
state = STATE.DOLLY;
break;
case scope.mouseButtons.PAN:
if (scope.enablePan === false)
return;
handleMouseDownPan(event);
state = STATE.PAN;
break;
}
if (state !== STATE.NONE) {
document.addEventListener('mousemove', onMouseMove, false);
document.addEventListener('mouseup', onMouseUp, false);
scope.dispatchEvent(startEvent);
}
}
function onMouseMove(event) {
if (scope.enabled === false)
return;
event.preventDefault();
switch (state) {
case STATE.ROTATE:
if (scope.enableRotate === false)
return;
handleMouseMoveRotate(event);
break;
case STATE.DOLLY:
if (scope.enableZoom === false)
return;
handleMouseMoveDolly(event);
break;
case STATE.PAN:
if (scope.enablePan === false)
return;
handleMouseMovePan(event);
break;
}
}
function onMouseUp(event) {
if (scope.enabled === false)
return;
handleMouseUp(event);
document.removeEventListener('mousemove', onMouseMove, false);
document.removeEventListener('mouseup', onMouseUp, false);
scope.dispatchEvent(endEvent);
state = STATE.NONE;
}
function onMouseWheel(event) {
if (scope.enabled === false || scope.enableZoom === false || (state !== STATE.NONE && state !== STATE.ROTATE))
return;
event.preventDefault();
event.stopPropagation();
handleMouseWheel(event);
scope.dispatchEvent(startEvent); // not sure why these are here...
scope.dispatchEvent(endEvent);
}
function onKeyDown(event) {
if (scope.enabled === false || scope.enableKeys === false || scope.enablePan === false)
return;
handleKeyDown(event);
}
function onTouchStart(event) {
if (scope.enabled === false)
return;
switch (event.touches.length) {
case 1:
if (scope.enableRotate === false)
return;
handleTouchStartRotate(event);
state = STATE.TOUCH_ROTATE;
break;
case 2:
if (scope.enableZoom === false)
return;
handleTouchStartDolly(event);
state = STATE.TOUCH_DOLLY;
break;
case 3:
if (scope.enablePan === false)
return;
handleTouchStartPan(event);
state = STATE.TOUCH_PAN;
break;
default:
state = STATE.NONE;
}
if (state !== STATE.NONE) {
scope.dispatchEvent(startEvent);
}
}
function onTouchMove(event) {
if (scope.enabled === false)
return;
event.preventDefault();
event.stopPropagation();
switch (event.touches.length) {
case 1:
if (scope.enableRotate === false)
return;
if (state !== STATE.TOUCH_ROTATE)
return; // is this needed?...
handleTouchMoveRotate(event);
break;
case 2:
if (scope.enableZoom === false)
return;
if (state !== STATE.TOUCH_DOLLY)
return; // is this needed?...
handleTouchMoveDolly(event);
break;
case 3:
if (scope.enablePan === false)
return;
if (state !== STATE.TOUCH_PAN)
return; // is this needed?...
handleTouchMovePan(event);
break;
default:
state = STATE.NONE;
}
}
function onTouchEnd(event) {
if (scope.enabled === false)
return;
handleTouchEnd(event);
scope.dispatchEvent(endEvent);
state = STATE.NONE;
}
function onContextMenu(event) {
event.preventDefault();
}
//
scope.domElement.addEventListener('contextmenu', onContextMenu, false);
scope.domElement.addEventListener('mousedown', onMouseDown, false);
scope.domElement.addEventListener('wheel', onMouseWheel, false);
scope.domElement.addEventListener('touchstart', onTouchStart, false);
scope.domElement.addEventListener('touchend', onTouchEnd, false);
scope.domElement.addEventListener('touchmove', onTouchMove, false);
window.addEventListener('keydown', onKeyDown, false);
// force an update at start
this.update();
};
THREE.OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);
THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;
Object.defineProperties(THREE.OrbitControls.prototype, {
center: {
get: function () {
console.warn('THREE.OrbitControls: .center has been renamed to .target');
return this.target;
}
},
// backward compatibility
noZoom: {
get: function () {
console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
return !this.enableZoom;
},
set: function (value) {
console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
this.enableZoom = !value;
}
},
noRotate: {
get: function () {
console.warn('THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.');
return !this.enableRotate;
},
set: function (value) {
console.warn('THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.');
this.enableRotate = !value;
}
},
noPan: {
get: function () {
console.warn('THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.');
return !this.enablePan;
},
set: function (value) {
console.warn('THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.');
this.enablePan = !value;
}
},
noKeys: {
get: function () {
console.warn('THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.');
return !this.enableKeys;
},
set: function (value) {
console.warn('THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.');
this.enableKeys = !value;
}
},
staticMoving: {
get: function () {
console.warn('THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.');
return !this.enableDamping;
},
set: function (value) {
console.warn('THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.');
this.enableDamping = !value;
}
},
dynamicDampingFactor: {
get: function () {
console.warn('THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.');
return this.dampingFactor;
},
set: function (value) {
console.warn('THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.');
this.dampingFactor = value;
}
}
});

26
built/index.js
Unescape View File

@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var THREE = require("three");
require("OrbitControls");
window.onload = function () {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
// cube.rotation.x += 0.1;
// cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
// var world_controls = new OrbitControls(camera, renderer.domElement);
// world_controls.target.set(0, 0, 0);
// world_controls.update();
render();
};

83
dist/bundle.js vendored
Unescape View File

@ -0,0 +1,83 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
document.write('hellow world<br/>');
document.write('hellow world');
document.write('hellow world');
/***/ })
/******/ ]);
//# sourceMappingURL=bundle.js.map

1
dist/bundle.js.map vendored
Unescape View File

@ -0,0 +1 @@
{"version":3,"sources":["webpack:///webpack/bootstrap 11db2a449f8f85283307","webpack:///./src/index.ts"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;AC/DA,QAAQ,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;AACpC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;AAC/B,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC","file":"bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 11db2a449f8f85283307","import * as Three from 'three'\r\ndocument.write('hellow world<br/>');\r\ndocument.write('hellow world');\r\ndocument.write('hellow world');\n\n\n// WEBPACK FOOTER //\n// ./src/index.ts"],"sourceRoot":""}

14
dist/index.html vendored
Unescape View File

@ -0,0 +1,14 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./bundle.js"></script>
</head>
<body>
</body>
</html>

24
package.json
Unescape View File

@ -0,0 +1,24 @@
{
"name": "threejs_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"awesome-typescript-loader": "^3.1.3",
"source-map-loader": "^0.2.1",
"typescript": "^2.3.2",
"typings": "^2.1.1",
"webpack": "^2.5.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"@types/three": "^0.84.7",
"three": "^0.85.2"
}
}

676
src/OrbitControls.ts
Unescape View File

@ -0,0 +1,676 @@
import * as THREE from 'three';
const STATE = {
NONE: - 1,
ROTATE: 0,
DOLLY: 1,
PAN: 2,
TOUCH_ROTATE: 3,
TOUCH_DOLLY: 4,
TOUCH_PAN: 5
};
const CHANGE_EVENT = { type: 'change' };
const START_EVENT = { type: 'start' };
const END_EVENT = { type: 'end' };
const EPS = 0.000001;
/**
* @author qiao / https://github.com/qiao
* @author mrdoob / http://mrdoob.com
* @author alteredq / http://alteredqualia.com/
* @author WestLangley / http://github.com/WestLangley
* @author erich666 / http://erichaines.com
* @author nicolaspanel / http://github.com/nicolaspanel
*
* This set of controls performs orbiting, dollying (zooming), and panning.
* Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
* Orbit - left mouse / touch: one finger move
* Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
* Pan - right mouse, or arrow keys / touch: three finger swipe
*/
export class OrbitControls extends THREE.EventDispatcher {
object: THREE.Camera;
domElement: HTMLElement | HTMLDocument;
window: Window;
// API
enabled: boolean;
target: THREE.Vector3;
enableZoom: boolean;
zoomSpeed: number;
minDistance: number;
maxDistance: number;
enableRotate: boolean;
rotateSpeed: number;
enablePan: boolean;
keyPanSpeed: number;
autoRotate: boolean;
autoRotateSpeed: number;
minZoom: number;
maxZoom: number;
minPolarAngle: number;
maxPolarAngle: number;
minAzimuthAngle: number;
maxAzimuthAngle: number;
enableKeys: boolean;
keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
mouseButtons: { ORBIT: THREE.MOUSE; ZOOM: THREE.MOUSE; PAN: THREE.MOUSE; };
enableDamping: boolean;
dampingFactor: number;
private spherical: THREE.Spherical;
private sphericalDelta: THREE.Spherical;
private scale: number;
private target0: THREE.Vector3;
private position0: THREE.Vector3;
private zoom0: any;
private state: number;
private panOffset: THREE.Vector3;
private zoomChanged: boolean;
private rotateStart: THREE.Vector2;
private rotateEnd: THREE.Vector2;
private rotateDelta: THREE.Vector2
private panStart: THREE.Vector2;
private panEnd: THREE.Vector2;
private panDelta: THREE.Vector2;
private dollyStart: THREE.Vector2;
private dollyEnd: THREE.Vector2;
private dollyDelta: THREE.Vector2;
private updateLastPosition: THREE.Vector3;
private updateOffset: THREE.Vector3;
private updateQuat: THREE.Quaternion;
private updateLastQuaternion: THREE.Quaternion;
private updateQuatInverse: THREE.Quaternion;
private panLeftV: THREE.Vector3;
private panUpV: THREE.Vector3;
private panInternalOffset: THREE.Vector3;
private onContextMenu: EventListener;
private onMouseUp: EventListener;
private onMouseDown: EventListener;
private onMouseMove: EventListener;
private onMouseWheel: EventListener;
private onTouchStart: EventListener;
private onTouchEnd: EventListener;
private onTouchMove: EventListener;
private onKeyDown: EventListener;
constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window) {
super();
this.object = object;
this.domElement = (domElement !== undefined) ? domElement : document;
this.window = (domWindow !== undefined) ? domWindow : window;
// Set to false to disable this control
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
this.enableDamping = false;
this.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
this.enableZoom = true;
this.zoomSpeed = 1.0;
// Set to false to disable rotating
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
this.enableKeys = true;
// The four arrow keys
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.zoom0 = (this.object as any).zoom;
// for update speedup
this.updateOffset = new THREE.Vector3();
// so camera.up is the orbit axis
this.updateQuat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
this.updateQuatInverse = this.updateQuat.clone().inverse();
this.updateLastPosition = new THREE.Vector3();
this.updateLastQuaternion = new THREE.Quaternion();
this.state = STATE.NONE;
this.scale = 1;
// current position in spherical coordinates
this.spherical = new THREE.Spherical();
this.sphericalDelta = new THREE.Spherical();
this.panOffset = new THREE.Vector3();
this.zoomChanged = false;
this.rotateStart = new THREE.Vector2();
this.rotateEnd = new THREE.Vector2();
this.rotateDelta = new THREE.Vector2();
this.panStart = new THREE.Vector2();
this.panEnd = new THREE.Vector2();
this.panDelta = new THREE.Vector2();
this.dollyStart = new THREE.Vector2();
this.dollyEnd = new THREE.Vector2();
this.dollyDelta = new THREE.Vector2();
this.panLeftV = new THREE.Vector3();
this.panUpV = new THREE.Vector3();
this.panInternalOffset = new THREE.Vector3();
// event handlers - FSM: listen for events and reset state
this.onMouseDown = (event: ThreeEvent) => {
if (this.enabled === false) return;
event.preventDefault();
if ((event as any).button === this.mouseButtons.ORBIT) {
if (this.enableRotate === false) return;
this.rotateStart.set(event.clientX, event.clientY);
this.state = STATE.ROTATE;
} else if (event.button === this.mouseButtons.ZOOM) {
if (this.enableZoom === false) return;
this.dollyStart.set(event.clientX, event.clientY);
this.state = STATE.DOLLY;
} else if (event.button === this.mouseButtons.PAN) {
if (this.enablePan === false) return;
this.panStart.set(event.clientX, event.clientY);
this.state = STATE.PAN;
}
if (this.state !== STATE.NONE) {
document.addEventListener('mousemove', this.onMouseMove, false);
document.addEventListener('mouseup', this.onMouseUp, false);
this.dispatchEvent(START_EVENT);
}
};
this.onMouseMove = (event: ThreeEvent) => {
if (this.enabled === false) return;
event.preventDefault();
if (this.state === STATE.ROTATE) {
if (this.enableRotate === false) return;
this.rotateEnd.set(event.clientX, event.clientY);
this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
const element = this.domElement === document ? this.domElement.body : this.domElement;
// rotating across whole screen goes 360 degrees around
this.rotateLeft(2 * Math.PI * this.rotateDelta.x / (element as any).clientWidth * this.rotateSpeed);
// rotating up and down along whole screen attempts to go 360, but limited to 180
this.rotateUp(2 * Math.PI * this.rotateDelta.y / (element as any).clientHeight * this.rotateSpeed);
this.rotateStart.copy(this.rotateEnd);
this.update();
} else if (this.state === STATE.DOLLY) {
if (this.enableZoom === false) return;
this.dollyEnd.set(event.clientX, event.clientY);
this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart);
if (this.dollyDelta.y > 0) {
this.dollyIn(this.getZoomScale());
} else if (this.dollyDelta.y < 0) {
this.dollyOut(this.getZoomScale());
}
this.dollyStart.copy(this.dollyEnd);
this.update();
} else if (this.state === STATE.PAN) {
if (this.enablePan === false) return;
this.panEnd.set(event.clientX, event.clientY);
this.panDelta.subVectors(this.panEnd, this.panStart);
this.pan(this.panDelta.x, this.panDelta.y);
this.panStart.copy(this.panEnd);
this.update();
}
}
this.onMouseUp = (event: ThreeEvent) => {
if (this.enabled === false) return;
document.removeEventListener('mousemove', this.onMouseMove, false);
document.removeEventListener('mouseup', this.onMouseUp, false);
this.dispatchEvent(END_EVENT);
this.state = STATE.NONE;
};
this.onMouseWheel = (event: ThreeEvent) => {
if (this.enabled === false || this.enableZoom === false || (this.state !== STATE.NONE && this.state !== STATE.ROTATE)) return;
event.preventDefault();
event.stopPropagation();
if (event.deltaY < 0) {
this.dollyOut(this.getZoomScale());
} else if (event.deltaY > 0) {
this.dollyIn(this.getZoomScale());
}
this.update();
this.dispatchEvent(START_EVENT); // not sure why these are here...
this.dispatchEvent(END_EVENT);
};
this.onKeyDown = (event: ThreeEvent) => {
if (this.enabled === false || this.enableKeys === false || this.enablePan === false) return;
switch (event.keyCode) {
case this.keys.UP: {
this.pan(0, this.keyPanSpeed);
this.update();
} break;
case this.keys.BOTTOM: {
this.pan(0, - this.keyPanSpeed);
this.update();
} break;
case this.keys.LEFT: {
this.pan(this.keyPanSpeed, 0);
this.update();
} break;
case this.keys.RIGHT: {
this.pan(- this.keyPanSpeed, 0);
this.update();
} break;
}
};
this.onTouchStart = (event: ThreeEvent) => {
if (this.enabled === false) return;
switch (event.touches.length) {
// one-fingered touch: rotate
case 1: {
if (this.enableRotate === false) return;
this.rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
this.state = STATE.TOUCH_ROTATE;
} break;
// two-fingered touch: dolly
case 2: {
if (this.enableZoom === false) return;
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
this.dollyStart.set(0, distance);
this.state = STATE.TOUCH_DOLLY;
} break;
// three-fingered touch: pan
case 3: {
if (this.enablePan === false) return;
this.panStart.set(event.touches[0].pageX, event.touches[0].pageY);
this.state = STATE.TOUCH_PAN;
} break;
default: {
this.state = STATE.NONE;
}
}
if (this.state !== STATE.NONE) {
this.dispatchEvent(START_EVENT);
}
};
this.onTouchMove = (event: ThreeEvent) => {
if (this.enabled === false) return;
event.preventDefault();
event.stopPropagation();
switch (event.touches.length) {
// one-fingered touch: rotate
case 1: {
if (this.enableRotate === false) return;
if (this.state !== STATE.TOUCH_ROTATE) return; // is this needed?...
this.rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
var element = this.domElement === document ? this.domElement.body : this.domElement;
// rotating across whole screen goes 360 degrees around
this.rotateLeft(2 * Math.PI * this.rotateDelta.x / (element as any).clientWidth * this.rotateSpeed);
// rotating up and down along whole screen attempts to go 360, but limited to 180
this.rotateUp(2 * Math.PI * this.rotateDelta.y / (element as any).clientHeight * this.rotateSpeed);
this.rotateStart.copy(this.rotateEnd);
this.update();
} break;
// two-fingered touch: dolly
case 2: {
if (this.enableZoom === false) return;
if (this.state !== STATE.TOUCH_DOLLY) return; // is this needed?...
//console.log( 'handleTouchMoveDolly' );
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
this.dollyEnd.set(0, distance);
this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart);
if (this.dollyDelta.y > 0) {
this.dollyOut(this.getZoomScale());
} else if (this.dollyDelta.y < 0) {
this.dollyIn(this.getZoomScale());
}
this.dollyStart.copy(this.dollyEnd);
this.update();
} break;
// three-fingered touch: pan
case 3: {
if (this.enablePan === false) return;
if (this.state !== STATE.TOUCH_PAN) return; // is this needed?...
this.panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
this.panDelta.subVectors(this.panEnd, this.panStart);
this.pan(this.panDelta.x, this.panDelta.y);
this.panStart.copy(this.panEnd);
this.update();
} break;
default: {
this.state = STATE.NONE;
}
}
};
this.onTouchEnd = (event: Event) => {
if (this.enabled === false) return;
this.dispatchEvent(END_EVENT);
this.state = STATE.NONE;
}
this.onContextMenu = (event) => {
event.preventDefault();
};
this.domElement.addEventListener('contextmenu', this.onContextMenu, false);
this.domElement.addEventListener('mousedown', this.onMouseDown, false);
this.domElement.addEventListener('wheel', this.onMouseWheel, false);
this.domElement.addEventListener('touchstart', this.onTouchStart, false);
this.domElement.addEventListener('touchend', this.onTouchEnd, false);
this.domElement.addEventListener('touchmove', this.onTouchMove, false);
this.window.addEventListener('keydown', this.onKeyDown, false);
// force an update at start
this.update();
}
update() {
const position = this.object.position;
this.updateOffset.copy(position).sub(this.target);
// rotate offset to "y-axis-is-up" space
this.updateOffset.applyQuaternion(this.updateQuat);
// angle from z-axis around y-axis
this.spherical.setFromVector3(this.updateOffset);
if (this.autoRotate && this.state === STATE.NONE) {
this.rotateLeft(this.getAutoRotationAngle());
}
(this.spherical as any).theta += (this.sphericalDelta as any).theta;
(this.spherical as any).phi += (this.sphericalDelta as any).phi;
// restrict theta to be between desired limits
(this.spherical as (any) as any).theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, (this.spherical as any).theta));
// restrict phi to be between desired limits
(this.spherical as any).phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, (this.spherical as any).phi));
this.spherical.makeSafe();
(this.spherical as any).radius *= this.scale;
// restrict radius to be between desired limits
(this.spherical as any).radius = Math.max(this.minDistance, Math.min(this.maxDistance, (this.spherical as any).radius));
// move target to panned location
this.target.add(this.panOffset);
this.updateOffset.setFromSpherical(this.spherical);
// rotate offset back to "camera-up-vector-is-up" space
this.updateOffset.applyQuaternion(this.updateQuatInverse);
position.copy(this.target).add(this.updateOffset);
this.object.lookAt(this.target);
if (this.enableDamping === true) {
(this.sphericalDelta as any).theta *= (1 - this.dampingFactor);
(this.sphericalDelta as any).phi *= (1 - this.dampingFactor);
} else {
this.sphericalDelta.set(0, 0, 0);
}
this.scale = 1;
this.panOffset.set(0, 0, 0);
// update condition is:
// min(camera displacement, camera rotation in radians)^2 > EPS
// using small-angle approximation cos(x/2) = 1 - x^2 / 8
if (this.zoomChanged ||
this.updateLastPosition.distanceToSquared(this.object.position) > EPS ||
8 * (1 - this.updateLastQuaternion.dot(this.object.quaternion)) > EPS) {
this.dispatchEvent(CHANGE_EVENT);
this.updateLastPosition.copy(this.object.position);
this.updateLastQuaternion.copy(this.object.quaternion);
this.zoomChanged = false;
return true;
}
return false;
}
panLeft(distance: number, objectMatrix) {
this.panLeftV.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
this.panLeftV.multiplyScalar(- distance);
this.panOffset.add(this.panLeftV);
}
panUp(distance: number, objectMatrix) {
this.panUpV.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix
this.panUpV.multiplyScalar(distance);
this.panOffset.add(this.panUpV);
}
// deltaX and deltaY are in pixels; right and down are positive
pan(deltaX: number, deltaY: number) {
const element = this.domElement === document ? this.domElement.body : this.domElement;
if (this.object instanceof THREE.PerspectiveCamera) {
// perspective
const position = this.object.position;
this.panInternalOffset.copy(position).sub(this.target);
var targetDistance = this.panInternalOffset.length();
// half of the fov is center to top of screen
targetDistance *= Math.tan((this.object.fov / 2) * Math.PI / 180.0);
// we actually don't use screenWidth, since perspective camera is fixed to screen height
this.panLeft(2 * deltaX * targetDistance / (element as any).clientHeight, this.object.matrix);
this.panUp(2 * deltaY * targetDistance / (element as any).clientHeight, this.object.matrix);
} else if (this.object instanceof THREE.OrthographicCamera) {
// orthographic
this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / (element as any).clientWidth, this.object.matrix);
this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / (element as any).clientHeight, this.object.matrix);
} else {
// camera neither orthographic nor perspective
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.');
this.enablePan = false;
}
}
dollyIn(dollyScale) {
if (this.object instanceof THREE.PerspectiveCamera) {
this.scale /= dollyScale;
} else if (this.object instanceof THREE.OrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
this.object.updateProjectionMatrix();
this.zoomChanged = true;
} else {
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
this.enableZoom = false;
}
}
dollyOut(dollyScale) {
if (this.object instanceof THREE.PerspectiveCamera) {
this.scale *= dollyScale;
} else if (this.object instanceof THREE.OrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
this.object.updateProjectionMatrix();
this.zoomChanged = true;
} else {
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
this.enableZoom = false;
}
}
getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * this.autoRotateSpeed;
}
getZoomScale() {
return Math.pow(0.95, this.zoomSpeed);
}
rotateLeft(angle: number) {
(this.sphericalDelta as any).theta -= angle;
}
rotateUp(angle: number) {
(this.sphericalDelta as any).phi -= angle;
}
getPolarAngle(): number {
return (this.spherical as any).phi;
}
getAzimuthalAngle(): number {
return (this.spherical as any).theta;
}
dispose(): void {
this.domElement.removeEventListener('contextmenu', this.onContextMenu, false);
this.domElement.removeEventListener('mousedown', this.onMouseDown, false);
this.domElement.removeEventListener('wheel', this.onMouseWheel, false);
this.domElement.removeEventListener('touchstart', this.onTouchStart, false);
this.domElement.removeEventListener('touchend', this.onTouchEnd, false);
this.domElement.removeEventListener('touchmove', this.onTouchMove, false);
document.removeEventListener('mousemove', this.onMouseMove, false);
document.removeEventListener('mouseup', this.onMouseUp, false);
this.window.removeEventListener('keydown', this.onKeyDown, false);
//this.dispatchEvent( { type: 'dispose' } ); // should this be added here?
}
reset(): void {
this.target.copy(this.target0);
this.object.position.copy(this.position0);
(this.object as any).zoom = this.zoom0;
(this.object as any).updateProjectionMatrix();
this.dispatchEvent(CHANGE_EVENT);
this.update();
this.state = STATE.NONE;
}
// backward compatibility
get center(): THREE.Vector3 {
console.warn('THREE.OrbitControls: .center has been renamed to .target');
return this.target;
}
get noZoom(): boolean {
console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
return !this.enableZoom;
}
set noZoom(value: boolean) {
console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
this.enableZoom = !value;
}
}
interface ThreeEvent extends Event {
clientX: number;
clientY: number;
deltaY: number;
button: THREE.MOUSE;
touches: Array<any>;
keyCode: number;
}

40
src/index.ts
Unescape View File

@ -0,0 +1,40 @@
import * as THREE from 'three'
import { OrbitControls } from "./OrbitControls";
window.onload = function () {
var scene = new THREE.Scene();
var s = window.innerHeight / window.innerWidth;
var hei = 2 * window.innerHeight / window.innerWidth;
var wid = 2;
var camera = new THREE.OrthographicCamera(-wid, wid, hei, -hei, 1, 10);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
// cube.rotation.x += 0.1;
// cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
var world_controls = new OrbitControls(camera, renderer.domElement);
render();
};

14
tsconfig.json
Unescape View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5",
"lib": [
"es2015",
"dom"
]
},
"include": [
"./src/**/*"
]
}

5
typings.json
Unescape View File

@ -0,0 +1,5 @@
{
"globalDependencies": {
}
}

35
webpack.config.js
Unescape View File

@ -0,0 +1,35 @@
var path = require('path');
module.exports = {
entry: "./src/index.ts",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
],
// preLoaders: [
// // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
// { test: /\.js$/, loader: "source-map-loader" }
// ]
},
// Other options...
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 8188
}
};
Write Preview
Loading…
Cancel
Save