release 1.1 |
diff --git a/main.js b/main.js
index e075c5a..16db696 100644
--- a/main.js
+++ b/main.js
@@ -30,7 +30,7 @@ const CAMERA_K = 5;
// scene, lights and camera
const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );
const light = new THREE.PointLight(0xffffff, 2);
light.position.set(10, 10, 10);
scene.add(light);
@@ -45,14 +45,16 @@ camera.position.set(0, 0, CAMERA_K / 2);
camera.lookAt(0, 0, 0);
//camera.position.z = 4;
-const renderer = new THREE.WebGLRenderer({antialias: true});
-renderer.setSize( window.innerWidth, window.innerHeight );
+const canvas = document.getElementById("canvas");
+
+const renderer = new THREE.WebGLRenderer({antialias: true, canvas: canvas});
+renderer.setSize(40,40);
+
+canvas.style.width="400px";
+canvas.style.height="400px";
renderer.localClippingEnabled = true;
-
-document.body.appendChild( renderer.domElement );
-
// set up colours and materials for gui callbacks
scene.background = new THREE.Color(DEFAULTS.background);
@@ -169,7 +171,7 @@ function setBackground(c) {
// taperedLinks have their own materials so we have to set opacity
// on them individually. And also set the base materials as they
-// will get updated from it when the shape changes
+// will get updated from it when the shape changes
function setLinkOpacity(o, primary) {
link_ms.map((lm) => lm.opacity = o);
@@ -187,7 +189,7 @@ function setNodeOpacity(o) {
}
-let gui;
+let gui;
function changeShape() {
@@ -227,6 +229,8 @@ setBackground(gui.params.background);
const dragK = 0.005;
const damping = 0.99;
+const dtheta = 2 * Math.PI / 480;
+const dpsi = 2 * Math.PI / 480;
let theta = 0;
let psi = 0;
@@ -237,47 +241,16 @@ let dragy0 = 0;
let dragging = false;
-renderer.domElement.addEventListener("pointerdown", (event) => {
- if( event.buttons === 1 ) {
- theta0 = theta;
- psi0 = psi;
- dragx0 = event.clientX;
- dragy0 = event.clientY;
- dragging = true;
- }
-})
-
-renderer.domElement.addEventListener("pointermove", (event) => {
- if( event.buttons === 1 ) {
- const theta1 = theta0 + (event.clientX - dragx0) * dragK;
- const psi1 = psi0 + (event.clientY - dragy0) * dragK;
- gui.params.dtheta = theta1 - theta;
- gui.params.dpsi = psi1 - psi;
- theta = theta1;
- psi = psi1;
- }
-})
-
-renderer.domElement.addEventListener("pointerup", (event) => {
- dragging = false;
-})
-
createShape(gui.params.shape, gui.params.option);
displayDocs(gui.params.shape);
function animate() {
requestAnimationFrame( animate );
- if( ! dragging ) {
- theta += gui.params.dtheta;
- psi += gui.params.dpsi;
- if( gui.params.damping ) {
- gui.params.dtheta = gui.params.dtheta * damping;
- gui.params.dpsi = gui.params.dpsi * damping;
- }
- }
+ theta += dtheta;
+ psi += dpsi;
- const rotations = [
+const rotations = [
rotfn[gui.params.xRotate](theta),
rotfn[gui.params.yRotate](psi)
];