import * as THREE from 'three'; import { SpiralSegment } from './spiral.js'; const spiralHeight = 2; let spiralMaterial = new THREE.MeshPhongMaterial({color: 0xffffff}); let distance = 5; const scene = new THREE.Scene(); var canvas = document.querySelector('#canvas'); 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 = distance; // setting light const pointLight = new THREE.PointLight( 0xffffff, 1); pointLight.position.set( 0, 0, 1 ); const ambientLight = new THREE.AmbientLight(0xffffff, 10); scene.add(pointLight); scene.add(ambientLight); let segments = [] for (let i = 0; i < 40; i ++) { let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`; let material = new THREE.MeshPhongMaterial({color: color}); segments.push(new SpiralSegment(i - 20, spiralHeight, material).getSegment()); 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)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } camera.lookAt(0, 0, 0); renderer.render(scene, camera); requestAnimationFrame(animate); } function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) renderer.setSize(width, height, false); return needResize; } animate();