changed controls to custom

index.html

@@ -18,6 +18,7 @@
 		}
 	  </script>
 	<script src="view/graphics.js" type="module"></script>
+	<script src="view/controls.js" type="module"></script>
 </body>
 
 </html>

view/controls.js

@@ -0,0 +1,47 @@
+import { Euler, MathUtils, Quaternion, Vector3 } from "three";
+import { getDistance, setDistance, getCameraPosition, setCameraPostion, rotateCamera, getCanvasSize, getCameraRotation, getCameraQuaternion } from "./graphics.js";
+
+let r = 5
+let isMousePressed = false
+
+let angle = 0;
+
+const updateCameraPosition = (horizontal, vertical) => {
+    let ratio = 2 * Math.PI * r / getCanvasSize().width;
+    let distance = getDistance();
+
+    let alpha = (360 * (horizontal * ratio / (2 * Math.PI * distance))) ;
+    let betta = MathUtils.degToRad(angle);
+    let x = Math.cos(betta) * distance;
+    let z = Math.sin(betta) * distance;
+
+    setCameraPostion(x, undefined, z);
+    angle += alpha;
+}
+
+addEventListener('mousedown', (event) => {
+    if (event.button == 0) {
+        isMousePressed = true;
+    }
+});
+
+addEventListener('mouseup', (event) => {
+    if (event.button == 0) {
+        isMousePressed = false;
+    }
+});
+
+addEventListener('mousemove', (event) => {
+    if (isMousePressed) {        
+        let horizontal = event.movementX;
+        let vertical = event.movementY;
+        updateCameraPosition(horizontal, vertical);
+    }
+});
+
+addEventListener('wheel', (event) => {
+    let d = getDistance();
+    console.log(d + d / (event.deltaY/60))
+    setDistance(d + d / (event.deltaY/60));
+    updateCameraPosition(0, 0);
+})

view/graphics.js

@@ -1,10 +1,10 @@
 import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { SpiralSegment } from './spiral.js';
 
 const spiralHeight = 2;
 
 let spiralMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
+let distance = 5;
 
 const scene = new THREE.Scene();
 
@@ -13,10 +13,7 @@ const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
 document.body.appendChild( renderer.domElement );
 
 const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
-camera.position.z = 5;
-
-const controls = new OrbitControls( camera, renderer.domElement );
-controls.update();
+camera.position.z = distance;
 
 // setting light
 const pointLight = new THREE.PointLight( 0xffffff, 1);
@@ -36,6 +33,53 @@ for (let i = 0; i < 40; i ++) {
     scene.add(segments[i]);
 }
 
+export const rotateCamera = (x, y) => {
+    camera.rotateX(THREE.MathUtils.degToRad(x))
+    camera.rotateY(THREE.MathUtils.degToRad(y))
+    console.log(`Rotating camera by (${x};${y})`)
+}
+
+export const getCameraRotation = () => {
+    return camera.rotation
+}
+
+export const getCameraQuaternion = () => {
+    return camera.quaternion
+}
+
+export const getCameraPosition = () => {
+    return camera.position
+}
+
+export const setCameraPostion = (x, y ,z) => {
+    if (x != undefined) camera.position.x = x;
+    if (y != undefined) camera.position.y = y;
+    if (z != undefined) camera.position.z = z;
+    console.log(`Setting camera position to (${x};${y};${z})`)
+}
+
+export const getCanvasSize = () => {
+    return {width: canvas.width, height: canvas.height}
+}
+
+export const getDistance = () => {
+    return distance
+}
+
+export const setDistance = (d) => {
+    distance = d;
+}
+
+// console.log((THREE.MathUtils.radToDeg(camera.rotation._y)));
+// camera.rotateY(THREE.MathUtils.degToRad(90));
+// console.log((THREE.MathUtils.radToDeg(camera.rotation._y)));
+// camera.rotateY(THREE.MathUtils.degToRad(90));
+// console.log((THREE.MathUtils.radToDeg(camera.rotation._y)));
+// camera.rotateY(THREE.MathUtils.degToRad(90));
+// console.log((THREE.MathUtils.radToDeg(camera.rotation._y)));
+// camera.rotateY(THREE.MathUtils.degToRad(90));
+// console.log((THREE.MathUtils.radToDeg(camera.rotation._y)));
+
 //main loop
 function animate() {
     if (resizeRendererToDisplaySize(renderer)) {
@@ -44,12 +88,11 @@ function animate() {
         camera.updateProjectionMatrix();
     }
 
-    controls.update();
+    camera.lookAt(0, 0, 0);
+
     renderer.render(scene, camera);
 
     requestAnimationFrame(animate);
-
-    
 }
 
 function resizeRendererToDisplaySize(renderer) {