working line endpt drag
howard
commit
f3f04f9cfb
|
|
@ -0,0 +1 @@
|
|||
node_modules/
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<meta property="og:title" content="CAD Tool" />
|
||||
<meta property="og:description" content="Three.js CAD tool" />
|
||||
<meta property="og:url" content="" />
|
||||
<meta property="og:image" content="" />
|
||||
|
||||
<link rel="apple-touch-icon" href="icon-192.png" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<title>CAD Tool</title>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#c {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.split {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#view1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#view2 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="c"></canvas>
|
||||
<div class="split">
|
||||
<div id="view1"></div>
|
||||
<div id="view2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="bundle.js" type="module"></script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"short_name": "CAD Tool",
|
||||
"name": "CAD Tool using Three.js",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "icon-192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192",
|
||||
"purpose": "maskable any"
|
||||
},
|
||||
{
|
||||
"src": "icon-512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512",
|
||||
"purpose": "maskable any"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
svg=icon
|
||||
|
||||
size=(16 24 32 64)
|
||||
out=""
|
||||
for i in ${size[@]}; do
|
||||
inkscape --export-filename="./$svg-$i.png" $svg.svg -w $i -h $i
|
||||
out+="$svg-$i.png "
|
||||
done
|
||||
|
||||
size=(192 512)
|
||||
for i in ${size[@]}; do
|
||||
inkscape --export-filename="./$svg-$i.png" $svg.svg -w $i -h $i
|
||||
done
|
||||
|
||||
convert $out favicon.ico
|
||||
|
||||
mv favicon.ico icon-192.png icon-512.png ../dist
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 761 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -0,0 +1,103 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
enable-background="new 0 0 24 24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="black"
|
||||
width="24px"
|
||||
height="24px"
|
||||
version="1.1"
|
||||
id="svg26"
|
||||
sodipodi:docname="icon.svg"
|
||||
inkscape:version="1.0.2 (1.0.2+r75+1)">
|
||||
<metadata
|
||||
id="metadata32">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs30" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1623"
|
||||
inkscape:window-height="1236"
|
||||
id="namedview28"
|
||||
showgrid="false"
|
||||
inkscape:zoom="21.184428"
|
||||
inkscape:cx="16.030816"
|
||||
inkscape:cy="15.296979"
|
||||
inkscape:window-x="426"
|
||||
inkscape:window-y="92"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg26"
|
||||
inkscape:document-rotation="0"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true">
|
||||
<sodipodi:guide
|
||||
position="-3.6819497,21.6"
|
||||
orientation="0,1"
|
||||
id="guide842"
|
||||
inkscape:label=""
|
||||
inkscape:locked="false"
|
||||
inkscape:color="rgb(0,0,255)" />
|
||||
<sodipodi:guide
|
||||
position="-1.0857031,2.4"
|
||||
orientation="0,1"
|
||||
id="guide846"
|
||||
inkscape:label=""
|
||||
inkscape:locked="false"
|
||||
inkscape:color="rgb(0,0,255)" />
|
||||
</sodipodi:namedview>
|
||||
<circle
|
||||
style="fill:#a6a6a6;stroke-width:0.05;stroke-linecap:round"
|
||||
id="path927"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="12" />
|
||||
<g
|
||||
id="g875"
|
||||
transform="matrix(1.2,0,0,1.2,-2.4,-2.4)">
|
||||
<g
|
||||
id="g868"
|
||||
style="fill:#5ccff0;fill-opacity:1">
|
||||
<polygon
|
||||
opacity=".3"
|
||||
points="13,17.17 17,14.87 17,10.24 13,12.57 "
|
||||
id="polygon6"
|
||||
style="opacity:1;fill:#5ccff0;fill-opacity:1" />
|
||||
<polygon
|
||||
opacity=".3"
|
||||
points="12,6.25 8.04,8.53 12,10.84 15.96,8.53 "
|
||||
id="polygon8"
|
||||
style="opacity:1;fill:#5ccff0;fill-opacity:1" />
|
||||
<polygon
|
||||
opacity=".3"
|
||||
points="7,14.87 11,17.17 11,12.57 7,10.24 "
|
||||
id="polygon10"
|
||||
style="opacity:1;fill:#5ccff0;fill-opacity:1" />
|
||||
</g>
|
||||
<path
|
||||
d="M 19,14.87 V 9.13 C 19,8.41 18.62,7.75 18,7.4 L 13,4.52 C 12.69,4.34 12.35,4.25 12,4.25 c -0.35,0 -0.69,0.09 -1,0.27 L 6,7.39 C 5.38,7.75 5,8.41 5,9.13 v 5.74 c 0,0.72 0.38,1.38 1,1.73 l 5,2.88 c 0.31,0.18 0.65,0.27 1,0.27 0.35,0 0.69,-0.09 1,-0.27 l 5,-2.88 c 0.62,-0.35 1,-1.01 1,-1.73 z m -8,2.3 -4,-2.3 v -4.63 l 4,2.33 z M 12,10.84 8.04,8.53 12,6.25 15.96,8.53 Z m 5,4.03 -4,2.3 v -4.6 l 4,-2.33 z"
|
||||
id="path20" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"scripts": {
|
||||
"start": "webpack --watch --config webpack.dev.js",
|
||||
"build": "webpack --config webpack.prod.js",
|
||||
"get-bundle-size": "webpack --profile --json > stats.json --config webpack.prod.js && webpack-bundle-analyzer stats.json dist/"
|
||||
},
|
||||
"devDependencies": {
|
||||
"css-loader": "^5.1.3",
|
||||
"dat.gui": "^0.7.7",
|
||||
"redux": "^4.0.5",
|
||||
"sass": "^1.32.8",
|
||||
"sass-loader": "^11.0.1",
|
||||
"stats-js": "^1.0.1",
|
||||
"style-loader": "^2.0.0",
|
||||
"three": "^0.126.1",
|
||||
"webpack": "^5.26.3",
|
||||
"webpack-bundle-analyzer": "^4.4.0",
|
||||
"webpack-cli": "^4.5.0",
|
||||
"webpack-merge": "^5.7.3"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,266 @@
|
|||
|
||||
import { Matrix4 } from 'three';
|
||||
import * as THREE from '../node_modules/three/src/Three'
|
||||
|
||||
export class Sketcher extends THREE.Group {
|
||||
constructor(camera, domElement, plane) {
|
||||
super()
|
||||
this.camera = camera;
|
||||
this.domElement = domElement;
|
||||
this.scene = scene;
|
||||
this.plane = plane;
|
||||
this.matrixAutoUpdate = false;
|
||||
this.sketchNormal = new THREE.Vector3(0, 0, 1)
|
||||
this.orientSketcher(plane)
|
||||
|
||||
|
||||
this.add(new THREE.PlaneHelper(this.plane, 1, 0xffff00));
|
||||
|
||||
|
||||
this.linesGroup = new THREE.Group()
|
||||
this.linesArr = this.linesGroup.children
|
||||
this.pointsGroup = new THREE.Group()
|
||||
this.ptsArr = this.pointsGroup.children
|
||||
this.add(this.linesGroup)
|
||||
this.add(this.pointsGroup)
|
||||
|
||||
window.lg = this.linesArr
|
||||
window.pg = this.ptsArr
|
||||
|
||||
this.pickThreshold = 100
|
||||
this.grabbedObject = null
|
||||
|
||||
this.lineMaterial = new THREE.LineBasicMaterial({
|
||||
color: 0x555,
|
||||
})
|
||||
this.pointMaterial = new THREE.PointsMaterial({
|
||||
color: 0xAAA,
|
||||
size: 3,
|
||||
})
|
||||
|
||||
this.pointStart = this.pointStart.bind(this);
|
||||
this.pointEnd = this.pointEnd.bind(this);
|
||||
this.move = this.move.bind(this);
|
||||
this.keyHandler = this.keyHandler.bind(this);
|
||||
this.picker = this.picker.bind(this);
|
||||
this.grabbedMove = this.grabbedMove.bind(this);
|
||||
this.grabEnd = this.grabEnd.bind(this);
|
||||
this.raycaster = new THREE.Raycaster();
|
||||
|
||||
|
||||
window.addEventListener('keydown', this.keyHandler)
|
||||
domElement.addEventListener('pointerdown', this.picker)
|
||||
|
||||
|
||||
this.mode = ""
|
||||
this.keyTable = {
|
||||
'l': this.addLine,
|
||||
'Escape': this.clear
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
orientSketcher() {
|
||||
|
||||
const theta = this.sketchNormal.angleTo(this.plane.normal)
|
||||
const axis = this.sketchNormal.clone().cross(this.plane.normal).normalize()
|
||||
const rot = new THREE.Matrix4().makeRotationAxis(axis, theta)
|
||||
const trans = new THREE.Matrix4().makeTranslation(0, 0, this.plane.constant)
|
||||
|
||||
this.matrix = rot.multiply(trans) // world matrix will auto update in next render
|
||||
this.inverse = this.matrix.clone().invert()
|
||||
|
||||
}
|
||||
|
||||
keyHandler(e) {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
this.clear()
|
||||
this.mode = ""
|
||||
break;
|
||||
case 'l':
|
||||
this.addLine()
|
||||
this.mode = "line"
|
||||
break;
|
||||
case '=':
|
||||
this.plane.applyMatrix4(new Matrix4().makeRotationY(0.1))
|
||||
this.orientSketcher()
|
||||
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
break;
|
||||
case '-':
|
||||
this.plane.applyMatrix4(new Matrix4().makeRotationY(-0.1))
|
||||
this.orientSketcher()
|
||||
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
picker(e) {
|
||||
if (this.mode || e.buttons != 1) return
|
||||
this.raycaster.setFromCamera(
|
||||
new THREE.Vector2(
|
||||
(e.clientX / window.innerWidth) * 2 - 1,
|
||||
- (e.clientY / window.innerHeight) * 2 + 1
|
||||
),
|
||||
this.camera
|
||||
);
|
||||
|
||||
// console.log(this.ptsArr)
|
||||
const candidates = this.raycaster.intersectObjects(this.ptsArr)
|
||||
// console.log(candidates)
|
||||
|
||||
|
||||
if (!candidates.length) return;
|
||||
|
||||
let minDist = candidates[0].distanceToRay
|
||||
let idx = 0
|
||||
|
||||
for (let i = 1; i < candidates.length; i++) {
|
||||
if (candidates.distanceToRay < minDist) {
|
||||
minDist = candidates.distanceToRay
|
||||
idx = i
|
||||
}
|
||||
}
|
||||
|
||||
if (minDist < this.pickThreshold) {
|
||||
this.grabPtIdx = this.ptsArr.indexOf(
|
||||
candidates[idx].object
|
||||
)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
this.domElement.addEventListener('pointermove', this.grabbedMove);
|
||||
this.domElement.addEventListener('pointerup', this.grabEnd);
|
||||
}
|
||||
|
||||
grabbedMove(e) {
|
||||
const mouseLoc = this.getLocation(e);
|
||||
|
||||
this.moveLinePt(this.grabPtIdx,mouseLoc)
|
||||
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
}
|
||||
|
||||
moveLinePt(ptIdx, absPos) {
|
||||
this.ptsArr[ptIdx].geometry.attributes.position.set(absPos);
|
||||
this.ptsArr[ptIdx].geometry.attributes.position.needsUpdate = true;
|
||||
|
||||
const lineIdx = Math.floor(ptIdx / 2)
|
||||
const endPtIdx = (ptIdx % 2) * 3
|
||||
this.linesArr[lineIdx].geometry.attributes.position.set(absPos, endPtIdx)
|
||||
this.linesArr[lineIdx].geometry.attributes.position.needsUpdate = true;
|
||||
}
|
||||
|
||||
grabEnd() {
|
||||
this.domElement.removeEventListener('pointermove', this.grabbedMove)
|
||||
this.domElement.removeEventListener('pointerup', this.grabEnd)
|
||||
this.ptsArr[this.grabPtIdx].geometry.computeBoundingSphere()
|
||||
// this.grabbedObject = null
|
||||
}
|
||||
|
||||
|
||||
addLine() {
|
||||
this.domElement.addEventListener('pointerdown', this.pointStart)
|
||||
}
|
||||
|
||||
clear() {
|
||||
if (this.mode == "") return
|
||||
|
||||
this.domElement.removeEventListener('pointerdown', this.pointStart)
|
||||
this.domElement.removeEventListener('pointermove', this.move);
|
||||
this.domElement.removeEventListener('pointerdown', this.pointEnd);
|
||||
this.domElement.removeEventListener('pointerdown', this.pointEnd);
|
||||
|
||||
const lastLine = this.linesArr[this.linesArr.length - 1]
|
||||
this.linesGroup.remove(lastLine)
|
||||
lastLine.geometry.dispose()
|
||||
|
||||
const lastPoints = this.ptsArr.slice(this.ptsArr.length - 2)
|
||||
this.pointsGroup.remove(...lastPoints)
|
||||
lastPoints.forEach(obj => obj.geometry.dispose())
|
||||
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
}
|
||||
|
||||
getLocation(e) {
|
||||
this.raycaster.setFromCamera(
|
||||
new THREE.Vector2(
|
||||
(e.clientX / window.innerWidth) * 2 - 1,
|
||||
- (e.clientY / window.innerHeight) * 2 + 1
|
||||
),
|
||||
this.camera
|
||||
);
|
||||
// return this.worldToLocal(this.raycaster.ray.intersectPlane(this.plane)).toArray()
|
||||
return this.raycaster.ray.intersectPlane(this.plane).applyMatrix4(this.inverse).toArray()
|
||||
}
|
||||
|
||||
pointStart(e) {
|
||||
if (e.buttons !== 1) return
|
||||
const mouseLoc = this.getLocation(e);
|
||||
|
||||
this.lineGeom = new THREE.BufferGeometry()
|
||||
this.lineGeom.setAttribute('position',
|
||||
new THREE.BufferAttribute(
|
||||
new Float32Array(6), 3
|
||||
)
|
||||
);
|
||||
this.lineGeom.attributes.position.set(mouseLoc)
|
||||
this.line = new THREE.LineSegments(this.lineGeom, this.lineMaterial);
|
||||
this.line.frustumCulled = false;
|
||||
this.linesGroup.add(this.line)
|
||||
|
||||
this.p1Geom = new THREE.BufferGeometry()
|
||||
this.p1Geom.setAttribute('position',
|
||||
new THREE.BufferAttribute(
|
||||
new Float32Array(3), 3
|
||||
)
|
||||
);
|
||||
this.p1Geom.attributes.position.set(mouseLoc)
|
||||
this.p1 = new THREE.Points(this.p1Geom, this.pointMaterial);
|
||||
this.pointsGroup.add(this.p1)
|
||||
|
||||
this.p2Geom = new THREE.BufferGeometry()
|
||||
this.p2Geom.setAttribute('position',
|
||||
new THREE.BufferAttribute(
|
||||
new Float32Array(3), 3
|
||||
)
|
||||
);
|
||||
this.p2 = new THREE.Points(this.p2Geom, this.pointMaterial);
|
||||
this.pointsGroup.add(this.p2)
|
||||
|
||||
this.domElement.removeEventListener('pointerdown', this.pointStart)
|
||||
this.domElement.addEventListener('pointermove', this.move)
|
||||
this.domElement.addEventListener('pointerdown', this.pointEnd)
|
||||
}
|
||||
|
||||
|
||||
move(e) {
|
||||
const mouseLoc = this.getLocation(e);
|
||||
this.lineGeom.attributes.position.set(mouseLoc, 3)
|
||||
this.lineGeom.attributes.position.needsUpdate = true;
|
||||
this.p2Geom.attributes.position.set(mouseLoc);
|
||||
this.p2Geom.attributes.position.needsUpdate = true;
|
||||
this.p2Geom.computeBoundingSphere();
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
}
|
||||
|
||||
pointEnd(e) {
|
||||
if (e.buttons !== 1) return;
|
||||
this.domElement.removeEventListener('pointermove', this.move);
|
||||
this.domElement.removeEventListener('pointerdown', this.pointEnd);
|
||||
|
||||
|
||||
this.pointStart(e)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
// class MinMaxGUIHelper {
|
||||
// constructor(obj, minProp, maxProp, minDif) {
|
||||
// this.obj = obj;
|
||||
// this.minProp = minProp;
|
||||
// this.maxProp = maxProp;
|
||||
// this.minDif = minDif;
|
||||
// }
|
||||
// get min() {
|
||||
// return this.obj[this.minProp];
|
||||
// }
|
||||
// set min(v) {
|
||||
// this.obj[this.minProp] = v;
|
||||
// this.obj[this.maxProp] = Math.max(this.obj[this.maxProp], v + this.minDif);
|
||||
// }
|
||||
// get max() {
|
||||
// return this.obj[this.maxProp];
|
||||
// }
|
||||
// set max(v) {
|
||||
// this.obj[this.maxProp] = v;
|
||||
// this.min = this.min; // this will call the min setter
|
||||
// }
|
||||
// }
|
||||
|
||||
// const gui = new GUI();
|
||||
// gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
|
||||
// const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
|
||||
// gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near');
|
||||
// gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far');
|
||||
|
||||
import * as THREE from '../node_modules/three/src/Three';
|
||||
import { OrbitControls } from './OrbitControls'
|
||||
import { TrackballControls } from './trackball'
|
||||
import { Sketcher } from './Sketcher'
|
||||
import GUI from '../node_modules/dat.gui/src/dat/gui/GUI.js'
|
||||
import Stats from '../node_modules/three/examples/jsm/libs/stats.module.js';
|
||||
|
||||
import { KeyboardController } from './utils'
|
||||
|
||||
|
||||
|
||||
function main() {
|
||||
|
||||
const Controller = new KeyboardController()
|
||||
|
||||
var stats = new Stats();
|
||||
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
|
||||
document.body.appendChild(stats.dom);
|
||||
|
||||
const canvas = document.querySelector('#c');
|
||||
const view1Elem = document.querySelector('#view1');
|
||||
const view2Elem = document.querySelector('#view2');
|
||||
const renderer = new THREE.WebGLRenderer({ canvas });
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
window.scene = scene;
|
||||
scene.background = new THREE.Color('pink');
|
||||
|
||||
const helpersGroup = new THREE.Group();
|
||||
scene.add(helpersGroup);
|
||||
|
||||
|
||||
const size = 1;
|
||||
const near = 5;
|
||||
const far = 50;
|
||||
const camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
|
||||
camera.zoom = 0.1;
|
||||
camera.position.set(0, 0, 20);
|
||||
const controls = new OrbitControls(camera, view1Elem);
|
||||
// const controls = new TrackballControls(camera, view1Elem);
|
||||
controls.target.set(0, 0, 0);
|
||||
controls.update()
|
||||
const cameraHelper = new THREE.CameraHelper(camera);
|
||||
helpersGroup.add(cameraHelper);
|
||||
|
||||
|
||||
const camera2 = new THREE.PerspectiveCamera(
|
||||
60, // fov
|
||||
2, // aspect
|
||||
0.1, // near
|
||||
500, // far
|
||||
);
|
||||
camera2.position.set(16, 28, 40);
|
||||
camera2.lookAt(0, 5, 0);
|
||||
const controls2 = new OrbitControls(camera2, view2Elem);
|
||||
controls2.target.set(0, 5, 0);
|
||||
controls2.update();
|
||||
|
||||
|
||||
|
||||
const axesHelper = new THREE.AxesHelper(5);
|
||||
helpersGroup.add(axesHelper);
|
||||
|
||||
const sketchPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
|
||||
const sketcher = new Sketcher(camera, view1Elem, sketchPlane)
|
||||
scene.add(sketcher)
|
||||
|
||||
{
|
||||
const color = 0xFFFFFF;
|
||||
const intensity = 1;
|
||||
const light = new THREE.DirectionalLight(color, intensity);
|
||||
light.position.set(0, 10, 0);
|
||||
light.target.position.set(-5, 0, 0);
|
||||
scene.add(light);
|
||||
scene.add(light.target);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function resizeRendererToDisplaySize(renderer) {
|
||||
const canvas = renderer.domElement;
|
||||
const width = canvas.clientWidth;
|
||||
const height = canvas.clientHeight;
|
||||
const needResize = canvas.width !== width || canvas.height !== height;
|
||||
if (needResize) {
|
||||
renderer.setSize(width, height, false);
|
||||
}
|
||||
return needResize;
|
||||
}
|
||||
|
||||
function setScissorForElement(elem) {
|
||||
const canvasRect = canvas.getBoundingClientRect();
|
||||
const elemRect = elem.getBoundingClientRect();
|
||||
|
||||
// compute a canvas relative rectangle
|
||||
const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left;
|
||||
const left = Math.max(0, elemRect.left - canvasRect.left);
|
||||
const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top;
|
||||
const top = Math.max(0, elemRect.top - canvasRect.top);
|
||||
|
||||
const width = Math.min(canvasRect.width, right - left);
|
||||
const height = Math.min(canvasRect.height, bottom - top);
|
||||
|
||||
// setup the scissor to only render to that part of the canvas
|
||||
const positiveYUpBottom = canvasRect.height - bottom;
|
||||
renderer.setScissor(left, positiveYUpBottom, width, height);
|
||||
renderer.setViewport(left, positiveYUpBottom, width, height);
|
||||
|
||||
// return the aspect
|
||||
return width / height;
|
||||
}
|
||||
|
||||
function render() {
|
||||
stats.begin();
|
||||
resizeRendererToDisplaySize(renderer);
|
||||
|
||||
renderer.setScissorTest(true);
|
||||
{
|
||||
const aspect = setScissorForElement(view1Elem);
|
||||
camera.left = -aspect;
|
||||
camera.right = aspect;
|
||||
camera.updateProjectionMatrix();
|
||||
cameraHelper.update();
|
||||
cameraHelper.visible = false;
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
{
|
||||
const aspect = setScissorForElement(view2Elem);
|
||||
camera2.aspect = aspect;
|
||||
camera2.updateProjectionMatrix();
|
||||
cameraHelper.visible = true;
|
||||
renderer.render(scene, camera2);
|
||||
}
|
||||
|
||||
stats.end();
|
||||
|
||||
// requestAnimationFrame(render);
|
||||
}
|
||||
// requestAnimationFrame(render);
|
||||
|
||||
|
||||
controls.addEventListener('change', render);
|
||||
controls.addEventListener('start', render);
|
||||
controls2.addEventListener('change', render);
|
||||
sketcher.addEventListener('change', render);
|
||||
window.addEventListener('resize', render);
|
||||
render();
|
||||
}
|
||||
|
||||
main();
|
||||
|
|
@ -0,0 +1,754 @@
|
|||
import {
|
||||
EventDispatcher,
|
||||
MOUSE,
|
||||
Quaternion,
|
||||
Vector2,
|
||||
Vector3
|
||||
} from '../node_modules/three/src/Three';
|
||||
|
||||
var TrackballControls = function ( object, domElement ) {
|
||||
|
||||
if ( domElement === undefined ) console.warn( 'THREE.TrackballControls: The second parameter "domElement" is now mandatory.' );
|
||||
if ( domElement === document ) console.error( 'THREE.TrackballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
|
||||
|
||||
var scope = this;
|
||||
var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
|
||||
|
||||
this.object = object;
|
||||
this.domElement = domElement;
|
||||
|
||||
// API
|
||||
|
||||
this.enabled = true;
|
||||
|
||||
this.screen = { left: 0, top: 0, width: 0, height: 0 };
|
||||
|
||||
this.rotateSpeed = 3.0;
|
||||
this.zoomSpeed = 1.2;
|
||||
this.panSpeed = 89.5;
|
||||
|
||||
this.noRotate = false;
|
||||
this.noZoom = false;
|
||||
this.noPan = false;
|
||||
|
||||
this.staticMoving = true;
|
||||
this.dynamicDampingFactor = 0.2;
|
||||
|
||||
this.minDistance = 0;
|
||||
this.maxDistance = Infinity;
|
||||
|
||||
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
|
||||
|
||||
this.mouseButtons = { LEFT: null, MIDDLE: MOUSE.ROTATE, RIGHT: MOUSE.PAN };
|
||||
|
||||
// internals
|
||||
|
||||
this.target = new Vector3();
|
||||
|
||||
var EPS = 0.000001;
|
||||
|
||||
var lastPosition = new Vector3();
|
||||
var lastZoom = 1;
|
||||
|
||||
var _state = STATE.NONE,
|
||||
_keyState = STATE.NONE,
|
||||
|
||||
_eye = new Vector3(),
|
||||
|
||||
_movePrev = new Vector2(),
|
||||
_moveCurr = new Vector2(),
|
||||
|
||||
_lastAxis = new Vector3(),
|
||||
_lastAngle = 0,
|
||||
|
||||
_zoomStart = new Vector2(),
|
||||
_zoomEnd = new Vector2(),
|
||||
|
||||
_touchZoomDistanceStart = 0,
|
||||
_touchZoomDistanceEnd = 0,
|
||||
|
||||
_panStart = new Vector2(),
|
||||
_panEnd = new Vector2();
|
||||
|
||||
// for reset
|
||||
|
||||
this.target0 = this.target.clone();
|
||||
this.position0 = this.object.position.clone();
|
||||
this.up0 = this.object.up.clone();
|
||||
this.zoom0 = this.object.zoom;
|
||||
|
||||
// events
|
||||
|
||||
var changeEvent = { type: 'change' };
|
||||
var startEvent = { type: 'start' };
|
||||
var endEvent = { type: 'end' };
|
||||
|
||||
|
||||
// methods
|
||||
|
||||
this.handleResize = function () {
|
||||
|
||||
var box = scope.domElement.getBoundingClientRect();
|
||||
// adjustments come from similar code in the jquery offset() function
|
||||
var d = scope.domElement.ownerDocument.documentElement;
|
||||
scope.screen.left = box.left + window.pageXOffset - d.clientLeft;
|
||||
scope.screen.top = box.top + window.pageYOffset - d.clientTop;
|
||||
scope.screen.width = box.width;
|
||||
scope.screen.height = box.height;
|
||||
|
||||
};
|
||||
|
||||
var getMouseOnScreen = ( function () {
|
||||
|
||||
var vector = new Vector2();
|
||||
|
||||
return function getMouseOnScreen( pageX, pageY ) {
|
||||
|
||||
vector.set(
|
||||
( pageX - scope.screen.left ) / scope.screen.width,
|
||||
( pageY - scope.screen.top ) / scope.screen.height
|
||||
);
|
||||
|
||||
return vector;
|
||||
|
||||
};
|
||||
|
||||
}() );
|
||||
|
||||
var getMouseOnCircle = ( function () {
|
||||
|
||||
var vector = new Vector2();
|
||||
|
||||
return function getMouseOnCircle( pageX, pageY ) {
|
||||
|
||||
vector.set(
|
||||
( ( pageX - scope.screen.width * 0.5 - scope.screen.left ) / ( scope.screen.width * 0.5 ) ),
|
||||
( ( scope.screen.height + 2 * ( scope.screen.top - pageY ) ) / scope.screen.width ) // screen.width intentional
|
||||
);
|
||||
|
||||
return vector;
|
||||
|
||||
};
|
||||
|
||||
}() );
|
||||
|
||||
this.rotateCamera = ( function () {
|
||||
|
||||
var axis = new Vector3(),
|
||||
quaternion = new Quaternion(),
|
||||
eyeDirection = new Vector3(),
|
||||
objectUpDirection = new Vector3(),
|
||||
objectSidewaysDirection = new Vector3(),
|
||||
moveDirection = new Vector3(),
|
||||
angle;
|
||||
|
||||
return function rotateCamera() {
|
||||
|
||||
moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
|
||||
angle = moveDirection.length();
|
||||
|
||||
if ( angle ) {
|
||||
|
||||
_eye.copy( scope.object.position ).sub( scope.target );
|
||||
|
||||
eyeDirection.copy( _eye ).normalize();
|
||||
objectUpDirection.copy( scope.object.up ).normalize();
|
||||
objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();
|
||||
|
||||
objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
|
||||
objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );
|
||||
|
||||
moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );
|
||||
|
||||
axis.crossVectors( moveDirection, _eye ).normalize();
|
||||
|
||||
angle *= scope.rotateSpeed;
|
||||
quaternion.setFromAxisAngle( axis, angle );
|
||||
|
||||
_eye.applyQuaternion( quaternion );
|
||||
scope.object.up.applyQuaternion( quaternion );
|
||||
|
||||
_lastAxis.copy( axis );
|
||||
_lastAngle = angle;
|
||||
|
||||
} else if ( ! scope.staticMoving && _lastAngle ) {
|
||||
|
||||
_lastAngle *= Math.sqrt( 1.0 - scope.dynamicDampingFactor );
|
||||
_eye.copy( scope.object.position ).sub( scope.target );
|
||||
quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
|
||||
_eye.applyQuaternion( quaternion );
|
||||
scope.object.up.applyQuaternion( quaternion );
|
||||
|
||||
}
|
||||
|
||||
_movePrev.copy( _moveCurr );
|
||||
|
||||
};
|
||||
|
||||
}() );
|
||||
|
||||
|
||||
this.zoomCamera = function () {
|
||||
|
||||
var factor;
|
||||
|
||||
if ( _state === STATE.TOUCH_ZOOM_PAN ) {
|
||||
|
||||
factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
|
||||
_touchZoomDistanceStart = _touchZoomDistanceEnd;
|
||||
|
||||
if ( scope.object.isPerspectiveCamera ) {
|
||||
|
||||
_eye.multiplyScalar( factor );
|
||||
|
||||
} else if ( scope.object.isOrthographicCamera ) {
|
||||
|
||||
scope.object.zoom *= factor;
|
||||
scope.object.updateProjectionMatrix();
|
||||
|
||||
} else {
|
||||
|
||||
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * scope.zoomSpeed;
|
||||
|
||||
if ( factor !== 1.0 && factor > 0.0 ) {
|
||||
|
||||
if ( scope.object.isPerspectiveCamera ) {
|
||||
|
||||
_eye.multiplyScalar( factor );
|
||||
|
||||
} else if ( scope.object.isOrthographicCamera ) {
|
||||
|
||||
scope.object.zoom /= factor;
|
||||
scope.object.updateProjectionMatrix();
|
||||
|
||||
} else {
|
||||
|
||||
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if ( scope.staticMoving ) {
|
||||
|
||||
_zoomStart.copy( _zoomEnd );
|
||||
|
||||
} else {
|
||||
|
||||
_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.panCamera = ( function () {
|
||||
|
||||
var mouseChange = new Vector2(),
|
||||
objectUp = new Vector3(),
|
||||
pan = new Vector3();
|
||||
|
||||
return function panCamera() {
|
||||
|
||||
mouseChange.copy( _panEnd ).sub( _panStart );
|
||||
|
||||
if ( mouseChange.lengthSq() ) {
|
||||
|
||||
if ( scope.object.isOrthographicCamera ) {
|
||||
|
||||
var scale_x = ( scope.object.right - scope.object.left ) / scope.object.zoom / scope.domElement.clientWidth;
|
||||
var scale_y = ( scope.object.top - scope.object.bottom ) / scope.object.zoom / scope.domElement.clientWidth;
|
||||
|
||||
mouseChange.x *= scale_x;
|
||||
mouseChange.y *= scale_y;
|
||||
|
||||
}
|
||||
|
||||
mouseChange.multiplyScalar( _eye.length() * scope.panSpeed );
|
||||
|
||||
pan.copy( _eye ).cross( scope.object.up ).setLength( mouseChange.x );
|
||||
pan.add( objectUp.copy( scope.object.up ).setLength( mouseChange.y ) );
|
||||
|
||||
scope.object.position.add( pan );
|
||||
scope.target.add( pan );
|
||||
|
||||
if ( scope.staticMoving ) {
|
||||
|
||||
_panStart.copy( _panEnd );
|
||||
|
||||
} else {
|
||||
|
||||
_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( scope.dynamicDampingFactor ) );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
}() );
|
||||
|
||||
this.checkDistances = function () {
|
||||
|
||||
if ( ! scope.noZoom || ! scope.noPan ) {
|
||||
|
||||
if ( _eye.lengthSq() > scope.maxDistance * scope.maxDistance ) {
|
||||
|
||||
scope.object.position.addVectors( scope.target, _eye.setLength( scope.maxDistance ) );
|
||||
_zoomStart.copy( _zoomEnd );
|
||||
|
||||
}
|
||||
|
||||
if ( _eye.lengthSq() < scope.minDistance * scope.minDistance ) {
|
||||
|
||||
scope.object.position.addVectors( scope.target, _eye.setLength( scope.minDistance ) );
|
||||
_zoomStart.copy( _zoomEnd );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.update = function () {
|
||||
|
||||
_eye.subVectors( scope.object.position, scope.target );
|
||||
|
||||
if ( ! scope.noRotate ) {
|
||||
|
||||
scope.rotateCamera();
|
||||
|
||||
}
|
||||
|
||||
if ( ! scope.noZoom ) {
|
||||
|
||||
scope.zoomCamera();
|
||||
|
||||
}
|
||||
|
||||
if ( ! scope.noPan ) {
|
||||
|
||||
scope.panCamera();
|
||||
|
||||
}
|
||||
|
||||
scope.object.position.addVectors( scope.target, _eye );
|
||||
|
||||
if ( scope.object.isPerspectiveCamera ) {
|
||||
|
||||
scope.checkDistances();
|
||||
|
||||
scope.object.lookAt( scope.target );
|
||||
|
||||
if ( lastPosition.distanceToSquared( scope.object.position ) > EPS ) {
|
||||
|
||||
scope.dispatchEvent( changeEvent );
|
||||
|
||||
lastPosition.copy( scope.object.position );
|
||||
|
||||
}
|
||||
|
||||
} else if ( scope.object.isOrthographicCamera ) {
|
||||
|
||||
scope.object.lookAt( scope.target );
|
||||
|
||||
if ( lastPosition.distanceToSquared( scope.object.position ) > EPS || lastZoom !== scope.object.zoom ) {
|
||||
|
||||
scope.dispatchEvent( changeEvent );
|
||||
|
||||
lastPosition.copy( scope.object.position );
|
||||
lastZoom = scope.object.zoom;
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.reset = function () {
|
||||
|
||||
_state = STATE.NONE;
|
||||
_keyState = STATE.NONE;
|
||||
|
||||
scope.target.copy( scope.target0 );
|
||||
scope.object.position.copy( scope.position0 );
|
||||
scope.object.up.copy( scope.up0 );
|
||||
scope.object.zoom = scope.zoom0;
|
||||
|
||||
scope.object.updateProjectionMatrix();
|
||||
|
||||
_eye.subVectors( scope.object.position, scope.target );
|
||||
|
||||
scope.object.lookAt( scope.target );
|
||||
|
||||
scope.dispatchEvent( changeEvent );
|
||||
|
||||
lastPosition.copy( scope.object.position );
|
||||
lastZoom = scope.object.zoom;
|
||||
|
||||
};
|
||||
|
||||
// listeners
|
||||
|
||||
function onPointerDown( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
switch ( event.pointerType ) {
|
||||
|
||||
case 'mouse':
|
||||
case 'pen':
|
||||
onMouseDown( event );
|
||||
break;
|
||||
|
||||
// TODO touch
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onPointerMove( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
switch ( event.pointerType ) {
|
||||
|
||||
case 'mouse':
|
||||
case 'pen':
|
||||
onMouseMove( event );
|
||||
break;
|
||||
|
||||
// TODO touch
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onPointerUp( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
switch ( event.pointerType ) {
|
||||
|
||||
case 'mouse':
|
||||
case 'pen':
|
||||
onMouseUp( event );
|
||||
break;
|
||||
|
||||
// TODO touch
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function keydown( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
window.removeEventListener( 'keydown', keydown );
|
||||
|
||||
if ( _keyState !== STATE.NONE ) {
|
||||
|
||||
return;
|
||||
|
||||
} else if ( event.keyCode === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
|
||||
|
||||
_keyState = STATE.ROTATE;
|
||||
|
||||
} else if ( event.keyCode === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
|
||||
|
||||
_keyState = STATE.ZOOM;
|
||||
|
||||
} else if ( event.keyCode === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
|
||||
|
||||
_keyState = STATE.PAN;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function keyup() {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
_keyState = STATE.NONE;
|
||||
|
||||
window.addEventListener( 'keydown', keydown );
|
||||
|
||||
}
|
||||
|
||||
function onMouseDown( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if ( _state === STATE.NONE ) {
|
||||
|
||||
switch ( event.button ) {
|
||||
|
||||
case 0:
|
||||
_state = scope.mouseButtons.LEFT;
|
||||
break;
|
||||
|
||||
case 1:
|
||||
_state = scope.mouseButtons.MIDDLE;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
_state = scope.mouseButtons.RIGHT;
|
||||
break;
|
||||
|
||||
default:
|
||||
_state = STATE.NONE;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
|
||||
|
||||
if ( state === STATE.ROTATE && ! scope.noRotate ) {
|
||||
|
||||
_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
|
||||
_movePrev.copy( _moveCurr );
|
||||
|
||||
} else if ( state === STATE.ZOOM && ! scope.noZoom ) {
|
||||
|
||||
_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
|
||||
_zoomEnd.copy( _zoomStart );
|
||||
|
||||
} else if ( state === STATE.PAN && ! scope.noPan ) {
|
||||
|
||||
_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
|
||||
_panEnd.copy( _panStart );
|
||||
|
||||
}
|
||||
|
||||
scope.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
|
||||
scope.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
|
||||
|
||||
scope.dispatchEvent( startEvent );
|
||||
|
||||
}
|
||||
|
||||
function onMouseMove( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
var state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
|
||||
|
||||
if ( state === STATE.ROTATE && ! scope.noRotate ) {
|
||||
|
||||
_movePrev.copy( _moveCurr );
|
||||
_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
|
||||
|
||||
} else if ( state === STATE.ZOOM && ! scope.noZoom ) {
|
||||
|
||||
_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
|
||||
|
||||
} else if ( state === STATE.PAN && ! scope.noPan ) {
|
||||
|
||||
_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
|
||||
|
||||
}
|
||||
scope.update()
|
||||
}
|
||||
|
||||
function onMouseUp( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
_state = STATE.NONE;
|
||||
|
||||
scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
|
||||
scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
|
||||
|
||||
scope.dispatchEvent( endEvent );
|
||||
|
||||
}
|
||||
|
||||
function mousewheel( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
if ( scope.noZoom === true ) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
switch ( event.deltaMode ) {
|
||||
|
||||
case 2:
|
||||
// Zoom in pages
|
||||
_zoomStart.y -= event.deltaY * 0.025;
|
||||
break;
|
||||
|
||||
case 1:
|
||||
// Zoom in lines
|
||||
_zoomStart.y -= event.deltaY * 0.01;
|
||||
break;
|
||||
|
||||
default:
|
||||
// undefined, 0, assume pixels
|
||||
_zoomStart.y -= event.deltaY * 0.00025;
|
||||
break;
|
||||
|
||||
}
|
||||
scope.update()
|
||||
scope.dispatchEvent( startEvent );
|
||||
scope.dispatchEvent( endEvent );
|
||||
|
||||
}
|
||||
|
||||
function touchstart( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
switch ( event.touches.length ) {
|
||||
|
||||
case 1:
|
||||
_state = STATE.TOUCH_ROTATE;
|
||||
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
|
||||
_movePrev.copy( _moveCurr );
|
||||
break;
|
||||
|
||||
default: // 2 or more
|
||||
_state = STATE.TOUCH_ZOOM_PAN;
|
||||
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
||||
var dy = event.touches[ 0 ].pageY - event.touches[ 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.copy( getMouseOnScreen( x, y ) );
|
||||
_panEnd.copy( _panStart );
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
scope.dispatchEvent( startEvent );
|
||||
|
||||
}
|
||||
|
||||
function touchmove( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
switch ( event.touches.length ) {
|
||||
|
||||
case 1:
|
||||
_movePrev.copy( _moveCurr );
|
||||
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
|
||||
break;
|
||||
|
||||
default: // 2 or more
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function touchend( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
switch ( event.touches.length ) {
|
||||
|
||||
case 0:
|
||||
_state = STATE.NONE;
|
||||
break;
|
||||
|
||||
case 1:
|
||||
_state = STATE.TOUCH_ROTATE;
|
||||
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
|
||||
_movePrev.copy( _moveCurr );
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
scope.dispatchEvent( endEvent );
|
||||
|
||||
}
|
||||
|
||||
function contextmenu( event ) {
|
||||
|
||||
if ( scope.enabled === false ) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
}
|
||||
|
||||
this.dispose = function () {
|
||||
|
||||
scope.domElement.removeEventListener( 'contextmenu', contextmenu );
|
||||
|
||||
scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
|
||||
scope.domElement.removeEventListener( 'wheel', mousewheel );
|
||||
|
||||
scope.domElement.removeEventListener( 'touchstart', touchstart );
|
||||
scope.domElement.removeEventListener( 'touchend', touchend );
|
||||
scope.domElement.removeEventListener( 'touchmove', touchmove );
|
||||
|
||||
scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
|
||||
scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
|
||||
|
||||
window.removeEventListener( 'keydown', keydown );
|
||||
window.removeEventListener( 'keyup', keyup );
|
||||
|
||||
};
|
||||
|
||||
this.domElement.addEventListener( 'contextmenu', contextmenu );
|
||||
|
||||
this.domElement.addEventListener( 'pointerdown', onPointerDown );
|
||||
this.domElement.addEventListener( 'wheel', mousewheel );
|
||||
|
||||
this.domElement.addEventListener( 'touchstart', touchstart );
|
||||
this.domElement.addEventListener( 'touchend', touchend );
|
||||
this.domElement.addEventListener( 'touchmove', touchmove );
|
||||
|
||||
this.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
|
||||
this.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
|
||||
|
||||
window.addEventListener( 'keydown', keydown );
|
||||
window.addEventListener( 'keyup', keyup );
|
||||
|
||||
this.handleResize();
|
||||
|
||||
// force an update at start
|
||||
this.update();
|
||||
|
||||
};
|
||||
|
||||
TrackballControls.prototype = Object.create( EventDispatcher.prototype );
|
||||
TrackballControls.prototype.constructor = TrackballControls;
|
||||
|
||||
export { TrackballControls };
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
export function KeyboardController() {
|
||||
this.state="";
|
||||
window.addEventListener('keydown', (e)=> {
|
||||
if (e.key == "Escape"){
|
||||
this.state = ""
|
||||
} else {
|
||||
this.state = e.key
|
||||
}
|
||||
})
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,31 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
|
||||
plugins: [
|
||||
],
|
||||
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
// clean: true,
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
// Creates `style` nodes from JS strings
|
||||
"style-loader",
|
||||
// Translates CSS into CommonJS
|
||||
"css-loader",
|
||||
// Compiles Sass to CSS
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
const { merge } = require('webpack-merge');
|
||||
|
||||
const common = require('./webpack.common.js');
|
||||
|
||||
|
||||
module.exports = merge(common, {
|
||||
|
||||
mode: 'development',
|
||||
|
||||
// devtool: 'inline-source-map',
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
const { merge } = require('webpack-merge');
|
||||
|
||||
const common = require('./webpack.common.js');
|
||||
|
||||
|
||||
module.exports = merge(common, {
|
||||
|
||||
mode: 'production',
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue