changed controls to custom

This commit is contained in:
leca 2023-12-01 12:57:41 +03:00
parent fd290229ec
commit cb967fc3e0
3 changed files with 99 additions and 8 deletions

View File

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

47
view/controls.js vendored Normal file
View File

@ -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 File

@ -1,10 +1,10 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { SpiralSegment } from './spiral.js'; import { SpiralSegment } from './spiral.js';
const spiralHeight = 2; const spiralHeight = 2;
let spiralMaterial = new THREE.MeshPhongMaterial({color: 0xffffff}); let spiralMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
let distance = 5;
const scene = new THREE.Scene(); const scene = new THREE.Scene();
@ -13,10 +13,7 @@ const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
document.body.appendChild( renderer.domElement ); document.body.appendChild( renderer.domElement );
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
camera.position.z = 5; camera.position.z = distance;
const controls = new OrbitControls( camera, renderer.domElement );
controls.update();
// setting light // setting light
const pointLight = new THREE.PointLight( 0xffffff, 1); const pointLight = new THREE.PointLight( 0xffffff, 1);
@ -36,6 +33,53 @@ for (let i = 0; i < 40; i ++) {
scene.add(segments[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 //main loop
function animate() { function animate() {
if (resizeRendererToDisplaySize(renderer)) { if (resizeRendererToDisplaySize(renderer)) {
@ -44,12 +88,11 @@ function animate() {
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
} }
controls.update(); camera.lookAt(0, 0, 0);
renderer.render(scene, camera); renderer.render(scene, camera);
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
function resizeRendererToDisplaySize(renderer) { function resizeRendererToDisplaySize(renderer) {