import * as THREE from "three"; import { earthMesh, earthGroup } from "./js/earth/earth_mesh.js"; import { sunMesh, sunGroup } from "./js/sun/sun_mesh.js"; import { venusMesh, venusGroup } from "./js/venus/venus.js"; import { mercuryMesh, mercuryGroup } from "./js/mercury/mercury.js"; import { marsMesh, marsGroup } from "./js/mars/mars.js"; import { saturnMesh, saturnGroup } from "./js/saturn/saturn.js"; import { jupiterMesh, jupiterGroup } from "./js/jupiter/jupiter.js"; import { uranusMesh, uranusGroup } from "./js/uranus/uranus.js"; import { neptuneMesh, neptuneGroup } from "./js/neptune/neptune.js"; import { plutoMesh, plutoGroup } from "./js/pluto/pluto.js"; import skybox from "./js/skybox/skybox.js"; import { ArcballControls } from "three/addons/controls/ArcballControls"; import { OrbitControls } from "three/addons/controls/OrbitControls"; import { BufferAttribute, BufferGeometryLoader, Color, Vector3 } from "three"; import axios from "axios"; import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"; import { RenderPass } from "three/addons/postprocessing/RenderPass.js"; import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js"; import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js"; import { FXAAShader } from "three/addons/shaders/FXAAShader.js"; import { GlitchPass } from "three/addons/postprocessing/GlitchPass.js"; import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js"; import { PointLight } from "three"; //import { data } from "./orbitcalculations.js"; var objectsToOutline = []; let selectedObjects = []; var distanceScaleFactor = 10000000; document.body.style.margin = 0; var clock = new THREE.Clock(); var delta = 0; const scene = new THREE.Scene(); const axesHelper = new THREE.AxesHelper(1000); scene.add(axesHelper); scene.add(earthGroup); earthGroup.position.setX(149598262.0 / 1000); scene.add(sunGroup); scene.add(venusGroup); venusGroup.position.setX(108209475.0 / 1000); scene.add(mercuryGroup); mercuryGroup.position.setX(57909227.0 / 1000); scene.add(jupiterGroup); jupiterGroup.position.setX(778340821.0 / 1000); scene.add(saturnGroup); saturnGroup.position.setX(1426666422.0 / 1000); scene.add(uranusGroup); uranusGroup.position.setX(2870658186.0 / 1000); scene.add(marsGroup); marsGroup.position.setX(227943842.0 / 1000); scene.add(neptuneGroup); neptuneGroup.position.setX(4498396441.0 / 1000); scene.background = skybox; const camera = new THREE.PerspectiveCamera( 75, innerWidth / innerHeight, 0.1, 1000000000 ); camera.position.z = 40; //camera.useQuaternion = true; const renderer = new THREE.WebGLRenderer({ alpha: false }); renderer.setPixelRatio(devicePixelRatio); renderer.setSize(innerWidth, innerHeight); //renderer.setClearColor(0x222222, 0.0); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); renderer.autoClear = false; //var arc = new ArcballControls(camera, renderer.domElement, scene); const controls = new OrbitControls(camera, renderer.domElement); var planetGroups = [ mercuryGroup, venusGroup, earthGroup, marsGroup, jupiterGroup, saturnGroup, uranusGroup, neptuneGroup, ]; var meshes = []; planetGroups.forEach((planet) => { meshes.push(planet.children[0]); }); console.log(meshes); const color = 0xffffff; const intensity = 1; const light = new THREE.AmbientLight(color, intensity); scene.add(light); var composer = new EffectComposer(renderer); var renderPass = new RenderPass(scene, camera); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight, 1.5, 0.4, 0.85) ); bloomPass.threshold = 0; bloomPass.strength = 5; bloomPass.radius = 0; var outlinePass = new OutlinePass( new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera ); outlinePass.renderToScreen = true; composer.addPass(renderPass); composer.addPass(outlinePass); //composer.addPass(bloomPass); var effectFXAA = new ShaderPass(FXAAShader); effectFXAA.uniforms["resolution"].value.set( 1 / window.innerWidth, 1 / window.innerHeight ); effectFXAA.renderToScreen = true; composer.addPass(effectFXAA); /*var effectFXAA = new ShaderPass(THREE.FXAAShader); effectFXAA.uniforms["resolution"].value.set( 1 / window.innerWidth, 1 / window.innerHeight ); effectFXAA.renderToScreen = true; composer.addPass(effectFXAA);*/ var params = { edgeStrength: 10.0, edgeGlow: 1.0, edgeThickness: 1.0, pulsePeriod: 0, rotate: true, usePatternTexture: false, }; outlinePass.edgeStrength = params.edgeStrength; outlinePass.edgeGlow = params.edgeGlow; outlinePass.visibleEdgeColor.set(0xffffff); outlinePass.hiddenEdgeColor.set(0xffffff); const raycaster = new THREE.Raycaster(); const pointer = new THREE.Vector2(); /*const phongMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, shininess: 5, }); const test = new THREE.Mesh( new THREE.SphereGeometry(6371.0, 50, 50), phongMaterial ); test.position.add(new THREE.Vector3(100000, 100000, 100000)); scene.add(test);*/ let lines = []; planetGroups.forEach((planet) => { const lineGeometry = new THREE.BufferGeometry(); const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff }); const line = new THREE.Line(lineGeometry, lineMaterial); lineGeometry.setAttribute( "position", new THREE.BufferAttribute(new Float32Array([]), 3) ); lineGeometry.setAttribute( "normal", new THREE.BufferAttribute(new Float32Array([]), 3) ); line.geometry.attributes.position.needsUpdate = true; scene.add(line); planet.userData["line"] = line; }); console.log(lines); //renderer.shadowMap.enabled = true; //light.castShadow = true; //light.shadow.mapSize.width = 512; //light.shadow.mapSize.height = 512; //light.shadow.camera.near = 150; //light.shadow.camera.far = 350; var obj = null; function onPointerDown(event) { // calculate pointer position in normalized device coordinates // (-1 to +1) for both components pointer.x = (event.clientX / window.innerWidth) * 2 - 1; pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(pointer, camera); // calculate objects intersecting the picking ray const intersects = raycaster.intersectObjects(planetGroups); for (let i = 0; i < intersects.length; i++) { obj = intersects[i].object.parent; } if (event.button == 0 && obj) { controls.target.copy(obj.position); controls.minDistance = obj.children[0].geometry.boundingSphere.radius * 1.5; controls.maxDistance = obj.children[0].geometry.boundingSphere.radius * 10; controls.update(); } if (event.button == 2) { obj = null; controls.minDistance = 1; controls.maxDistance = Infinity; } } function onPointerMove(event) { // calculate pointer position in normalized device coordinates // (-1 to +1) for both components pointer.x = (event.clientX / window.innerWidth) * 2 - 1; pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; // calculate objects intersecting the picking ray raycaster.setFromCamera(pointer, camera); const intersects = raycaster.intersectObject(scene, true); function addSelectedObject(object) { selectedObjects = []; selectedObjects.push(object); } if (intersects.length > 0) { const selectedObject = intersects[0].object; addSelectedObject(selectedObject); outlinePass.selectedObjects = selectedObjects; } else { outlinePass.selectedObjects = []; } } var url = "http://127.0.0.1:8000/duration"; var data; setInterval( await axios.get(url).then((res) => { data = res.data; console.log(data); }), 10000 ); planetGroups.forEach((planet) => { planet.userData["positions"] = data[planet.userData.id]; }); function calculateOrbitLength() { planetGroups.forEach((planet) => { let length = 0; if (planet.name != "Sun") { for (let i = 0; i < planet.userData.positions.length - 1; i += 2) { const dx = Math.abs( planet.userData.positions[i + 1].x - planet.userData.positions[i].x ); const dy = Math.abs( planet.userData.positions[i + 1].y - planet.userData.positions[i].y ); const dz = Math.abs( planet.userData.positions[i + 1].z - planet.userData.positions[i].z ); var segment = Math.sqrt(dx * dx + dy * dy + dz * dz); //console.log( // `dx: ${dx}, dy: ${dy}, dz: ${dz}, segmentLength: ${segment}` //); length += segment; } } planet.userData["orbitLength"] = length / distanceScaleFactor; console.log( planet.userData.orbitLength * distanceScaleFactor + " " + planet.userData.id ); }); } calculateOrbitLength(); function cutPath(line, maxLength) { const positions = line.geometry.attributes.position.array; var currLength = getLength(line); if (currLength > maxLength) { line.geometry.attributes.position.array = positions.slice(3); line.geometry.setDrawRange( 0, line.geometry.attributes.position.array.length / 3 ); } } function getLength(line, maxLength) { var length = 0; const positions = line.geometry.attributes.position.array; for (let i = 0; i < positions.length - 6; i += 3) { const dx = positions[i + 3] - positions[i]; const dy = positions[i + 4] - positions[i + 1]; const dz = positions[i + 5] - positions[i + 2]; length += Math.sqrt(dx * dx + dy * dy + dz * dz); } return length; } var asdf = 0; var last = 0; function animate(now) { window.requestAnimationFrame(animate); renderer.render(scene, camera); controls.update(); composer.render(); if (obj) { controls.target.copy(obj.position); } planetGroups.forEach((planet) => { if (false) { if (planet.name != "Sun") { planet.position.set( Number(data[planet.userData.id].position.x / distanceScaleFactor), Number(data[planet.userData.id].position.y / distanceScaleFactor), Number(data[planet.userData.id].position.z / distanceScaleFactor) ); } } if (planet.name != "Sun" && asdf < data["199"].length) { if (true) { const vertices = planet.userData.line.geometry.attributes.position.array; const newVertices = new Float32Array(vertices.length + 3); newVertices.set(vertices); newVertices.set( [ Number(data[planet.userData.id][asdf].x / distanceScaleFactor), Number(data[planet.userData.id][asdf].y / distanceScaleFactor), Number(data[planet.userData.id][asdf].z / distanceScaleFactor), ], vertices.length ); planet.userData.line.geometry.setAttribute( "position", new THREE.BufferAttribute(newVertices, 3) ); planet.userData["pathLength"] = getLength(planet.userData.line, 10); cutPath(planet.userData.line, planet.userData.orbitLength * 0.5); } planet.position.set( Number(data[planet.userData.id][asdf].x / distanceScaleFactor), Number(data[planet.userData.id][asdf].y / distanceScaleFactor), Number(data[planet.userData.id][asdf].z / distanceScaleFactor) ); } }); performance.now(); earthGroup.children[0].rotation.y += 0.0015; earthGroup.children[1].rotation.y += 0.0025; earthGroup.children[3].position.y = (-Math.cos(0.001 * performance.now() * 1) * 384000) / 200000; earthGroup.children[3].position.z = (-Math.sin(0.001 * performance.now() * 1) * 384000) / 200000; asdf++; } animate(); window.addEventListener("pointermove", onPointerMove); window.addEventListener("pointerdown", onPointerDown);