Interactive 4d rotation at last
parent
6b96d2b519
commit
d09dca808f
31
main.js
31
main.js
|
@ -2,7 +2,6 @@ import * as THREE from 'three';
|
|||
|
||||
import * as SHAPES from './shapes.js';
|
||||
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
const NODE_SIZE = 0.07;
|
||||
const LINK_SIZE = 0.03;
|
||||
|
@ -200,11 +199,6 @@ renderer.setSize( window.innerWidth, window.innerHeight );
|
|||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
|
||||
const controls = new OrbitControls( camera, renderer.domElement );
|
||||
controls.target.set( 0, 0, 0 );
|
||||
controls.update();
|
||||
controls.enablePan = false;
|
||||
controls.enableDamping = true;
|
||||
|
||||
|
||||
const node_m = new THREE.MeshStandardMaterial(
|
||||
|
@ -236,10 +230,28 @@ const shape = new FourDShape(node_m, link_m, struct);
|
|||
|
||||
scene.add(shape);
|
||||
|
||||
|
||||
camera.position.z = 4;
|
||||
|
||||
|
||||
let theta = 0;
|
||||
let psi = 0;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
|
||||
renderer.domElement.addEventListener("mousedown", (event) => {
|
||||
if( event.buttons === 1 ) {
|
||||
startX = event.clientX;
|
||||
startY = event.clientY;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
renderer.domElement.addEventListener("mousemove", (event) => {
|
||||
if( event.buttons === 1 ) {
|
||||
theta = (event.clientX - startX) * 0.01;
|
||||
psi = (event.clientY - startY) * 0.01;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
@ -248,12 +260,9 @@ const rotation = new THREE.Matrix4();
|
|||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
theta += 0.01;
|
||||
|
||||
const rotations = [rotYZ(theta * 0.33), rotXW(theta * 0.5)];
|
||||
const rotations = [rotYZ(theta), rotXW(psi)];
|
||||
shape.render3(rotations);
|
||||
|
||||
|
||||
renderer.render( scene, camera );
|
||||
}
|
||||
animate();
|
Loading…
Reference in New Issue