bombinans
/
fourdjs
1
1
Fork 0
Code Issues 11 Pull Requests Packages Projects Releases Wiki Activity

Changed to pointer events

feature-faces
Mike Lynch 2023-07-28 11:04:08 +10:00
parent 183e6becb2
commit 8a581a9d64
1 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
main.js
View File

@ -170,6 +170,7 @@ createShape(DEFAULT_SHAPE);
camera.position.z = 4; camera.position.z = 4;
const dragK = 0.005; const dragK = 0.005;
const damping = 0.99;
let theta = 0; let theta = 0;
let psi = 0; let psi = 0;
@ -177,23 +178,35 @@ let theta0 = 0;
let psi0 = 0; let psi0 = 0;
let dragx0 = 0; let dragx0 = 0;
let dragy0 = 0; let dragy0 = 0;
let dtheta = 0;
let dpsi = 0;
let dragging = false;
renderer.domElement.addEventListener("mousedown", (event) => {
renderer.domElement.addEventListener("pointerdown", (event) => {
if( event.buttons === 1 ) { if( event.buttons === 1 ) {
theta0 = theta; theta0 = theta;
psi0 = psi; psi0 = psi;
dragx0 = event.clientX; dragx0 = event.clientX;
dragy0 = event.clientY; dragy0 = event.clientY;
dragging = true;
} }
}) })
renderer.domElement.addEventListener("mousemove", (event) => { renderer.domElement.addEventListener("pointermove", (event) => {
if( event.buttons === 1 ) { if( event.buttons === 1 ) {
theta = theta0 + (event.clientX - dragx0) * dragK; const theta1 = theta0 + (event.clientX - dragx0) * dragK;
psi = psi0 + (event.clientY - dragy0) * dragK; const psi1 = psi0 + (event.clientY - dragy0) * dragK;
dtheta = theta1 - theta;
dpsi = psi1 - psi;
theta = theta1;
psi = psi1;
} }
}) })
renderer.domElement.addEventListener("pointerup", (event) => {
dragging = false;
})
// set up GUI // set up GUI
@ -205,6 +218,7 @@ const gui_params = {
hyperplane: 2, hyperplane: 2,
xRotate: 'YW', xRotate: 'YW',
yRotate: 'XZ', yRotate: 'XZ',
damping: false
}; };
gui.add(gui_params, 'shape', gui.add(gui_params, 'shape',
@ -214,6 +228,7 @@ gui.add(gui_params, 'shape',
gui.add(gui_params, 'hyperplane', 1.5, 4); gui.add(gui_params, 'hyperplane', 1.5, 4);
gui.add(gui_params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]); gui.add(gui_params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
gui.add(gui_params, 'yRotate', [ 'XZ', 'XY', 'XW' ]); gui.add(gui_params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
gui.add(gui_params, 'damping');
const ROTFN = { const ROTFN = {
XY: rotXY, XY: rotXY,
@ -231,6 +246,15 @@ const rotation = new THREE.Matrix4();
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
if( ! dragging ) {
theta += dtheta;
psi += dpsi;
if( gui_params.damping ) {
dtheta = dtheta * damping;
dpsi = dpsi * damping;
}
}
const rotations = [ const rotations = [
ROTFN[gui_params.xRotate](theta), ROTFN[gui_params.xRotate](theta),
ROTFN[gui_params.yRotate](psi) ROTFN[gui_params.yRotate](psi)