mirror of
https://github.com/denismhz/solar-system.git
synced 2025-11-09 08:06:22 +01:00
Refactor
This commit is contained in:
parent
c0925353cb
commit
6d85ccdfc3
BIN
img/earth/8k_earth_clouds.jpg
Normal file
BIN
img/earth/8k_earth_clouds.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
BIN
img/earth/8k_earth_nightmap.jpg
Normal file
BIN
img/earth/8k_earth_nightmap.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 MiB |
BIN
img/earth/8k_earth_normal_map.jpg
Normal file
BIN
img/earth/8k_earth_normal_map.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
img/earth/8k_earth_normal_map.tif
Normal file
BIN
img/earth/8k_earth_normal_map.tif
Normal file
Binary file not shown.
BIN
img/earth/8k_earth_specular_map.tif
Normal file
BIN
img/earth/8k_earth_specular_map.tif
Normal file
Binary file not shown.
BIN
img/earth/color.jpg
Normal file
BIN
img/earth/color.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
|
Before Width: | Height: | Size: 841 KiB After Width: | Height: | Size: 841 KiB |
|
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 227 KiB |
|
Before Width: | Height: | Size: 279 KiB After Width: | Height: | Size: 279 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 1 MiB After Width: | Height: | Size: 1 MiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 249 KiB After Width: | Height: | Size: 249 KiB |
|
|
@ -1,66 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
import { moonMesh } from "../moon/moon.js";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const r = 25;
|
||||
const s = 50;
|
||||
const tilt = 1;
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/earth/earth_uv_1k.jpg"),
|
||||
bumpMap: textL.load("../../img/earth/earth_bump_1k.jpg"),
|
||||
specularMap: textL.load("../../img/earth/earth_spec_1k.jpg"),
|
||||
bumpScale: 0.2,
|
||||
shininess: 0.5,
|
||||
});
|
||||
|
||||
const earthMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(6371.0 / 6000, 50, 50),
|
||||
material
|
||||
);
|
||||
|
||||
earthMesh.rotation.z = tilt;
|
||||
|
||||
earthMesh.name = "earthMesh";
|
||||
|
||||
const cloudGeometry = new THREE.SphereGeometry(6371.0 / 6000 + 0.01, 50, 50);
|
||||
const cloudMaterial = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/earth/6k_earth_clouds.jpg"),
|
||||
transparent: true,
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
|
||||
clouds.rotation.z = tilt;
|
||||
|
||||
const axisPoints = [
|
||||
new THREE.Vector3(0, 6371.0 / 6000 + 0.5, 0),
|
||||
new THREE.Vector3(0, -(6371.0 / 6000 + 0.5), 0),
|
||||
];
|
||||
const axisGeometry = new THREE.BufferGeometry().setFromPoints(axisPoints);
|
||||
const axis = new THREE.Line(
|
||||
axisGeometry,
|
||||
new THREE.LineBasicMaterial({
|
||||
color: 0x330000,
|
||||
transparent: true,
|
||||
opacity: 0.5,
|
||||
linewidth: 2,
|
||||
})
|
||||
);
|
||||
axis.rotation.z = 0;
|
||||
|
||||
//earthMesh.castShadow = true;
|
||||
//earthMesh.receiveShadow = true;
|
||||
//clouds.receiveShadow = true;
|
||||
|
||||
const earthGroup = new THREE.Group();
|
||||
moonMesh.position.set(0, 384000 / 200000, 0);
|
||||
earthGroup.userData.id = 399;
|
||||
earthGroup.name = "earthGroup";
|
||||
earthGroup.add(earthMesh);
|
||||
earthGroup.add(clouds);
|
||||
earthGroup.add(axis);
|
||||
earthGroup.add(moonMesh);
|
||||
|
||||
export { earthMesh, earthGroup };
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/jupiter/jupiter2_4k.jpg"),
|
||||
});
|
||||
|
||||
const jupiterMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(69911 / 6000, 50, 50),
|
||||
material
|
||||
);
|
||||
|
||||
jupiterMesh.name = "jupiterMesh";
|
||||
|
||||
const jupiterGroup = new THREE.Group();
|
||||
jupiterGroup.name = "jupiterGroup";
|
||||
jupiterGroup.userData.id = 599;
|
||||
jupiterGroup.add(jupiterMesh);
|
||||
|
||||
export { jupiterMesh, jupiterGroup };
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/mars/mars_1k_color.jpg"),
|
||||
bumpMap: textL.load("../../img/mars/mars_1k_topo.jpg"),
|
||||
normalMap: textL.load("../../img/mars/mars_1k_normal.jpg"),
|
||||
});
|
||||
|
||||
const marsMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(3389.5 / 6000, 50, 50),
|
||||
material
|
||||
);
|
||||
|
||||
marsMesh.name = "mercuryMesh";
|
||||
|
||||
const marsGroup = new THREE.Group();
|
||||
marsGroup.name = "marsGroup";
|
||||
marsGroup.userData.id = 499;
|
||||
marsGroup.add(marsMesh);
|
||||
|
||||
export { marsMesh, marsGroup };
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/mercury/mercurymap.jpg"),
|
||||
bumpMap: textL.load("../../img/mercury/mercurybump.jpg"),
|
||||
});
|
||||
|
||||
const mercuryMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(2439.7 / 6000, 50, 50),
|
||||
material
|
||||
);
|
||||
|
||||
mercuryMesh.name = "mercuryMesh";
|
||||
|
||||
const mercuryGroup = new THREE.Group();
|
||||
mercuryGroup.name = "mercuryGroup";
|
||||
mercuryGroup.userData.id = 199;
|
||||
mercuryGroup.add(mercuryMesh);
|
||||
|
||||
export { mercuryMesh, mercuryGroup };
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const r = 1737 / 6000;
|
||||
const s = 50;
|
||||
|
||||
const moonMaterial = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/moon/moonmap4k.jpg"),
|
||||
bumpMap: textL.load("../../img/moon/moonbump4k.jpg"),
|
||||
bumpScale: 0.2,
|
||||
});
|
||||
|
||||
const moonMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(r, s, s),
|
||||
moonMaterial
|
||||
);
|
||||
|
||||
export { moonMesh };
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/neptune/neptunemap.jpg"),
|
||||
});
|
||||
|
||||
const neptuneMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(24622 / 6000, 50, 50),
|
||||
material
|
||||
);
|
||||
|
||||
neptuneMesh.name = "neptuneMesh";
|
||||
|
||||
const neptuneGroup = new THREE.Group();
|
||||
neptuneGroup.name = "neptuneGroup";
|
||||
neptuneGroup.userData.id = 899;
|
||||
neptuneGroup.add(neptuneMesh);
|
||||
|
||||
export { neptuneMesh, neptuneGroup };
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/pluto/plutomap2k.jpg"),
|
||||
bumpMap: textL.load("../../img/pluto/plutobump2k.jpg"),
|
||||
});
|
||||
|
||||
const plutoMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(1188 / 6000, 50, 50),
|
||||
material
|
||||
);
|
||||
|
||||
plutoMesh.name = "plutoMesh";
|
||||
|
||||
const plutoGroup = new THREE.Group();
|
||||
plutoGroup.name = "plutoGroup";
|
||||
plutoGroup.add(plutoMesh);
|
||||
|
||||
export { plutoMesh, plutoGroup };
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
import { BoxGeometry } from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/saturn/saturnmap.jpg"),
|
||||
});
|
||||
|
||||
const saturnMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(58232 / 6000, 30, 30),
|
||||
material
|
||||
);
|
||||
|
||||
saturnMesh.name = "saturnMesh";
|
||||
|
||||
const sringGeo = new THREE.RingGeometry(
|
||||
58232 / 6000 + 1,
|
||||
58232 / 6000 + 5,
|
||||
100,
|
||||
100
|
||||
);
|
||||
|
||||
const textured = textL.load("../../img/saturn/saturnringcolor.jpg");
|
||||
const otexture = textL.load("../../img/saturn/saturnringpattern.gif");
|
||||
|
||||
const sringMaterial = new THREE.ShaderMaterial({
|
||||
uniforms: {
|
||||
texturea: { value: textured },
|
||||
alphaTex: { value: otexture },
|
||||
innerRadius: { value: 58232 / 6000 + 0 },
|
||||
outerRadius: { value: 58232 / 6000 + 0 },
|
||||
},
|
||||
vertexShader: `
|
||||
varying vec3 vPos;
|
||||
|
||||
void main() {
|
||||
vPos = position;
|
||||
vec3 viewPosition = (modelViewMatrix * vec4(position, 1.)).xyz;
|
||||
gl_Position = projectionMatrix * vec4(viewPosition, 1.);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
uniform sampler2D texturea;
|
||||
uniform sampler2D alphaTex;
|
||||
uniform float innerRadius;
|
||||
uniform float outerRadius;
|
||||
|
||||
varying vec3 vPos;
|
||||
|
||||
vec4 color() {
|
||||
vec2 uv = vec2(0);
|
||||
uv.x = (length(vPos) - innerRadius) / (innerRadius + outerRadius);
|
||||
|
||||
vec4 pixel = texture2D(texturea, uv);
|
||||
vec4 pixel2 = texture2D(alphaTex, uv);
|
||||
pixel[3] = pixel2[0];
|
||||
if (pixel[3] <= 0.01) {
|
||||
discard;
|
||||
}
|
||||
return pixel;
|
||||
}
|
||||
|
||||
void main() {
|
||||
gl_FragColor = color();
|
||||
}
|
||||
`,
|
||||
transparent: true,
|
||||
side: THREE.DoubleSide,
|
||||
});
|
||||
|
||||
const sringMat = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/saturn/saturnringcolor.jpg"),
|
||||
alphaMap: textL.load("../../img/saturn/saturnringpattern.gif"),
|
||||
side: THREE.DoubleSide,
|
||||
transparent: true,
|
||||
});
|
||||
|
||||
const sringMesh = new THREE.Mesh(sringGeo, sringMaterial);
|
||||
|
||||
const saturnGroup = new THREE.Group();
|
||||
saturnGroup.name = "saturnGroup";
|
||||
saturnGroup.userData.id = 699;
|
||||
saturnGroup.add(saturnMesh);
|
||||
saturnGroup.add(sringMesh);
|
||||
|
||||
export { saturnMesh, saturnGroup };
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import * as THREE from "three"
|
||||
|
||||
const textL = new THREE.CubeTextureLoader();
|
||||
|
||||
//const skyboxGeo = new THREE.BoxGeometry(10000,10000,10000);
|
||||
//const skybox = new THREE.Mesh(skyboxGeo);
|
||||
|
||||
const skybox = textL.load([
|
||||
"../img/skybox/front.png",
|
||||
"../img/skybox/back.png",
|
||||
"../img/skybox/top.png",
|
||||
"../img/skybox/bottom.png",
|
||||
"../img/skybox/left.png",
|
||||
"../img/skybox/right.png"
|
||||
])
|
||||
|
||||
export default skybox
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const standardSunMaterial = new THREE.MeshStandardMaterial({
|
||||
emissive: 0xffd700,
|
||||
emissiveMap: new THREE.TextureLoader().load("./img/sun/sun_uv.jpg"),
|
||||
emissiveIntensity: 1,
|
||||
});
|
||||
|
||||
const sunMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(10000 / 6000, 30, 30),
|
||||
standardSunMaterial
|
||||
);
|
||||
|
||||
sunMesh.name = "sunMesh";
|
||||
|
||||
var sunLight = new THREE.PointLight(0xffffff, 1, 10000.0, 2);
|
||||
const sunGroup = new THREE.Group();
|
||||
sunGroup.name = "Sun";
|
||||
sunGroup.add(sunMesh);
|
||||
//sunGroup.add(sunLight);
|
||||
|
||||
export { sunGroup, sunMesh };
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/uranus/uranusmap.jpg"),
|
||||
});
|
||||
|
||||
const uranusMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(25362 / 6000, 50, 50),
|
||||
material
|
||||
);
|
||||
|
||||
uranusMesh.name = "uranusMesh";
|
||||
|
||||
const uranusGroup = new THREE.Group();
|
||||
uranusGroup.name = "uranusGroup";
|
||||
uranusGroup.userData.id = 799;
|
||||
uranusGroup.add(uranusMesh);
|
||||
|
||||
export { uranusMesh, uranusGroup };
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
const textL = new THREE.TextureLoader();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
map: textL.load("../../img/venus/venusmap.jpg"),
|
||||
bumpMap: textL.load("../../img/venus/venusbump.jpg"),
|
||||
bumpScale: 0.2,
|
||||
});
|
||||
|
||||
const venusMesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(6051.8 / 6000, 30, 30),
|
||||
material
|
||||
);
|
||||
|
||||
venusMesh.name = "venusMesh";
|
||||
|
||||
const venusGroup = new THREE.Group();
|
||||
venusGroup.name = "venusGroup";
|
||||
venusGroup.userData.id = 299;
|
||||
venusGroup.add(venusMesh);
|
||||
|
||||
export { venusMesh, venusGroup };
|
||||
BIN
public/default.jpg
Normal file
BIN
public/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/earth.jpg
Normal file
BIN
public/earth.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 B |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
BIN
public/mercury.jpg
Normal file
BIN
public/mercury.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 8 KiB After Width: | Height: | Size: 8 KiB |
BIN
public/venus.jpg
Normal file
BIN
public/venus.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
11
ring.svg
11
ring.svg
|
|
@ -1,11 +0,0 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#ffffff" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,486.4
|
||||
C128.751,486.4,25.6,383.249,25.6,256S128.751,25.6,256,25.6S486.4,128.751,486.4,256S383.249,486.4,256,486.4z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 588 B |
135
src/App.css
135
src/App.css
|
|
@ -11,3 +11,138 @@ body,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.overlay .wrapper {
|
||||
transform: translate3d(-10px, -10px, 0);
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
canvas {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.overlay .wrapper .content {
|
||||
position: absolute;
|
||||
color: rgb(254, 254, 254);
|
||||
font-size: 1.05em;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
user-select: none;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.overlay .wrapper .icon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.planetInfo {
|
||||
z-index: 12;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.slidecontainer {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
z-index: 12;
|
||||
top: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.planetInfoFadeIn {
|
||||
z-index: 12;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
transition-delay: 1s;
|
||||
transition-property: opacity;
|
||||
transition: opacity 2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 50px;
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
right: calc(-100% + 40px);
|
||||
}
|
||||
|
||||
.planetInfo .wrapper {
|
||||
padding-top: 100px;
|
||||
background-color: rgba(194, 15, 15, 0);
|
||||
backdrop-filter: blur(0.5px);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.216);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper p {
|
||||
color: white;
|
||||
padding: 10px 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper .data {
|
||||
padding-bottom: 0px;
|
||||
border-bottom: 1px solid rgb(116, 116, 116);
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper .data-1 {
|
||||
padding-right: 5px;
|
||||
font-size: 28.8px;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper .data-2 {
|
||||
padding-right: 5px;
|
||||
color: white;
|
||||
font-size: 18.8px;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper .data-3 {
|
||||
padding-right: 5px;
|
||||
color: rgb(83, 83, 83);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper h1 {
|
||||
color: white;
|
||||
padding: 2px;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.date {
|
||||
position:absolute;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
bottom:3%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dateSpan {
|
||||
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { createRoot } from "react-dom/client";
|
||||
import App from "./main";
|
||||
import App from "./Main";
|
||||
import "../src/App.css";
|
||||
|
||||
const container = document.getElementById("root");
|
||||
|
|
|
|||
|
|
@ -1,115 +0,0 @@
|
|||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||||
import { OrbitControls, PositionPoint } from "@react-three/drei";
|
||||
import React, {
|
||||
Suspense,
|
||||
useRef,
|
||||
createContext,
|
||||
memo,
|
||||
useState,
|
||||
useContext,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
} from "react";
|
||||
import * as THREE from "three";
|
||||
|
||||
import { ScreenOverlay } from "./omnioverlay.jsx";
|
||||
import { SharedPlanetState } from "./SharedPlanetState.jsx";
|
||||
import { Skybox } from "./skybox.jsx";
|
||||
import { MyContext } from "./Scene3.jsx";
|
||||
|
||||
export const CameraController = () => {
|
||||
const { customData } = useContext(MyContext);
|
||||
const [distance, setDistance] = useState(5);
|
||||
const [lookAt, setLookAt] = useState(new THREE.Vector3(0, 0, 0));
|
||||
const [position, setPosition] = useState(new THREE.Vector3(0, 0, 200));
|
||||
const [animate, setAnimate] = useState(false);
|
||||
const { camera } = useThree();
|
||||
const [currObj, setCurrObj] = useState(undefined);
|
||||
const mycam = useRef();
|
||||
const cameraGroupRef = useRef();
|
||||
const set = useThree(({ set }) => set);
|
||||
const size = useThree(({ size }) => size);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (mycam.current) {
|
||||
mycam.current.aspect = size.width / size.height;
|
||||
mycam.current.updateProjectionMatrix();
|
||||
}
|
||||
}, [size]);
|
||||
|
||||
const handleLookAt = (pos) => {
|
||||
setLookAt(pos);
|
||||
};
|
||||
customData.current["handleLookAt"] = handleLookAt;
|
||||
|
||||
const handleDistance = (obj) => {
|
||||
setDistance(obj.children[1].geometry.boundingSphere.radius * 1.5);
|
||||
};
|
||||
|
||||
const handlePosition = (pos, obj) => {
|
||||
mycam.current.updateMatrixWorld();
|
||||
const newPosition = pos
|
||||
.clone()
|
||||
.add(
|
||||
new THREE.Vector3(
|
||||
0,
|
||||
0,
|
||||
obj.children[1].geometry.boundingSphere.radius * 2.5
|
||||
)
|
||||
);
|
||||
|
||||
setCurrObj(obj);
|
||||
setPosition(newPosition);
|
||||
setAnimate(true);
|
||||
//console.log(newPosition);
|
||||
};
|
||||
customData.current["handlePosition"] = handlePosition;
|
||||
|
||||
useFrame(() => {
|
||||
console.log(mycam);
|
||||
let rp = undefined;
|
||||
cameraGroupRef.current.position.set(new THREE.Vector3(0, 0, 200));
|
||||
//camera.updateProjectionMatrix();
|
||||
if (currObj) {
|
||||
rp = currObj.position
|
||||
.clone()
|
||||
.add(
|
||||
new THREE.Vector3(
|
||||
0,
|
||||
0,
|
||||
currObj.children[1].geometry.boundingSphere.radius * 2.5
|
||||
)
|
||||
);
|
||||
}
|
||||
//console.log(state);
|
||||
|
||||
if (animate && currObj) {
|
||||
//update relative position
|
||||
|
||||
setPosition();
|
||||
camera.position.lerp(rp, 0.02);
|
||||
camera.lookAt(lookAt);
|
||||
|
||||
//console.log(currObj);
|
||||
if (camera.position.distanceTo(rp) < 0.1) {
|
||||
//camera.quaternion.slerp(currObj.quaternion, 0.2);
|
||||
setAnimate(false);
|
||||
}
|
||||
}
|
||||
//cameraRef.current.position.addScalar(2);
|
||||
//camera.position.addScalar(1);
|
||||
//console.log(camera);
|
||||
});
|
||||
return (
|
||||
<group ref={cameraGroupRef}>
|
||||
<perspectiveCamera
|
||||
ref={mycam}
|
||||
position={[0, 0, 100]}
|
||||
fov={75}
|
||||
aspect={window.innerWidth / window.innerHeight}
|
||||
near={0.1}
|
||||
far={1000}
|
||||
/>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
|
@ -17,55 +17,68 @@ import React, {
|
|||
} from "react";
|
||||
import * as THREE from "three";
|
||||
|
||||
import { ScreenOverlay } from "./omnioverlay.jsx";
|
||||
import { SharedPlanetState } from "./SharedPlanetState.jsx";
|
||||
import { Skybox } from "./skybox.jsx";
|
||||
import { MyContext } from "./Scene3.jsx";
|
||||
import { MyContext } from "./SolarSystemMain.jsx";
|
||||
|
||||
export function CustomCamera(props) {
|
||||
const { customData } = useContext(MyContext);
|
||||
const [lookAt, setLookAt] = useState(new THREE.Vector3(0, 0, 0));
|
||||
const [position, setPosition] = useState(new THREE.Vector3(0, 0, 200));
|
||||
const [animate, setAnimate] = useState(false);
|
||||
const [zoom, setZoom] = useState(true);
|
||||
const [pos, setPos] =useState();
|
||||
const mouseDown = useRef(false);
|
||||
const mouseUp = useRef(false);
|
||||
const dist = useRef(60);
|
||||
let _mouseStart = useRef(new THREE.Vector2(0, 0));
|
||||
let _mouseEnd = useRef(new THREE.Vector2(0, 0));
|
||||
let distance = useRef(200);
|
||||
const [globalQuaternion, setGlobalQuaternion] = useState(
|
||||
new THREE.Quaternion()
|
||||
);
|
||||
|
||||
const [currObj, setCurrObj] = useState(undefined);
|
||||
let rotate = useRef(true);
|
||||
|
||||
const handleMouseWheel = (event) => {
|
||||
const delta = Math.sign(event.deltaY);
|
||||
console.log(delta)
|
||||
handleZoom(delta);
|
||||
};
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
if (mouseDown.current && rotate.current) {
|
||||
_mouseEnd.current = new THREE.Vector2(event.clientX, event.clientY);
|
||||
const deltaX = event.movementX;
|
||||
const deltaY = event.movementY;
|
||||
const deltaX = -event.movementX;
|
||||
const deltaY = -event.movementY;
|
||||
|
||||
const rotationSpeed = 0.005;
|
||||
|
||||
// Create quaternions for rotation around X and Y axes
|
||||
const quaternionX = new THREE.Quaternion().setFromAxisAngle(
|
||||
new THREE.Vector3(1, 0, 0),
|
||||
deltaY * rotationSpeed
|
||||
deltaY * 0.01
|
||||
);
|
||||
const quaternionY = new THREE.Quaternion().setFromAxisAngle(
|
||||
new THREE.Vector3(0, 1, 0),
|
||||
deltaX * rotationSpeed
|
||||
);
|
||||
|
||||
const quaternionZ = new THREE.Quaternion().setFromAxisAngle(
|
||||
new THREE.Vector3(0, 0, 1),
|
||||
0
|
||||
);
|
||||
|
||||
// Combine the quaternions
|
||||
const deltaQuaternion = quaternionY.multiply(quaternionX);
|
||||
const deltaQuaternion = quaternionY
|
||||
.multiply(quaternionX)
|
||||
.multiply(quaternionZ);
|
||||
|
||||
// Apply the rotation to the camera quaternion
|
||||
if (camGroup.current.quaternion)
|
||||
camGroup.current.quaternion.multiply(deltaQuaternion);
|
||||
if (camGroup && camGroup.current.quaternion) {
|
||||
const finalQuaternion = camGroup.current.quaternion.clone();
|
||||
finalQuaternion.multiply(deltaQuaternion);
|
||||
|
||||
const slerpSpeed = 0.3; // Adjust this value to control the smoothness
|
||||
|
||||
camGroup.current.quaternion.slerp(finalQuaternion, slerpSpeed);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -80,11 +93,6 @@ export function CustomCamera(props) {
|
|||
mouseUp.current = true;
|
||||
};
|
||||
|
||||
const handleLookAt = (pos) => {
|
||||
setLookAt(pos);
|
||||
};
|
||||
customData.current["handleLookAt"] = handleLookAt;
|
||||
|
||||
const handleZoom = (delta) => {
|
||||
let zoomSpeed = 0.03;
|
||||
if (camGroup && cameraRef) {
|
||||
|
|
@ -92,24 +100,21 @@ export function CustomCamera(props) {
|
|||
camGroup.current.position
|
||||
);
|
||||
}
|
||||
|
||||
console.log(currObj)
|
||||
|
||||
function newDistance(prevDistance) {
|
||||
const newDistance = prevDistance + delta * zoomSpeed;
|
||||
return Math.max(0, newDistance); // Adjust the minimum distance as needed
|
||||
return Math.max(dist.current, newDistance); // Adjust the minimum distance as needed
|
||||
}
|
||||
distance.current = newDistance(distance.current);
|
||||
console.log("asdasd")
|
||||
//console.log(distance);
|
||||
};
|
||||
customData.current["handleZoom"] = handleZoom;
|
||||
|
||||
const handlePosition = (pos, obj) => {
|
||||
if (currObj) currObj.remove(camGroup.current);
|
||||
if (currObj) {
|
||||
currObj.remove(camGroup.current);
|
||||
setGlobalQuaternion(new THREE.Quaternion());
|
||||
}
|
||||
|
||||
setCurrObj(obj);
|
||||
|
||||
setAnimate(true);
|
||||
};
|
||||
customData.current["handlePosition"] = handlePosition;
|
||||
|
|
@ -123,8 +128,9 @@ export function CustomCamera(props) {
|
|||
if (cameraRef.current) {
|
||||
cameraRef.current.aspect = size.width / size.height;
|
||||
cameraRef.current.updateProjectionMatrix();
|
||||
setPos(camGroup.current.position);
|
||||
}
|
||||
cameraRef.current.position.copy(new THREE.Vector3(0, 0, 400));
|
||||
//cameraRef.current.position.copy(new THREE.Vector3(0, 0, 400));
|
||||
window.addEventListener("mousedown", handleMouseDown);
|
||||
window.addEventListener("mouseup", handleMouseUp);
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
|
|
@ -137,12 +143,29 @@ export function CustomCamera(props) {
|
|||
|
||||
let lerpedilerp = useRef(0.01);
|
||||
|
||||
function easeIn(t){
|
||||
return t*t;
|
||||
}
|
||||
|
||||
function myLerp(v3Start, v3End, t){
|
||||
return new THREE.Vector3(
|
||||
v3Start.x + (v3End.x - v3Start.x)*t,
|
||||
v3Start.y + (v3End.y - v3Start.y)*t,
|
||||
v3Start.z + (v3End.z - v3Start.z)*t
|
||||
)
|
||||
}
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
cameraRef.current.updateProjectionMatrix();
|
||||
|
||||
if (animate && currObj) {
|
||||
setZoom(false);
|
||||
distance.current =
|
||||
currObj.children[1].geometry.boundingSphere.radius * 2.5;
|
||||
dist.current = currObj.children[1].geometry.boundingSphere.radius * 2.5;
|
||||
//camGroup.current.position.lerp(currObj.position,lerpedilerp.current);
|
||||
//camGroup.current.position.copy(myLerp(pos, currObj.position, 0.5));
|
||||
|
||||
camGroup.current.position.lerp(currObj.position, lerpedilerp.current);
|
||||
cameraRef.current.position.lerp(
|
||||
new THREE.Vector3(
|
||||
|
|
@ -153,31 +176,32 @@ export function CustomCamera(props) {
|
|||
lerpedilerp.current
|
||||
);
|
||||
|
||||
|
||||
|
||||
cameraRef.current.lookAt(currObj.position);
|
||||
camGroup.current.quaternion.copy(globalQuaternion);
|
||||
|
||||
rotate.current = false;
|
||||
lerpedilerp.current *= 1.1;
|
||||
lerpedilerp.current *= 1.08;
|
||||
//console.log(camGroup.current.position.distanceTo(currObj.position));
|
||||
|
||||
if (camGroup.current.position.distanceTo(currObj.position) < 0.2) {
|
||||
if (camGroup.current.position.distanceTo(currObj.position) < 0.3) {
|
||||
currObj.add(camGroup.current);
|
||||
camGroup.current.position.copy(new THREE.Vector3(0, 0, 0), 0.2);
|
||||
|
||||
rotate.current = true;
|
||||
lerpedilerp.current = 0.01;
|
||||
setZoom(true);
|
||||
setAnimate(false);
|
||||
}
|
||||
}
|
||||
if (rotate.current && currObj) {
|
||||
/* cameraRef.current.quaternion.multiply(lastQ.current); */
|
||||
//camGroup.current.rotation.x += 0.005;
|
||||
lerpedilerp.current = 0.01;
|
||||
if (
|
||||
distance.current >
|
||||
currObj.children[1].geometry.boundingSphere.radius * 2.5
|
||||
) {
|
||||
cameraRef.current.position.copy(
|
||||
new THREE.Vector3(0, 0, distance.current)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
if (zoom && cameraRef.current) {
|
||||
cameraRef.current.position.copy(
|
||||
new THREE.Vector3(0, 0, distance.current)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -188,7 +212,7 @@ export function CustomCamera(props) {
|
|||
position={[0, 0, 0]}
|
||||
fov={75}
|
||||
near={0.1}
|
||||
far={10000}
|
||||
far={1000000}
|
||||
/>
|
||||
</group>
|
||||
);
|
||||
14
src/Main.jsx
Normal file
14
src/Main.jsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import SolarSystemScene from "./SolarSystemMain";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<SolarSystemScene />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
160
src/Scene1.jsx
160
src/Scene1.jsx
|
|
@ -1,160 +0,0 @@
|
|||
import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
|
||||
import { shaderMaterial } from "@react-three/drei";
|
||||
import React, { useRef, Suspense } from "react";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
|
||||
const WaveShaderMaterial = shaderMaterial(
|
||||
//Uniform
|
||||
{
|
||||
uTime: 0,
|
||||
uColor: new THREE.Color(0.0, 0.0, 0.0),
|
||||
},
|
||||
//Vertex Shader
|
||||
glsl`
|
||||
precision mediump float;
|
||||
|
||||
uniform float uTime;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
vec3 mod289(vec3 x) {
|
||||
return x - floor(x * (1.0 / 289.0)) * 289.0;
|
||||
}
|
||||
|
||||
vec4 mod289(vec4 x) {
|
||||
return x - floor(x * (1.0 / 289.0)) * 289.0;
|
||||
}
|
||||
|
||||
vec4 permute(vec4 x) {
|
||||
return mod289(((x*34.0)+10.0)*x);
|
||||
}
|
||||
|
||||
vec4 taylorInvSqrt(vec4 r)
|
||||
{
|
||||
return 1.79284291400159 - 0.85373472095314 * r;
|
||||
}
|
||||
|
||||
float snoise(vec3 v)
|
||||
{
|
||||
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
|
||||
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
|
||||
|
||||
// First corner
|
||||
vec3 i = floor(v + dot(v, C.yyy) );
|
||||
vec3 x0 = v - i + dot(i, C.xxx) ;
|
||||
|
||||
// Other corners
|
||||
vec3 g = step(x0.yzx, x0.xyz);
|
||||
vec3 l = 1.0 - g;
|
||||
vec3 i1 = min( g.xyz, l.zxy );
|
||||
vec3 i2 = max( g.xyz, l.zxy );
|
||||
|
||||
// x0 = x0 - 0.0 + 0.0 * C.xxx;
|
||||
// x1 = x0 - i1 + 1.0 * C.xxx;
|
||||
// x2 = x0 - i2 + 2.0 * C.xxx;
|
||||
// x3 = x0 - 1.0 + 3.0 * C.xxx;
|
||||
vec3 x1 = x0 - i1 + C.xxx;
|
||||
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
|
||||
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
|
||||
|
||||
// Permutations
|
||||
i = mod289(i);
|
||||
vec4 p = permute( permute( permute(
|
||||
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
|
||||
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
|
||||
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
|
||||
|
||||
// Gradients: 7x7 points over a square, mapped onto an octahedron.
|
||||
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
|
||||
float n_ = 0.142857142857; // 1.0/7.0
|
||||
vec3 ns = n_ * D.wyz - D.xzx;
|
||||
|
||||
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
|
||||
|
||||
vec4 x_ = floor(j * ns.z);
|
||||
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
|
||||
|
||||
vec4 x = x_ *ns.x + ns.yyyy;
|
||||
vec4 y = y_ *ns.x + ns.yyyy;
|
||||
vec4 h = 1.0 - abs(x) - abs(y);
|
||||
|
||||
vec4 b0 = vec4( x.xy, y.xy );
|
||||
vec4 b1 = vec4( x.zw, y.zw );
|
||||
|
||||
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
|
||||
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
|
||||
vec4 s0 = floor(b0)*2.0 + 1.0;
|
||||
vec4 s1 = floor(b1)*2.0 + 1.0;
|
||||
vec4 sh = -step(h, vec4(0.0));
|
||||
|
||||
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
|
||||
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
|
||||
|
||||
vec3 p0 = vec3(a0.xy,h.x);
|
||||
vec3 p1 = vec3(a0.zw,h.y);
|
||||
vec3 p2 = vec3(a1.xy,h.z);
|
||||
vec3 p3 = vec3(a1.zw,h.w);
|
||||
|
||||
//Normalise gradients
|
||||
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
|
||||
p0 *= norm.x;
|
||||
p1 *= norm.y;
|
||||
p2 *= norm.z;
|
||||
p3 *= norm.w;
|
||||
|
||||
// Mix final noise value
|
||||
vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
|
||||
m = m * m;
|
||||
return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
|
||||
dot(p2,x2), dot(p3,x3) ) );
|
||||
}
|
||||
|
||||
void main(){
|
||||
vUv = uv;
|
||||
|
||||
vec3 pos = position;
|
||||
float noiseFreq = 0.25;
|
||||
float noiseAmp = 0.25;
|
||||
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
|
||||
pos.z += snoise(noisePos) * noiseAmp;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
|
||||
}`,
|
||||
//Fragment Shader
|
||||
glsl`
|
||||
precision mediump float;
|
||||
|
||||
uniform vec3 uColor;
|
||||
uniform float uTime;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
void main(){
|
||||
gl_FragColor = vec4(cos(vUv.x - uTime*2.0) * uColor, 1.0);
|
||||
}`
|
||||
);
|
||||
|
||||
extend({ WaveShaderMaterial });
|
||||
|
||||
const Wave = () => {
|
||||
const ref = useRef();
|
||||
useFrame(({ clock }) => (ref.current.uTime = clock.getElapsedTime()));
|
||||
return (
|
||||
<mesh>
|
||||
<planeGeometry args={[0.4, 0.6, 16, 16]} />
|
||||
<waveShaderMaterial uColor={"lightblue"} ref={ref} />
|
||||
</mesh>
|
||||
);
|
||||
};
|
||||
|
||||
const Scene = () => {
|
||||
return (
|
||||
<Canvas camera={{ fov: 10 }}>
|
||||
<Suspense fallback={null}>
|
||||
<Wave />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
);
|
||||
};
|
||||
|
||||
export default Scene;
|
||||
160
src/Scene2.jsx
160
src/Scene2.jsx
|
|
@ -1,160 +0,0 @@
|
|||
import { Canvas, extend, useFrame } from "@react-three/fiber";
|
||||
import { shaderMaterial } from "@react-three/drei";
|
||||
import React, { useRef, Suspense } from "react";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
|
||||
const WaveShaderMaterial = shaderMaterial(
|
||||
//Uniform
|
||||
{
|
||||
uTime: 0,
|
||||
uColor: new THREE.Color(0.0, 0.0, 0.0),
|
||||
},
|
||||
//Vertex Shader
|
||||
glsl`
|
||||
precision mediump float;
|
||||
|
||||
uniform float uTime;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
vec3 mod289(vec3 x) {
|
||||
return x - floor(x * (1.0 / 289.0)) * 289.0;
|
||||
}
|
||||
|
||||
vec4 mod289(vec4 x) {
|
||||
return x - floor(x * (1.0 / 289.0)) * 289.0;
|
||||
}
|
||||
|
||||
vec4 permute(vec4 x) {
|
||||
return mod289(((x*34.0)+10.0)*x);
|
||||
}
|
||||
|
||||
vec4 taylorInvSqrt(vec4 r)
|
||||
{
|
||||
return 1.79284291400159 - 0.85373472095314 * r;
|
||||
}
|
||||
|
||||
float snoise(vec3 v)
|
||||
{
|
||||
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
|
||||
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
|
||||
|
||||
// First corner
|
||||
vec3 i = floor(v + dot(v, C.yyy) );
|
||||
vec3 x0 = v - i + dot(i, C.xxx) ;
|
||||
|
||||
// Other corners
|
||||
vec3 g = step(x0.yzx, x0.xyz);
|
||||
vec3 l = 1.0 - g;
|
||||
vec3 i1 = min( g.xyz, l.zxy );
|
||||
vec3 i2 = max( g.xyz, l.zxy );
|
||||
|
||||
// x0 = x0 - 0.0 + 0.0 * C.xxx;
|
||||
// x1 = x0 - i1 + 1.0 * C.xxx;
|
||||
// x2 = x0 - i2 + 2.0 * C.xxx;
|
||||
// x3 = x0 - 1.0 + 3.0 * C.xxx;
|
||||
vec3 x1 = x0 - i1 + C.xxx;
|
||||
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
|
||||
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
|
||||
|
||||
// Permutations
|
||||
i = mod289(i);
|
||||
vec4 p = permute( permute( permute(
|
||||
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
|
||||
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
|
||||
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
|
||||
|
||||
// Gradients: 7x7 points over a square, mapped onto an octahedron.
|
||||
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
|
||||
float n_ = 0.142857142857; // 1.0/7.0
|
||||
vec3 ns = n_ * D.wyz - D.xzx;
|
||||
|
||||
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
|
||||
|
||||
vec4 x_ = floor(j * ns.z);
|
||||
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
|
||||
|
||||
vec4 x = x_ *ns.x + ns.yyyy;
|
||||
vec4 y = y_ *ns.x + ns.yyyy;
|
||||
vec4 h = 1.0 - abs(x) - abs(y);
|
||||
|
||||
vec4 b0 = vec4( x.xy, y.xy );
|
||||
vec4 b1 = vec4( x.zw, y.zw );
|
||||
|
||||
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
|
||||
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
|
||||
vec4 s0 = floor(b0)*2.0 + 1.0;
|
||||
vec4 s1 = floor(b1)*2.0 + 1.0;
|
||||
vec4 sh = -step(h, vec4(0.0));
|
||||
|
||||
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
|
||||
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
|
||||
|
||||
vec3 p0 = vec3(a0.xy,h.x);
|
||||
vec3 p1 = vec3(a0.zw,h.y);
|
||||
vec3 p2 = vec3(a1.xy,h.z);
|
||||
vec3 p3 = vec3(a1.zw,h.w);
|
||||
|
||||
//Normalise gradients
|
||||
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
|
||||
p0 *= norm.x;
|
||||
p1 *= norm.y;
|
||||
p2 *= norm.z;
|
||||
p3 *= norm.w;
|
||||
|
||||
// Mix final noise value
|
||||
vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
|
||||
m = m * m;
|
||||
return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
|
||||
dot(p2,x2), dot(p3,x3) ) );
|
||||
}
|
||||
|
||||
void main(){
|
||||
vUv = uv;
|
||||
|
||||
vec3 pos = position;
|
||||
float noiseFreq = 0.25;
|
||||
float noiseAmp = 0.25;
|
||||
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
|
||||
pos.z += snoise(noisePos) * noiseAmp;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
|
||||
}`,
|
||||
//Fragment Shader
|
||||
glsl`
|
||||
precision mediump float;
|
||||
|
||||
uniform vec3 uColor;
|
||||
uniform float uTime;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
void main(){
|
||||
gl_FragColor = vec4(cos(vUv.x + uTime*2.0) * uColor, 1.0);
|
||||
}`
|
||||
);
|
||||
|
||||
extend({ WaveShaderMaterial });
|
||||
|
||||
const Wave = () => {
|
||||
const ref = useRef();
|
||||
useFrame(({ clock }) => (ref.current.uTime = clock.getElapsedTime()));
|
||||
return (
|
||||
<mesh>
|
||||
<planeGeometry args={[0.4, 0.6, 16, 16]} />
|
||||
<waveShaderMaterial uColor={"red"} ref={ref} />
|
||||
</mesh>
|
||||
);
|
||||
};
|
||||
|
||||
const Scene1 = () => {
|
||||
return (
|
||||
<Canvas camera={{ fov: 10 }}>
|
||||
<Suspense fallback={null}>
|
||||
<Wave />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
);
|
||||
};
|
||||
|
||||
export default Scene1;
|
||||
109
src/Scene4.jsx
109
src/Scene4.jsx
|
|
@ -1,109 +0,0 @@
|
|||
import {
|
||||
Canvas,
|
||||
extend,
|
||||
useFrame,
|
||||
useLoader,
|
||||
useThree,
|
||||
} from "@react-three/fiber";
|
||||
import {
|
||||
OrbitControls,
|
||||
} from "@react-three/drei";
|
||||
import React, { useRef, Suspense, useLayoutEffect, useState, useEffect } from "react";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
|
||||
const Planet = ({planetData}) => {
|
||||
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
|
||||
|
||||
const colorMap = useLoader(TextureLoader, planetData.colorMap);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
console.log(planetData.colorMap)
|
||||
//get props
|
||||
|
||||
//setup mesh
|
||||
|
||||
//load textures
|
||||
|
||||
//set ready to true
|
||||
})
|
||||
|
||||
useThree(() => {
|
||||
|
||||
})
|
||||
|
||||
return (
|
||||
<mesh>
|
||||
<sphereGeometry args={[planetData.Radius / 6000, 100, 100]}/>
|
||||
<meshPhongMaterial
|
||||
map={colorMap}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
|
||||
const PlanetScene = () => {
|
||||
const [planetData, setPlanetData] = useState( {});
|
||||
const [planetDataReady, setPlanetDataReady] = useState(false)
|
||||
useLayoutEffect(() => {
|
||||
//get planet data
|
||||
const fetchPlanetInfo = async () => {
|
||||
fetch(`http://127.0.0.1:8000/planetInfo/Earth`).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`This is an HTTP error: The status is ${response.status}`
|
||||
);
|
||||
}
|
||||
//setLoading(true);
|
||||
response
|
||||
.json()
|
||||
.then((data) => {
|
||||
fetch(`http://127.0.0.1:8000/planetData/Earth`).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`This is an HTTP error: The status is ${response.status}`
|
||||
);
|
||||
}
|
||||
//setLoading(true);
|
||||
response
|
||||
.json()
|
||||
.then((data2) => {
|
||||
setPlanetData(Object.assign(data, data2));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
}).finally(() => {
|
||||
setPlanetDataReady(true);
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
});
|
||||
|
||||
};
|
||||
fetchPlanetInfo();
|
||||
}, []);
|
||||
return (
|
||||
<Canvas style={{ backgroundColor: "white" }}>
|
||||
<Suspense fallback={null}>
|
||||
{planetDataReady?<Planet planetData = {planetData}/>:undefined}
|
||||
<OrbitControls enablePan={false} />
|
||||
<ambientLight intensity={0.5} />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default PlanetScene;
|
||||
|
||||
|
|
@ -1,80 +1,71 @@
|
|||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||||
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
|
||||
import React, {
|
||||
Suspense,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
createContext,
|
||||
useContext,
|
||||
forwardRef,
|
||||
memo,
|
||||
useMemo,
|
||||
} from "react";
|
||||
import { Earth } from "./planets/earth.jsx";
|
||||
import { Mars } from "./planets/mars.jsx";
|
||||
import { Jupiter } from "./planets/jupiter.jsx";
|
||||
import { Saturn } from "./planets/saturn.jsx";
|
||||
import { Mercury } from "./planets/mercury.jsx";
|
||||
import { Venus } from "./planets/venus.jsx";
|
||||
import { Neptune } from "./planets/neptune.jsx";
|
||||
import { Uranus } from "./planets/uranus.jsx";
|
||||
import { Sun } from "./planets/sun.jsx";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import { Html } from "@react-three/drei";
|
||||
import { useState, useRef, createContext, useContext } from "react";
|
||||
import * as THREE from "three";
|
||||
import { PlanetInfo } from "./planetInfo.jsx";
|
||||
import { Skybox } from "./skybox.jsx";
|
||||
import { ReactPropTypes } from "react";
|
||||
import { MyContext } from "./Scene3.jsx";
|
||||
import { MyContext } from "./SolarSystemMain.jsx";
|
||||
import Planet from "./planets/planet.jsx";
|
||||
import Sun from "./planets/sun.jsx";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
export const PlanetOverlayContext = createContext();
|
||||
|
||||
import { Planet } from "./planet.jsx";
|
||||
|
||||
export const SharedPlanetState = ({ initialData }) => {
|
||||
export const SharedPlanetState = ({ planetData, linePos }) => {
|
||||
const distanceScaleFactor = 1000000;
|
||||
const { customData } = useContext(MyContext);
|
||||
|
||||
const lastGetRequestRef = useRef(0);
|
||||
const currentPosIndexRef = useRef(0);
|
||||
const getNewDataThresholdRef = 5000;
|
||||
const currentSpeedRef = useRef(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [positions, setPositions] = useState(null);
|
||||
const [realPos, setRealPos] = useState(null);
|
||||
let first = useRef(true);
|
||||
|
||||
const planetPositionIndex = useRef(0);
|
||||
const lastPositionUpdate = useRef(0);
|
||||
const lastRealPositionUpdate = useRef(0);
|
||||
|
||||
let [nameVis, setNameVis] = useState("visible");
|
||||
let [iconVis, setIconVis] = useState("visible");
|
||||
let [pathVis, setPathVis] = useState("visible");
|
||||
|
||||
const handleVisibility = () => {
|
||||
if (nameVis == "visible" && iconVis == "visible") {
|
||||
if (nameVis == "visible" && iconVis == "visible" && pathVis == "visible") {
|
||||
setNameVis("hidden");
|
||||
} else if (nameVis == "hidden" && iconVis == "visible") {
|
||||
} else if (nameVis == "hidden" && iconVis == "visible" && pathVis == "visible") {
|
||||
setIconVis("hidden");
|
||||
} else if (nameVis == "hidden" && iconVis == "hidden") {
|
||||
} else if (nameVis == "hidden" && iconVis == "hidden" && pathVis == "visible") {
|
||||
setPathVis("hidden")
|
||||
} else if(nameVis == "hidden" && iconVis == "hidden" && pathVis == "hidden"){
|
||||
setIconVis("visible");
|
||||
setNameVis("visible");
|
||||
setPathVis("visible")
|
||||
}
|
||||
};
|
||||
customData.current["handleVisibility"] = handleVisibility;
|
||||
|
||||
const handleReset = () => {
|
||||
setSpeed(-1);
|
||||
console.log("reset");
|
||||
planetPositionIndex.current = 0;
|
||||
lastRealPositionUpdate.current = 0;
|
||||
getRealTimePos();
|
||||
};
|
||||
customData.current["handleReset"] = handleReset;
|
||||
|
||||
//set speed (timeinterval between positions 60000ms*speed)
|
||||
const [speed, setSpeed] = useState(1);
|
||||
const [speed, setSpeed] = useState(-1);
|
||||
const updateSpeed = (newSpeed) => {
|
||||
setSpeed(newSpeed);
|
||||
setSpeedChanged(true);
|
||||
console.log(speed);
|
||||
};
|
||||
customData.current["updateSpeed"] = updateSpeed;
|
||||
|
||||
//get position data and reset if necessary
|
||||
const dateTime = useRef(new Date(Date.now()));
|
||||
const [speedChanged, setSpeedChanged] = useState();
|
||||
|
||||
function updatePlanetPosition(group, posArr, lineArr) {
|
||||
if (true && planetPositionIndex.current < posArr.length) {
|
||||
function updatePlanetPosition(group, posArr, lineArr, realPos) {
|
||||
if (
|
||||
!loading &&
|
||||
planetPositionIndex.current < posArr.length &&
|
||||
speed != -1
|
||||
) {
|
||||
group.current.position.set(
|
||||
Number(
|
||||
posArr[planetPositionIndex.current].position.x / distanceScaleFactor
|
||||
|
|
@ -86,191 +77,154 @@ export const SharedPlanetState = ({ initialData }) => {
|
|||
posArr[planetPositionIndex.current].position.z / distanceScaleFactor
|
||||
)
|
||||
);
|
||||
if (speed > 0) planetPositionIndex.current += Number(speed);
|
||||
lineArr.current.push(
|
||||
new THREE.Vector3(
|
||||
Number(
|
||||
posArr[planetPositionIndex.current].position.x / distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
posArr[planetPositionIndex.current].position.y / distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
posArr[planetPositionIndex.current].position.z / distanceScaleFactor
|
||||
|
||||
//realtime
|
||||
|
||||
customData.current.setDate(
|
||||
new Date(positions[199][planetPositionIndex.current].date)
|
||||
);
|
||||
if (speed > 0) {
|
||||
lineArr.current.push(
|
||||
new THREE.Vector3(
|
||||
Number(
|
||||
posArr[planetPositionIndex.current].position.x /
|
||||
distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
posArr[planetPositionIndex.current].position.y /
|
||||
distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
posArr[planetPositionIndex.current].position.z /
|
||||
distanceScaleFactor
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
//realtime
|
||||
if (speed == -1) {
|
||||
group.current.position.set(
|
||||
Number(realPos.position.x / distanceScaleFactor),
|
||||
Number(realPos.position.y / distanceScaleFactor),
|
||||
Number(realPos.position.z / distanceScaleFactor)
|
||||
);
|
||||
customData.current.setDate(
|
||||
new Date(realPos.date)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const getPositions = (planet, setPosState, oldState) => {
|
||||
//if speed was changed delete old data an get new data
|
||||
useFrame(({ clock }) => {
|
||||
if (first.current) {
|
||||
getAllPositions();
|
||||
getRealTimePos();
|
||||
first.current = false;
|
||||
}
|
||||
if (speed > 0 && !loading) planetPositionIndex.current += Number(speed);
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
const timeSinceLastRealUpdate = clock.elapsedTime - lastRealPositionUpdate.current;
|
||||
if(timeSinceLastRealUpdate > 60) {
|
||||
lastRealPositionUpdate.current = clock.elapsedTime;
|
||||
getRealTimePos()
|
||||
}
|
||||
if (timeSinceLastUpdate >= 1 && !loading && speed > 0) {
|
||||
|
||||
//???????Why when i set the speed to 0 it doesnt immidiatly stop? good enough for know
|
||||
/* if (speedChanged) {
|
||||
//console.log(oldState.length);
|
||||
//console.log(posCounter);
|
||||
setPosState(oldState.slice(0, 500));
|
||||
getAllPositions();
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
}
|
||||
});
|
||||
|
||||
//console.log("here" + speedChanged);
|
||||
} */
|
||||
|
||||
if (oldState.length - planetPositionIndex.current < 15000) {
|
||||
//console.log("there" + speedChanged);
|
||||
setSpeedChanged(false);
|
||||
if (oldState.length > 0 && speed > 0) {
|
||||
dateTime.current = new Date(
|
||||
oldState[oldState.length - 1].date
|
||||
).toUTCString();
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
fetch(
|
||||
`http://127.0.0.1:8000/duration/${planet}` +
|
||||
`?date=${dateTime.current}&speed=${speed}`
|
||||
).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`This is an HTTP error: The status is ${response.status}`
|
||||
);
|
||||
}
|
||||
loadingRef.current = true;
|
||||
response
|
||||
.json()
|
||||
.then((data) => {
|
||||
setPosState(oldState.concat(data));
|
||||
setData(data);
|
||||
dataRef.current = data;
|
||||
errRef.current = null;
|
||||
})
|
||||
.catch((err) => {
|
||||
setData(null);
|
||||
dataRef.current = null;
|
||||
errRef.current = err.message;
|
||||
})
|
||||
.finally(() => {
|
||||
loadingRef.current = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
fetchData();
|
||||
const getAllPositions = () => {
|
||||
if (positions && positions[199].length > 0 && speed > 0) {
|
||||
dateTime.current = new Date(
|
||||
positions[199][positions[199].length - 1].date
|
||||
).toUTCString();
|
||||
}
|
||||
|
||||
//console.log(oldState.length);
|
||||
};
|
||||
|
||||
const dataRef = useRef(null);
|
||||
const loadingRef = useRef(false);
|
||||
const errRef = useRef(null);
|
||||
const [data, setData] = useState(null);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
//console.log(initialData);
|
||||
/* handlePositionIndex();
|
||||
const fetchData = async () => {
|
||||
fetch(`http://127.0.0.1:8000/duration`).then((response) => {
|
||||
fetch(
|
||||
`http://127.0.0.1:8000/duration` + `?date=${dateTime.current}`
|
||||
).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`This is an HTTP error: The status is ${response.status}`
|
||||
);
|
||||
}
|
||||
loadingRef.current = true;
|
||||
response
|
||||
.json()
|
||||
.then((data) => {
|
||||
setData(data);
|
||||
dataRef.current = data;
|
||||
errRef.current = null;
|
||||
})
|
||||
.catch((err) => {
|
||||
setData(null);
|
||||
dataRef.current = null;
|
||||
errRef.current = err.message;
|
||||
if (!positions) {
|
||||
setPositions(data);
|
||||
} else {
|
||||
let obj = new Object();
|
||||
for (let key in positions) {
|
||||
obj[key] = positions[key].concat(data[key]);
|
||||
}
|
||||
setPositions(obj);
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
loadingRef.current = false;
|
||||
setLoading(false);
|
||||
});
|
||||
});
|
||||
};
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastGetRequestRef.current;
|
||||
if (timeSinceLastUpdate >= 5) {
|
||||
fetchData();
|
||||
console.log(dataRef.current);
|
||||
lastGetRequestRef.current = clock.elapsedTime;
|
||||
} */
|
||||
});
|
||||
fetchData();
|
||||
};
|
||||
|
||||
function handlePositionIndex() {
|
||||
currentPosIndexRef.current++;
|
||||
const getRealTimePos = () => {
|
||||
const fetchData = async () => {
|
||||
fetch(`http://127.0.0.1:8000/now`).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`This is an HTTP error: The status is ${response.status}`
|
||||
);
|
||||
}
|
||||
response
|
||||
.json()
|
||||
.then((data) => {
|
||||
setRealPos(data);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
//setLoading(false);
|
||||
});
|
||||
});
|
||||
};
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const planets = [];
|
||||
for (let planet of planetData) {
|
||||
planets.push(
|
||||
<Planet
|
||||
key={planet._id}
|
||||
planetData={planet}
|
||||
setPosition={updatePlanetPosition}
|
||||
positions={positions && positions[planet._id]}
|
||||
realPos={realPos && realPos[planet._id]}
|
||||
linePos={linePos && linePos[planet._id]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed }}>
|
||||
{initialData && (
|
||||
<>
|
||||
<Earth
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
speedChanged={speedChanged}
|
||||
data={initialData["399"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<Mars
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
speedChanged={speedChanged}
|
||||
data={initialData["499"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<Jupiter
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
data={initialData["599"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<Saturn
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
data={initialData["699"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<Mercury
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
data={initialData["199"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
|
||||
<Venus
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
data={initialData["299"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<Neptune
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
data={initialData["899"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<Uranus
|
||||
speed={speed}
|
||||
getPosition={getPositions}
|
||||
data={initialData["799"]}
|
||||
setPosition={updatePlanetPosition}
|
||||
/>
|
||||
<Sun />
|
||||
</>
|
||||
)}
|
||||
{false && (
|
||||
<Planet
|
||||
posArr={data["199"]}
|
||||
planetPosIndex={currentPosIndexRef}
|
||||
speed={speed}
|
||||
/>
|
||||
<PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed, pathVis }}>
|
||||
{!loading && planets}
|
||||
{loading && (
|
||||
<Html>
|
||||
<h1 style={{color:"white"}}>Loading...</h1>
|
||||
</Html>
|
||||
)}
|
||||
<Sun />
|
||||
</PlanetOverlayContext.Provider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
SharedPlanetState.propTypes = {
|
||||
planetData: PropTypes.array,
|
||||
linePos: PropTypes.object
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,29 +1,26 @@
|
|||
import { Canvas } from "@react-three/fiber";
|
||||
import React, {
|
||||
import {
|
||||
Suspense,
|
||||
useRef,
|
||||
createContext,
|
||||
memo,
|
||||
useLayoutEffect,
|
||||
useState,
|
||||
useEffect,
|
||||
} from "react";
|
||||
|
||||
import { ScreenOverlay } from "./omnioverlay.jsx";
|
||||
import { ScreenOverlay } from "./planets/omnioverlay.jsx";
|
||||
import { SharedPlanetState } from "./SharedPlanetState.jsx";
|
||||
import { Skybox } from "./skybox.jsx";
|
||||
import { CustomCamera } from "./customCamera.jsx";
|
||||
import { Skybox } from "./Skybox.jsx";
|
||||
import { CustomCamera } from "./CustomCamera.jsx";
|
||||
|
||||
export const MyContext = createContext();
|
||||
|
||||
const SolarSystemScene = () => {
|
||||
const controls = useRef();
|
||||
let customData = useRef({});
|
||||
const [initialData, setInitialData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [pinfo, setPinfo] = useState(null);
|
||||
const [err, setErr] = useState(null);
|
||||
//const { progress } = useProgress();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [linePos, setLinePos] = useState(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const fetchPlanetInfo = async () => {
|
||||
|
|
@ -33,31 +30,23 @@ const SolarSystemScene = () => {
|
|||
`This is an HTTP error: The status is ${response.status}`
|
||||
);
|
||||
}
|
||||
//setLoading(true);
|
||||
setLoading(true);
|
||||
response
|
||||
.json()
|
||||
.then((data) => {
|
||||
setPinfo(data);
|
||||
setErr(null);
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch(() => {
|
||||
setPinfo(null);
|
||||
setErr(err.message);
|
||||
})
|
||||
.finally(() => {
|
||||
//setLoading(false);
|
||||
setLoading(false);
|
||||
});
|
||||
});
|
||||
};
|
||||
fetchPlanetInfo();
|
||||
const currDate = new Date(Date.now());
|
||||
currDate.setSeconds(0);
|
||||
currDate.setMilliseconds(0);
|
||||
console.log("useEffect init");
|
||||
const fetchData = async () => {
|
||||
fetch(
|
||||
`http://127.0.0.1:8000/duration?date=${currDate.toISOString()}`
|
||||
).then((response) => {
|
||||
const fetchLinePos = async () => {
|
||||
fetch(`http://127.0.0.1:8000/duration/line`).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`This is an HTTP error: The status is ${response.status}`
|
||||
|
|
@ -67,19 +56,19 @@ const SolarSystemScene = () => {
|
|||
response
|
||||
.json()
|
||||
.then((data) => {
|
||||
setInitialData(data);
|
||||
setErr(null);
|
||||
|
||||
setLinePos(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
setInitialData(null);
|
||||
setErr(err.message);
|
||||
.catch(() => {
|
||||
setLinePos(null)
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
});
|
||||
};
|
||||
fetchData();
|
||||
//fetchLinePos();
|
||||
fetchPlanetInfo();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -91,22 +80,22 @@ const SolarSystemScene = () => {
|
|||
{!loading && (
|
||||
<>
|
||||
<MyContext.Provider value={{ controls, customData }}>
|
||||
{!loading && <ScreenOverlay planetInfo={pinfo} />}
|
||||
<ScreenOverlay planetInfo={pinfo} />
|
||||
|
||||
{loading && <div className="loadingScreen">Loading</div>}
|
||||
{!loading && (
|
||||
{true && (
|
||||
<Canvas
|
||||
/*camera={{
|
||||
position: [0, 0, 100],
|
||||
fov: 75,
|
||||
near: 0.1,
|
||||
far: 1000,
|
||||
}}*/
|
||||
camera={{
|
||||
position: [0, 0, 100],
|
||||
fov: 75,
|
||||
near: 0.1,
|
||||
far: 10000000,
|
||||
}}
|
||||
>
|
||||
<CustomCamera />
|
||||
{true && <CustomCamera />}
|
||||
<Skybox />
|
||||
<ambientLight intensity={0.5} />
|
||||
<SharedPlanetState initialData={initialData} />
|
||||
<ambientLight intensity={0.025} />
|
||||
<pointLight position={[0, 0, 0]} />
|
||||
<SharedPlanetState planetData={pinfo} linePos={linePos}/>
|
||||
</Canvas>
|
||||
)}
|
||||
</MyContext.Provider>
|
||||
|
|
@ -116,6 +105,4 @@ const SolarSystemScene = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const Smemo = memo(SolarSystemScene, true);
|
||||
|
||||
export default Smemo;
|
||||
export default SolarSystemScene;
|
||||
24
src/main.jsx
24
src/main.jsx
|
|
@ -1,24 +0,0 @@
|
|||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Scene from "./Scene1";
|
||||
import Scene1 from "./Scene2";
|
||||
import Scene4 from "./Scene4"
|
||||
import SolarSystemScene from "./Scene3";
|
||||
import Smemo from "./Scene3";
|
||||
import React, { useEffect, useReducer, useState, useRef } from "react";
|
||||
import SunScene from "./sunscene";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Scene />} />
|
||||
<Route path="next" element={<Scene1 />} />
|
||||
<Route path="solarsystem" element={<Smemo />} />
|
||||
<Route path="sun" element={<SunScene />} />
|
||||
<Route path="planet" element={<Scene4 />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
99
src/path.jsx
99
src/path.jsx
|
|
@ -1,99 +0,0 @@
|
|||
import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
|
||||
import { shaderMaterial, OrbitControls, Line } from "@react-three/drei";
|
||||
import React, {
|
||||
useRef,
|
||||
Suspense,
|
||||
useLayoutEffect,
|
||||
useEffect,
|
||||
useState,
|
||||
useContext,
|
||||
} from "react";
|
||||
import { useControls } from "leva";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import { PlanetOverlay } from "./planetOverlay";
|
||||
import { PlanetOverlayContext } from "./SharedPlanetState";
|
||||
|
||||
export const PlanetPath = ({
|
||||
positions,
|
||||
linePos,
|
||||
color,
|
||||
datas,
|
||||
lineLength,
|
||||
lineAt,
|
||||
planet,
|
||||
}) => {
|
||||
const lineref = useRef();
|
||||
const { speed } = useContext(PlanetOverlayContext);
|
||||
|
||||
useLayoutEffect(() => {});
|
||||
|
||||
useEffect(() => {});
|
||||
|
||||
/* const cutPath = (path, maxLength) => {
|
||||
if (getLength(path) > maxLength) {
|
||||
path.shift();
|
||||
}
|
||||
};*/
|
||||
|
||||
//from chatgpt very nice :D
|
||||
const cutPath = (path, maxLength) => {
|
||||
let length = getLength(path);
|
||||
while (length > maxLength && path.length >= 2) {
|
||||
const firstPoint = path[0];
|
||||
const secondPoint = path[1];
|
||||
const segmentLength = firstPoint.distanceTo(secondPoint);
|
||||
if (segmentLength > maxLength) {
|
||||
// If the first segment is longer than the maximum length,
|
||||
// split it into multiple segments of the maximum length.
|
||||
const numSegments = Math.ceil(segmentLength / maxLength);
|
||||
const segmentDirection = secondPoint
|
||||
.clone()
|
||||
.sub(firstPoint)
|
||||
.normalize();
|
||||
const segmentLength = segmentLength / numSegments;
|
||||
const newPoints = [firstPoint];
|
||||
for (let i = 1; i < numSegments; i++) {
|
||||
const newPoint = firstPoint
|
||||
.clone()
|
||||
.add(segmentDirection.clone().multiplyScalar(segmentLength * i));
|
||||
newPoints.push(newPoint);
|
||||
}
|
||||
newPoints.push(secondPoint);
|
||||
path.splice(0, 2, ...newPoints);
|
||||
length = getLength(path);
|
||||
} else {
|
||||
path.shift();
|
||||
length -= segmentLength;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function getLength(arrV3) {
|
||||
let sum = 0;
|
||||
for (var i = 0; i < arrV3.length - 1; i += 2) {
|
||||
sum += arrV3[i].distanceTo(arrV3[i + 1]);
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
|
||||
const lineGeometry = new THREE.BufferGeometry();
|
||||
useFrame(() => {
|
||||
if (speed === 0) {
|
||||
linePos.length = 0;
|
||||
return;
|
||||
}
|
||||
lineref.current.geometry.setFromPoints(linePos);
|
||||
lineref.current.geometry.setDrawRange(0, Infinity);
|
||||
cutPath(linePos, lineLength);
|
||||
//console.log(getLength(linePos));
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<line ref={lineref} geometry={lineGeometry} frustumCulled={false}>
|
||||
<lineBasicMaterial color={color} />
|
||||
</line>
|
||||
</>
|
||||
);
|
||||
};
|
||||
165
src/planet.jsx
165
src/planet.jsx
|
|
@ -1,165 +0,0 @@
|
|||
import {
|
||||
Canvas,
|
||||
extend,
|
||||
useFrame,
|
||||
useLoader,
|
||||
useThree,
|
||||
} from "@react-three/fiber";
|
||||
import {
|
||||
shaderMaterial,
|
||||
OrbitControls,
|
||||
Line,
|
||||
Html,
|
||||
Text,
|
||||
} from "@react-three/drei";
|
||||
import React, {
|
||||
useRef,
|
||||
Suspense,
|
||||
useLayoutEffect,
|
||||
useState,
|
||||
useEffect,
|
||||
useContext,
|
||||
} from "react";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import {
|
||||
Selection,
|
||||
Select,
|
||||
EffectComposer,
|
||||
Outline,
|
||||
Scanline,
|
||||
} from "@react-three/postprocessing";
|
||||
import "./styles.css";
|
||||
|
||||
import { PlanetOverlay } from "./planetOverlay";
|
||||
import { PlanetInfo } from "./planetInfo";
|
||||
import { PlanetPath } from "./path";
|
||||
import { MyContext } from "./Scene3";
|
||||
import { PlanetOverlayContext } from "./SharedPlanetState";
|
||||
|
||||
export const Planet = (props) => {
|
||||
const distanceScaleFactor = 1000000;
|
||||
//These are the props i need
|
||||
let allPosArr = useRef([]);
|
||||
|
||||
let speed = props.speed;
|
||||
const lineArr = useRef([]);
|
||||
const line = useRef();
|
||||
const clouds = useRef("clouds");
|
||||
const earth = useRef();
|
||||
const group = useRef();
|
||||
|
||||
//let planetPositionIndex = props.planetPosIndex;
|
||||
let planetPositionIndex = useRef(0);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.name = props.planetData.name;
|
||||
group.current.userData.nearOvOp = props.planetData.nearOvOp;
|
||||
group.current.userData.scolor = props.planetData.scolor;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
allPosArr.current = allPosArr.current.concat(props.posArr);
|
||||
});
|
||||
|
||||
useFrame(() => {
|
||||
//console.log(allPosArr.current.length);
|
||||
//console.log("arrlength" + posArr.length);
|
||||
clouds.current.rotation.y += 0.00025;
|
||||
earth.current.rotation.y += 0.00015;
|
||||
|
||||
//if speed is 0 set the date to current date get from posArr
|
||||
//search for current date in posArr and set planetPositionIndex
|
||||
|
||||
//if speed > 0 update positions
|
||||
if (
|
||||
true &&
|
||||
planetPositionIndex.current < allPosArr.current.length &&
|
||||
allPosArr.current.length > 0 &&
|
||||
speed > 0
|
||||
) {
|
||||
console.log("herer");
|
||||
group.current.position.set(
|
||||
Number(
|
||||
allPosArr.current[planetPositionIndex.current].x / distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
allPosArr.current[planetPositionIndex.current].y / distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
allPosArr.current[planetPositionIndex.current].z / distanceScaleFactor
|
||||
)
|
||||
);
|
||||
if (speed > 0) planetPositionIndex.current += Number(1);
|
||||
lineArr.current.push(
|
||||
new THREE.Vector3(
|
||||
Number(
|
||||
allPosArr.current[planetPositionIndex.current].x /
|
||||
distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
allPosArr.current[planetPositionIndex.current].y /
|
||||
distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
allPosArr.current[planetPositionIndex.current].z /
|
||||
distanceScaleFactor
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
|
||||
const bump = useLoader(TextureLoader, "../img/earth/earth_bump_1k.jpg");
|
||||
const spec = useLoader(
|
||||
TextureLoader,
|
||||
"../img/earth/6k_earth_specular_map.jpg"
|
||||
);
|
||||
const norm = useLoader(TextureLoader, "../img/earth/6k_earth_normal_map.jpg");
|
||||
const cloudMap = useLoader(TextureLoader, "../img/earth/6k_earth_clouds.jpg");
|
||||
const axisPoints = [
|
||||
new THREE.Vector3(0, 6371.0 / 6000 + 0.5, 0),
|
||||
new THREE.Vector3(0, -(6371.0 / 6000 + 0.5), 0),
|
||||
];
|
||||
useLayoutEffect(() => {
|
||||
line.current.geometry.setFromPoints(axisPoints);
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
color={"lightgreen"}
|
||||
lineLength={300}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={earth}>
|
||||
<sphereGeometry args={[6371.0 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial
|
||||
map={col}
|
||||
bumpMap={bump}
|
||||
specularMap={spec}
|
||||
normalMap={norm}
|
||||
bumpScale={0.2}
|
||||
shininess={0.5}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh ref={clouds}>
|
||||
<sphereGeometry args={[6371.0 / 6000 + 0.01, 50, 50]} />
|
||||
<meshPhongMaterial map={cloudMap} transparent={true} opacity={0.5} />
|
||||
</mesh>
|
||||
<line ref={line}>
|
||||
<bufferGeometry />
|
||||
<lineBasicMaterial
|
||||
color={"hotpink"}
|
||||
transparent={true}
|
||||
opacity={0.5}
|
||||
linewidth={2}
|
||||
/>
|
||||
</line>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import {
|
||||
Canvas,
|
||||
extend,
|
||||
useFrame,
|
||||
useLoader,
|
||||
useThree,
|
||||
} from "@react-three/fiber";
|
||||
import {
|
||||
shaderMaterial,
|
||||
OrbitControls,
|
||||
Line,
|
||||
Html,
|
||||
Text,
|
||||
} from "@react-three/drei";
|
||||
import React, {
|
||||
useRef,
|
||||
Suspense,
|
||||
useLayoutEffect,
|
||||
useState,
|
||||
useEffect,
|
||||
useContext,
|
||||
forwardRef,
|
||||
memo,
|
||||
} from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import * as THREE from "three";
|
||||
import { MyContext } from "./Scene3";
|
||||
import saturnImage from "./planet_overlay_img/saturn.jpg";
|
||||
|
||||
import "./styles.css";
|
||||
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
export const PlanetInfo = memo(
|
||||
forwardRef(function PlanetInfo(props, ref) {
|
||||
const navigate = useNavigate();
|
||||
const [visibility, setVisibility] = useState("hidden");
|
||||
const { customData } = useContext(MyContext);
|
||||
const [planetData, setPlanetData] = useState({ name: "Default" });
|
||||
|
||||
function getPlanetDataAtName() {}
|
||||
|
||||
useEffect(() => {
|
||||
console.log(props.planetInfo);
|
||||
const showInfo = (planet) => {
|
||||
props.planetInfo.forEach((oplanet) => {
|
||||
if (planet.name == oplanet.name) {
|
||||
setPlanetData(oplanet);
|
||||
}
|
||||
});
|
||||
//if (planet && planet.name) setPlanetData({ name: planet.name });
|
||||
console.log(planetData);
|
||||
setVisibility("visible");
|
||||
};
|
||||
if (showInfo) customData.current["showInfo"] = showInfo;
|
||||
}, [customData, planetData]);
|
||||
|
||||
const someEventHandler = () => {
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
function closeInfo() {
|
||||
setVisibility("hidden");
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={visibility == "visible" ? "planetInfo" : "planetInfoFadeIn"}
|
||||
style={{ visibility: visibility }}
|
||||
>
|
||||
<div className="wrapper">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
aria-label="Close"
|
||||
onClick={closeInfo}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
<h1>{planetData.name}</h1>
|
||||
<img src={saturnImage}></img>
|
||||
<p>{planetData.Description}</p>
|
||||
<div className="data-wrapper">
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.LOY}
|
||||
</span>
|
||||
<span className="data-2">Earth Days/Years</span>
|
||||
</div>
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.DFS}
|
||||
</span>
|
||||
<span className="data-2">AU</span>
|
||||
<span className="data-3">Distance from Sun</span>
|
||||
</div>
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.Moons}
|
||||
</span>
|
||||
<span className="data-2">Moons</span>
|
||||
</div>
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.Radius}
|
||||
</span>
|
||||
<span className="data-2">Radius</span>
|
||||
<span className="data-3">Kilometers</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
PlanetInfo.propTypes = {
|
||||
planet: PropTypes.object,
|
||||
};
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
import { useFrame, useLoader } from "@react-three/fiber";
|
||||
import React, { useRef, useLayoutEffect, useState, useEffect } from "react";
|
||||
import * as THREE from "three";
|
||||
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
|
||||
import "../styles.css";
|
||||
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
|
||||
import { PlanetPath } from "../path";
|
||||
|
||||
export const Earth = ({
|
||||
speed,
|
||||
getPosition,
|
||||
speedChanged,
|
||||
data,
|
||||
setPosition,
|
||||
}) => {
|
||||
let distanceScaleFactor = 1000000;
|
||||
const [posArr, setPosArr] = useState(data);
|
||||
const lineArr = useRef([]);
|
||||
const line = useRef();
|
||||
const clouds = useRef("clouds");
|
||||
const earth = useRef();
|
||||
const group = useRef();
|
||||
const first = useRef(true);
|
||||
const lastPositionUpdate = useRef(0);
|
||||
|
||||
let planetPositionIndex = useRef(0);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.name = "Earth";
|
||||
group.current.userData.nearOvOp = 60;
|
||||
group.current.userData.scolor = "lightgreen";
|
||||
});
|
||||
|
||||
useEffect(() => {}, []);
|
||||
useFrame(({ clock }) => {
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
if (timeSinceLastUpdate >= 3) {
|
||||
//console.log("gethis");
|
||||
getPosition("earth", setPosArr, posArr);
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
//console.log(posArr);
|
||||
//console.log(group.current);
|
||||
}
|
||||
//console.log("arrlength" + posArr.length);
|
||||
clouds.current.rotation.y += 0.00025;
|
||||
earth.current.rotation.y += 0.00015;
|
||||
|
||||
if (posArr) setPosition(group, posArr, lineArr);
|
||||
|
||||
//if speed is 0 set the date to current date get from posArr
|
||||
//search for current date in posArr an set planetPositionIndex
|
||||
}, []);
|
||||
|
||||
const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
|
||||
const bump = useLoader(TextureLoader, "../img/earth/earth_bump_1k.jpg");
|
||||
const spec = useLoader(
|
||||
TextureLoader,
|
||||
"../img/earth/6k_earth_specular_map.jpg"
|
||||
);
|
||||
const norm = useLoader(TextureLoader, "../img/earth/6k_earth_normal_map.jpg");
|
||||
const cloudMap = useLoader(TextureLoader, "../img/earth/6k_earth_clouds.jpg");
|
||||
const axisPoints = [
|
||||
new THREE.Vector3(0, 6371.0 / 6000 + 0.5, 0),
|
||||
new THREE.Vector3(0, -(6371.0 / 6000 + 0.5), 0),
|
||||
];
|
||||
useLayoutEffect(() => {
|
||||
line.current.geometry.setFromPoints(axisPoints);
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
planet={group}
|
||||
color={"lightgreen"}
|
||||
lineLength={300}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={earth}>
|
||||
<sphereGeometry args={[6371.0 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial
|
||||
map={col}
|
||||
bumpMap={bump}
|
||||
specularMap={spec}
|
||||
normalMap={norm}
|
||||
bumpScale={0.2}
|
||||
shininess={0.5}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh ref={clouds}>
|
||||
<sphereGeometry args={[6371.0 / 6000 + 0.01, 50, 50]} />
|
||||
<meshPhongMaterial map={cloudMap} transparent={true} opacity={0.5} />
|
||||
</mesh>
|
||||
{true && (
|
||||
<line ref={line}>
|
||||
<bufferGeometry />
|
||||
<lineBasicMaterial
|
||||
color={"hotpink"}
|
||||
transparent={true}
|
||||
opacity={0.5}
|
||||
linewidth={2}
|
||||
/>
|
||||
</line>
|
||||
)}
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
import { useFrame, useLoader } from "@react-three/fiber";
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
|
||||
export const Jupiter = ({
|
||||
getPosition,
|
||||
speed,
|
||||
speedChanged,
|
||||
setPosition,
|
||||
data,
|
||||
}) => {
|
||||
const group = useRef();
|
||||
const col = useLoader(TextureLoader, "../img/jupiter/jupiter2_4k.jpg");
|
||||
|
||||
const [posArr, setPosArr] = useState(data);
|
||||
const lineArr = useRef([]);
|
||||
|
||||
let planetPositionIndex = useRef(0);
|
||||
const lastPositionUpdate = useRef(0);
|
||||
|
||||
let distanceScaleFactor = 1000000;
|
||||
|
||||
useEffect(() => {
|
||||
group.current.userData.name = "Jupiter";
|
||||
group.current.userData.nearOvOp = 800;
|
||||
group.current.userData.scolor = "yellow";
|
||||
});
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
//getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current);
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
if (timeSinceLastUpdate >= 2) {
|
||||
//console.log("gethis");
|
||||
getPosition("jupiter", setPosArr, posArr, planetPositionIndex.current);
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
}
|
||||
|
||||
//if speed is 0 set the date to current date get from posArr
|
||||
//search for current date in posArr an set planetPositionIndex
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
planet={group}
|
||||
color={"yellow"}
|
||||
lineLength={400}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh>
|
||||
<sphereGeometry args={[69911 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial map={col} />
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
|
||||
|
||||
import React, { useRef, useLayoutEffect, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
|
||||
export const Mars = ({
|
||||
speed,
|
||||
getPosition,
|
||||
speedChanged,
|
||||
setPosition,
|
||||
data,
|
||||
}) => {
|
||||
const [posArr, setPosArr] = useState(data);
|
||||
const lineArr = useRef([]);
|
||||
const lastPositionUpdate = useRef(0);
|
||||
|
||||
let planetPositionIndex = useRef(0);
|
||||
const mars = useRef("mars");
|
||||
const group = useRef("group");
|
||||
const col = useLoader(TextureLoader, "../img/mars/mars_1k_color.jpg");
|
||||
const bump = useLoader(TextureLoader, "../img/mars/mars_1k_topo.jpg");
|
||||
const norm = useLoader(TextureLoader, "../img/mars/mars_1k_normal.jpg");
|
||||
let distanceScaleFactor = 1000000;
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.name = "Mars";
|
||||
group.current.userData.nearOvOp = 40;
|
||||
group.current.userData.scolor = "orange";
|
||||
}, []);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
//getPosition("mars", setPosArr, posArr, planetPositionIndex.current);
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
//console.log(speedChanged);
|
||||
if (timeSinceLastUpdate >= 2) {
|
||||
getPosition("mars", setPosArr, posArr, planetPositionIndex.current);
|
||||
//console.log(planetPositionIndex);
|
||||
//console.log("getpos");
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
}
|
||||
|
||||
//if speed is 0 set the date to current date get from posArr
|
||||
//search for current date in posArr an set planetPositionIndex
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
planet={group}
|
||||
color={"orange"}
|
||||
lineLength={150}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={mars}>
|
||||
<sphereGeometry args={[3389.5 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial
|
||||
map={col}
|
||||
bumpMap={bump}
|
||||
normalMap={norm}
|
||||
bumpScale={0.3}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import { useFrame, useLoader } from "@react-three/fiber";
|
||||
import React, { useRef, useLayoutEffect, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import "../styles.css";
|
||||
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
|
||||
export const Mercury = ({
|
||||
speed,
|
||||
getPosition,
|
||||
speedChanged,
|
||||
setPosition,
|
||||
data,
|
||||
}) => {
|
||||
const [posArr, setPosArr] = useState(data);
|
||||
const lineArr = useRef([]);
|
||||
let planetPositionIndex = useRef(0);
|
||||
let distanceScaleFactor = 1000000;
|
||||
const mercury = useRef();
|
||||
const lastPositionUpdate = useRef(0);
|
||||
const group = useRef();
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.name = "Mercury";
|
||||
group.current.userData.nearOvOp = 20;
|
||||
group.current.userData.scolor = "#a34f5f";
|
||||
}, []);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
//getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
if (timeSinceLastUpdate >= 2) {
|
||||
//console.log("gethis");
|
||||
getPosition("mercury", setPosArr, posArr, planetPositionIndex.current);
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
//console.log(group.current);
|
||||
}
|
||||
|
||||
//if speed is 0 set the date to current date get from posArr
|
||||
//search for current date in posArr an set planetPositionIndex
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
const col = useLoader(TextureLoader, "../img/mercury/mercurymap.jpg");
|
||||
const bump = useLoader(TextureLoader, "../img/mercury/mercurybump.jpg");
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
planet={group}
|
||||
color={"#a34f5f"}
|
||||
lineLength={100}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={mercury}>
|
||||
<sphereGeometry args={[2439.7 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial map={col} bumpMap={bump} bumpScale={0.3} />
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
import { useFrame, useLoader } from "@react-three/fiber";
|
||||
import React, { useRef, useLayoutEffect, useState, useContext } from "react";
|
||||
import * as THREE from "three";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import "../styles.css";
|
||||
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
import { MyContext } from "../Scene3";
|
||||
|
||||
export const Neptune = ({
|
||||
speedChanged,
|
||||
getPosition,
|
||||
speed,
|
||||
setPosition,
|
||||
data,
|
||||
}) => {
|
||||
const [poss, setPos] = useState(data);
|
||||
let distanceScaleFactor = 1000000;
|
||||
const neptune = useRef();
|
||||
const group = useRef();
|
||||
const lineArr = useRef([]);
|
||||
|
||||
const [posArr, setPosArr] = useState([]);
|
||||
|
||||
let planetPositionIndex = useRef(0);
|
||||
|
||||
const { customData } = useContext(MyContext);
|
||||
const lastPositionUpdate = useRef(0);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.counter = 0;
|
||||
group.current.userData.name = "Neptune";
|
||||
group.current.userData.nearOvOp = 500;
|
||||
group.current.userData.scolor = "darkblue";
|
||||
}, []);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
if (timeSinceLastUpdate >= 2) {
|
||||
//console.log("gethis");
|
||||
getPosition("neptune", setPosArr, posArr, planetPositionIndex.current);
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
}
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
|
||||
const changeSpeed = (newSpeed) => {
|
||||
setPos(poss.slice(0, group.current.userData.counter + 10));
|
||||
setGetAgain(true);
|
||||
console.log(poss);
|
||||
setSpeed(newSpeed);
|
||||
};
|
||||
|
||||
customData.current["changeNeptuneSpeed"] = changeSpeed;
|
||||
const col = useLoader(TextureLoader, "../img/neptune/neptunemap.jpg");
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
planet={group}
|
||||
color={"darkblue"}
|
||||
lineLength={20}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={neptune}>
|
||||
<sphereGeometry args={[24622 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial map={col} />
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,29 +1,27 @@
|
|||
import { Canvas } from "@react-three/fiber";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import React, {
|
||||
Suspense,
|
||||
useRef,
|
||||
createContext,
|
||||
memo,
|
||||
useContext,
|
||||
} from "react";
|
||||
|
||||
import { useContext, useState } from "react";
|
||||
import { PlanetInfo } from "./planetInfo.jsx";
|
||||
import { MyContext } from "./Scene3.jsx";
|
||||
import { MyContext } from "../SolarSystemMain.jsx";
|
||||
|
||||
export const ScreenOverlay = (props) => {
|
||||
const { customData } = useContext(MyContext);
|
||||
|
||||
const [date, setDate] = useState();
|
||||
customData.current["setDate"] = setDate;
|
||||
|
||||
const handleChange = () => {
|
||||
customData.current.updateSpeed(0);
|
||||
};
|
||||
|
||||
const handleChange0 = () => {
|
||||
customData.current.updateSpeed(1);
|
||||
customData.current.updateSpeed(3);
|
||||
};
|
||||
|
||||
const handleChange1 = () => {
|
||||
customData.current.updateSpeed(3);
|
||||
customData.current.updateSpeed(8);
|
||||
};
|
||||
|
||||
const handleChange2 = () => {
|
||||
customData.current.updateSpeed(20);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
|
|
@ -36,16 +34,6 @@ export const ScreenOverlay = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{/* <div className="slidecontainer">
|
||||
<input
|
||||
type="range"
|
||||
min="30"
|
||||
max="120"
|
||||
step="30"
|
||||
className="slider"
|
||||
id="myRange"
|
||||
onChange={handleChange}
|
||||
/> */}
|
||||
<div className="btn-toolbar slidecontainer">
|
||||
<div className="btn-group mr-2" role="group">
|
||||
<button onClick={handleReset} className="btn btn-primary">
|
||||
|
|
@ -60,6 +48,9 @@ export const ScreenOverlay = (props) => {
|
|||
<button onClick={handleChange1} className="btn btn-primary">
|
||||
>>
|
||||
</button>
|
||||
<button onClick={handleChange2} className="btn btn-primary">
|
||||
>>>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-group" role="group">
|
||||
<button
|
||||
|
|
@ -70,6 +61,11 @@ export const ScreenOverlay = (props) => {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="date">
|
||||
<span className="dateSpan" style={{ color: "white" }}>
|
||||
{date && date.toUTCString()}
|
||||
</span>
|
||||
</div>
|
||||
<PlanetInfo planetInfo={props.planetInfo} />
|
||||
</>
|
||||
);
|
||||
128
src/planets/path.jsx
Normal file
128
src/planets/path.jsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import { useFrame } from "@react-three/fiber";
|
||||
import React, { useRef, useContext, useLayoutEffect, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { PlanetOverlayContext } from "../SharedPlanetState";
|
||||
|
||||
export const PlanetPath = ({
|
||||
linePos,
|
||||
color,
|
||||
lineLength,
|
||||
planet,
|
||||
}) => {
|
||||
const lineref = useRef();
|
||||
const lineArr = useRef([]);
|
||||
const first = useRef(true);
|
||||
const [loading, setLoading] = useState();
|
||||
const { speed } = useContext(PlanetOverlayContext);
|
||||
const [linePoss, setLinePoss] = useState(null);
|
||||
const [second, setSecond] = useState(false);
|
||||
const asd = useContext(PlanetOverlayContext);
|
||||
|
||||
//from chatgpt very nice :D
|
||||
const cutPath = (path, maxLength) => {
|
||||
let length = getLength(path);
|
||||
while (length > maxLength && path.length >= 2) {
|
||||
const firstPoint = path[0];
|
||||
const secondPoint = path[1];
|
||||
const segmentLength = firstPoint.distanceTo(secondPoint);
|
||||
if (segmentLength > maxLength) {
|
||||
// If the first segment is longer than the maximum length,
|
||||
// split it into multiple segments of the maximum length.
|
||||
const numSegments = Math.ceil(segmentLength / maxLength);
|
||||
const segmentDirection = secondPoint
|
||||
.clone()
|
||||
.sub(firstPoint)
|
||||
.normalize();
|
||||
const segmentLength = segmentLength / numSegments;
|
||||
const newPoints = [firstPoint];
|
||||
for (let i = 1; i < numSegments; i++) {
|
||||
const newPoint = firstPoint
|
||||
.clone()
|
||||
.add(segmentDirection.clone().multiplyScalar(segmentLength * i));
|
||||
newPoints.push(newPoint);
|
||||
}
|
||||
newPoints.push(secondPoint);
|
||||
path.splice(0, 2, ...newPoints);
|
||||
length = getLength(path);
|
||||
} else {
|
||||
path.shift();
|
||||
length -= segmentLength;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function getLength(arrV3) {
|
||||
let sum = 0;
|
||||
for (var i = 0; i < arrV3.length - 1; i += 2) {
|
||||
sum += arrV3[i].distanceTo(arrV3[i + 1]);
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
|
||||
const distanceScaleFactor = 1000000;
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (second && linePoss) {
|
||||
linePoss.forEach((element) => {
|
||||
element.position.x = element.position.x / distanceScaleFactor;
|
||||
element.position.y = element.position.y / distanceScaleFactor;
|
||||
element.position.z = element.position.z / distanceScaleFactor;
|
||||
lineArr.current.push(
|
||||
new THREE.Vector3(
|
||||
element.position.x,
|
||||
element.position.y,
|
||||
element.position.z
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
setSecond(false);
|
||||
}
|
||||
if(first.current){
|
||||
const fetchLinePos = async () => {
|
||||
fetch(
|
||||
`http://127.0.0.1:8000/duration/line?name=${planet.name}&id=${planet.id}&LOY=${planet.year}`
|
||||
).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`This is an HTTP error: The status is ${response.status}`
|
||||
);
|
||||
}
|
||||
setLoading(true);
|
||||
response
|
||||
.json()
|
||||
.then((data) => {
|
||||
setLinePoss(data)
|
||||
setSecond(true);
|
||||
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
});
|
||||
};
|
||||
fetchLinePos();
|
||||
first.current = false;
|
||||
}
|
||||
//console.log(lineArr.current);
|
||||
},[linePoss, planet, second]);
|
||||
|
||||
const lineGeometry = new THREE.BufferGeometry();
|
||||
useFrame(() => {
|
||||
let vis = Infinity;
|
||||
if(asd.pathVis == "hidden") vis = 0;
|
||||
else vis = Infinity;
|
||||
lineref.current.geometry.setFromPoints(lineArr.current);
|
||||
lineref.current.geometry.setDrawRange(0, vis);
|
||||
//cutPath(linePos, lineLength);
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<line ref={lineref} geometry={lineGeometry} frustumCulled={false}>
|
||||
<lineBasicMaterial color={color} />
|
||||
</line>
|
||||
</>
|
||||
);
|
||||
};
|
||||
62
src/planets/planet.jsx
Normal file
62
src/planets/planet.jsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { useFrame, useLoader, useThree } from "@react-three/fiber";
|
||||
import { useRef, useLayoutEffect } from "react";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import { PlanetOverlay } from "./planetOverlay";
|
||||
import { PlanetPath } from "./path";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const Planet = ({ planetData, setPosition, positions, realPos, linePos }) => {
|
||||
const lineArr = useRef([]);
|
||||
|
||||
const colorMap = useLoader(
|
||||
TextureLoader,
|
||||
`../img/${planetData.name.toLowerCase()}/color.jpg`
|
||||
);
|
||||
|
||||
useFrame(() => {
|
||||
if (positions) setPosition(group, positions, lineArr, realPos);
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.name = planetData.name;
|
||||
group.current.userData.nearOvOp = planetData.overlayVisibilityDistance;
|
||||
group.current.userData.scolor = planetData.color;
|
||||
});
|
||||
|
||||
useThree(() => {});
|
||||
|
||||
const group = useRef();
|
||||
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
linePoss={linePos}
|
||||
planet={{
|
||||
name: planetData.name,
|
||||
id: planetData._id,
|
||||
year: planetData.LOY,
|
||||
}}
|
||||
color={planetData.color}
|
||||
lineLength={200}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh>
|
||||
<sphereGeometry args={[planetData.Radius / 6000, 100, 100]} />
|
||||
<meshPhongMaterial map={colorMap} />
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Planet.propTypes = {
|
||||
planetData: PropTypes.object,
|
||||
setPosition: PropTypes.func,
|
||||
positions: PropTypes.array,
|
||||
realPos: PropTypes.object,
|
||||
linePos: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Planet;
|
||||
79
src/planets/planetInfo.jsx
Normal file
79
src/planets/planetInfo.jsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { useState, useEffect, useContext } from "react";
|
||||
import { MyContext } from "../SolarSystemMain";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
export const PlanetInfo = (props) => {
|
||||
const [visibility, setVisibility] = useState("hidden");
|
||||
const { customData } = useContext(MyContext);
|
||||
const [planetData, setPlanetData] = useState({ name: "Default" });
|
||||
|
||||
useEffect(() => {
|
||||
const showInfo = (planet) => {
|
||||
props.planetInfo.forEach((oplanet) => {
|
||||
if (planet.name == oplanet.name) {
|
||||
setPlanetData(oplanet);
|
||||
}
|
||||
});
|
||||
setVisibility("visible");
|
||||
};
|
||||
if (showInfo) customData.current["showInfo"] = showInfo;
|
||||
}, [customData, planetData, props.planetInfo]);
|
||||
|
||||
function closeInfo() {
|
||||
setVisibility("hidden");
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={visibility == "visible" ? "planetInfo" : "planetInfoFadeIn"}
|
||||
style={{ visibility: visibility }}
|
||||
>
|
||||
<div className="wrapper">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
aria-label="Close"
|
||||
onClick={closeInfo}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
<h1>{planetData.name}</h1>
|
||||
<img id="plInfoImg" src={`${planetData.name.toLowerCase()}.jpg`}></img>
|
||||
<p>{planetData.Description}</p>
|
||||
<div className="data-wrapper">
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.LOY}
|
||||
</span>
|
||||
<span className="data-2">Earth Days/Years</span>
|
||||
</div>
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.DFS}
|
||||
</span>
|
||||
<span className="data-2">AU</span>
|
||||
<span className="data-3">Distance from Sun</span>
|
||||
</div>
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.Moons}
|
||||
</span>
|
||||
<span className="data-2">Moons</span>
|
||||
</div>
|
||||
<div className="data">
|
||||
<span style={{ color: planetData.color }} className="data-1">
|
||||
{planetData.Radius}
|
||||
</span>
|
||||
<span className="data-2">Radius</span>
|
||||
<span className="data-3">Kilometers</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PlanetInfo.propTypes = {
|
||||
planet: PropTypes.object,
|
||||
planetInfo: PropTypes.array
|
||||
};
|
||||
|
|
@ -1,81 +1,40 @@
|
|||
import {
|
||||
Canvas,
|
||||
extend,
|
||||
useFrame,
|
||||
useLoader,
|
||||
useThree,
|
||||
} from "@react-three/fiber";
|
||||
import {
|
||||
shaderMaterial,
|
||||
OrbitControls,
|
||||
Line,
|
||||
Html,
|
||||
Text,
|
||||
} from "@react-three/drei";
|
||||
import React, {
|
||||
useRef,
|
||||
Suspense,
|
||||
useLayoutEffect,
|
||||
useState,
|
||||
useEffect,
|
||||
useContext,
|
||||
} from "react";
|
||||
import { useFrame, useThree } from "@react-three/fiber";
|
||||
import { Html } from "@react-three/drei";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import * as THREE from "three";
|
||||
import { MyContext } from "./Scene3";
|
||||
|
||||
import "./styles.css";
|
||||
|
||||
import { MyContext } from "../SolarSystemMain";
|
||||
import PropTypes from "prop-types";
|
||||
import { PlanetOverlayContext } from "./SharedPlanetState";
|
||||
import { PlanetOverlayContext } from "../SharedPlanetState";
|
||||
|
||||
export const PlanetOverlay = ({ planet }) => {
|
||||
const ref = useRef();
|
||||
let [opacity, setOpacity] = useState(0);
|
||||
let [minDistance, setMinDistance] = useState(0);
|
||||
const { nameVis, iconVis } = useContext(PlanetOverlayContext);
|
||||
|
||||
let [scolor, setSColor] = useState("white");
|
||||
let [follow, setFollow] = useState(false);
|
||||
const { camera } = useThree();
|
||||
const [name, setName] = useState("Undefined");
|
||||
const svgStyle = { height: "20px", width: "20px", stroke: scolor };
|
||||
var { controls } = useContext(MyContext);
|
||||
const { customData } = useContext(MyContext);
|
||||
|
||||
const handleClick = React.useCallback(
|
||||
(event) => {
|
||||
// prevent context menu from opening on right-click
|
||||
event.preventDefault();
|
||||
|
||||
// synthetic event
|
||||
/*switch (event.type) {
|
||||
case "click":
|
||||
message = `Left click (synthetic event)`;
|
||||
break;
|
||||
case "contextmenu":
|
||||
message = `Right click (synthetic event)`;
|
||||
break;
|
||||
}*/
|
||||
|
||||
// native event
|
||||
switch (event.nativeEvent.button) {
|
||||
case 0:
|
||||
//controls.current.target.copy(planet.current.position.clone());
|
||||
customData.current.showInfo(planet.current.userData);
|
||||
customData.current.handlePosition(
|
||||
planet.current.position,
|
||||
planet.current
|
||||
);
|
||||
customData.current.handleLookAt(planet.current.position);
|
||||
//console.log(customData);
|
||||
//startFollow();
|
||||
break;
|
||||
case 2:
|
||||
//endFollow();
|
||||
break;
|
||||
}
|
||||
},
|
||||
[controls, planet, customData]
|
||||
[planet, customData]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -93,27 +52,11 @@ export const PlanetOverlay = ({ planet }) => {
|
|||
} else {
|
||||
setOpacity(1);
|
||||
}
|
||||
if (follow && controls) {
|
||||
controls.current.target.copy(planet.current.position.clone());
|
||||
controls.current.maxDistance = 20;
|
||||
}
|
||||
//console.log(iconVis);
|
||||
}, []);
|
||||
|
||||
function startFollow() {
|
||||
console.log(ref === ref);
|
||||
setFollow(true);
|
||||
}
|
||||
|
||||
function endFollow() {
|
||||
setFollow(false);
|
||||
controls.current.reset();
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Html
|
||||
ref={ref}
|
||||
zIndexRange={[11, 0]}
|
||||
className="overlay"
|
||||
style={{ opacity: opacity }}
|
||||
|
|
@ -126,7 +69,7 @@ export const PlanetOverlay = ({ planet }) => {
|
|||
style={{ visibility: iconVis }}
|
||||
>
|
||||
<svg
|
||||
onMouseEnter={() => setSColor("blue")}
|
||||
onMouseEnter={() => setSColor("lightgrey")}
|
||||
onMouseLeave={() => setSColor(planet.current.userData.scolor)}
|
||||
style={svgStyle}
|
||||
>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
import { extend, useFrame, useLoader } from "@react-three/fiber";
|
||||
import { shaderMaterial } from "@react-three/drei";
|
||||
import React, { useRef, useLayoutEffect, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
|
||||
const SaturnRingMaterial = shaderMaterial(
|
||||
{
|
||||
ringCol: 0,
|
||||
ringAlpha: 0,
|
||||
innerRadius: 58232 / 6000 + 0,
|
||||
outerRadius: 58232 / 6000 + 0,
|
||||
},
|
||||
glsl`
|
||||
varying vec3 vPos;
|
||||
|
||||
void main() {
|
||||
vPos = position;
|
||||
vec3 viewPosition = (modelViewMatrix * vec4(position, 1.)).xyz;
|
||||
gl_Position = projectionMatrix * vec4(viewPosition, 1.);
|
||||
}
|
||||
`,
|
||||
glsl`
|
||||
uniform sampler2D ringCol;
|
||||
uniform sampler2D ringAlpha;
|
||||
uniform float innerRadius;
|
||||
uniform float outerRadius;
|
||||
|
||||
varying vec3 vPos;
|
||||
|
||||
vec4 color() {
|
||||
vec2 uv = vec2(0);
|
||||
uv.x = (length(vPos) - innerRadius) / (innerRadius + outerRadius);
|
||||
|
||||
vec4 pixel = texture2D(ringCol, uv);
|
||||
vec4 pixel2 = texture2D(ringAlpha, uv);
|
||||
pixel[3] = pixel2[0];
|
||||
if (pixel[3] <= 0.01) {
|
||||
discard;
|
||||
}
|
||||
return pixel;
|
||||
}
|
||||
|
||||
void main() {
|
||||
gl_FragColor = color();
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
extend({ SaturnRingMaterial });
|
||||
|
||||
export const Saturn = ({
|
||||
speed,
|
||||
speedChanged,
|
||||
getPosition,
|
||||
setPosition,
|
||||
data,
|
||||
}) => {
|
||||
const [posArr, setPosArr] = useState(data);
|
||||
const lineArr = useRef([]);
|
||||
const lastPositionUpdate = useRef(0);
|
||||
|
||||
let planetPositionIndex = useRef(0);
|
||||
const saturn = useRef("saturn");
|
||||
const group = useRef("group");
|
||||
const col = useLoader(TextureLoader, "../img/saturn/saturnmap.jpg");
|
||||
const ringCol = useLoader(TextureLoader, "../img/saturn/saturnringcolor.jpg");
|
||||
const ringAlpha = useLoader(
|
||||
TextureLoader,
|
||||
"../img/saturn/saturnringpattern.gif"
|
||||
);
|
||||
let distanceScaleFactor = 1000000;
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.counter = 0;
|
||||
group.current.userData.name = "Saturn";
|
||||
group.current.userData.nearOvOp = 800;
|
||||
group.current.userData.scolor = "red";
|
||||
}, []);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
if (timeSinceLastUpdate >= 2) {
|
||||
//console.log("gethis");
|
||||
getPosition("saturn", setPosArr, posArr, planetPositionIndex.current);
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
}
|
||||
//console.log("arrlength" + posArr.length);
|
||||
|
||||
//if speed is 0 set the date to current date get from posArr
|
||||
//search for current date in posArr an set planetPositionIndex
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
planet={group}
|
||||
color={"red"}
|
||||
lineLength={300}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={saturn}>
|
||||
<sphereGeometry args={[58232 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial map={col} />
|
||||
</mesh>
|
||||
<mesh>
|
||||
<ringGeometry args={[58232 / 6000 + 1, 58232 / 6000 + 5, 100, 100]} />
|
||||
<saturnRingMaterial
|
||||
ringCol={ringCol}
|
||||
ringAlpha={ringAlpha}
|
||||
transparent={true}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,47 +1,390 @@
|
|||
import { Canvas, extend, useFrame, useLoader } from "@react-three/fiber";
|
||||
import { shaderMaterial, OrbitControls, Line } from "@react-three/drei";
|
||||
import React, { useRef, Suspense, useLayoutEffect } from "react";
|
||||
import {
|
||||
Canvas,
|
||||
extend,
|
||||
useFrame,
|
||||
useLoader,
|
||||
useThree,
|
||||
} from "@react-three/fiber";
|
||||
import {
|
||||
shaderMaterial,
|
||||
OrbitControls,
|
||||
CubeCamera,
|
||||
useCubeCamera,
|
||||
} from "@react-three/drei";
|
||||
import React, { useRef, Suspense, useLayoutEffect, useContext } from "react";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetOverlay } from "./planetOverlay";
|
||||
|
||||
export const Sun = ({ positions }) => {
|
||||
const mars = useRef("mars");
|
||||
const group = useRef("group");
|
||||
const col = useLoader(TextureLoader, "../img/sun/sun_uv.jpg");
|
||||
let distanceScaleFactor = 1000000;
|
||||
const SunPerlinMaterial = shaderMaterial(
|
||||
//uniform
|
||||
{
|
||||
uTime: 0,
|
||||
},
|
||||
//Vertex SHader
|
||||
glsl`
|
||||
uniform float uTime;
|
||||
|
||||
varying vec3 vPosition;
|
||||
|
||||
varying vec2 vUv;
|
||||
void main(){
|
||||
|
||||
vPosition = position;
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
|
||||
}`,
|
||||
//Fragment Shader
|
||||
glsl`
|
||||
// Classic Perlin 3D Noise
|
||||
// by Stefan Gustavson
|
||||
//
|
||||
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
|
||||
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
|
||||
vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
|
||||
|
||||
float cnoise(vec4 P){
|
||||
vec4 Pi0 = floor(P); // Integer part for indexing
|
||||
vec4 Pi1 = Pi0 + 1.0; // Integer part + 1
|
||||
Pi0 = mod(Pi0, 289.0);
|
||||
Pi1 = mod(Pi1, 289.0);
|
||||
vec4 Pf0 = fract(P); // Fractional part for interpolation
|
||||
vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
|
||||
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
||||
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
||||
vec4 iz0 = vec4(Pi0.zzzz);
|
||||
vec4 iz1 = vec4(Pi1.zzzz);
|
||||
vec4 iw0 = vec4(Pi0.wwww);
|
||||
vec4 iw1 = vec4(Pi1.wwww);
|
||||
|
||||
vec4 ixy = permute(permute(ix) + iy);
|
||||
vec4 ixy0 = permute(ixy + iz0);
|
||||
vec4 ixy1 = permute(ixy + iz1);
|
||||
vec4 ixy00 = permute(ixy0 + iw0);
|
||||
vec4 ixy01 = permute(ixy0 + iw1);
|
||||
vec4 ixy10 = permute(ixy1 + iw0);
|
||||
vec4 ixy11 = permute(ixy1 + iw1);
|
||||
|
||||
vec4 gx00 = ixy00 / 7.0;
|
||||
vec4 gy00 = floor(gx00) / 7.0;
|
||||
vec4 gz00 = floor(gy00) / 6.0;
|
||||
gx00 = fract(gx00) - 0.5;
|
||||
gy00 = fract(gy00) - 0.5;
|
||||
gz00 = fract(gz00) - 0.5;
|
||||
vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
|
||||
vec4 sw00 = step(gw00, vec4(0.0));
|
||||
gx00 -= sw00 * (step(0.0, gx00) - 0.5);
|
||||
gy00 -= sw00 * (step(0.0, gy00) - 0.5);
|
||||
|
||||
vec4 gx01 = ixy01 / 7.0;
|
||||
vec4 gy01 = floor(gx01) / 7.0;
|
||||
vec4 gz01 = floor(gy01) / 6.0;
|
||||
gx01 = fract(gx01) - 0.5;
|
||||
gy01 = fract(gy01) - 0.5;
|
||||
gz01 = fract(gz01) - 0.5;
|
||||
vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
|
||||
vec4 sw01 = step(gw01, vec4(0.0));
|
||||
gx01 -= sw01 * (step(0.0, gx01) - 0.5);
|
||||
gy01 -= sw01 * (step(0.0, gy01) - 0.5);
|
||||
|
||||
vec4 gx10 = ixy10 / 7.0;
|
||||
vec4 gy10 = floor(gx10) / 7.0;
|
||||
vec4 gz10 = floor(gy10) / 6.0;
|
||||
gx10 = fract(gx10) - 0.5;
|
||||
gy10 = fract(gy10) - 0.5;
|
||||
gz10 = fract(gz10) - 0.5;
|
||||
vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
|
||||
vec4 sw10 = step(gw10, vec4(0.0));
|
||||
gx10 -= sw10 * (step(0.0, gx10) - 0.5);
|
||||
gy10 -= sw10 * (step(0.0, gy10) - 0.5);
|
||||
|
||||
vec4 gx11 = ixy11 / 7.0;
|
||||
vec4 gy11 = floor(gx11) / 7.0;
|
||||
vec4 gz11 = floor(gy11) / 6.0;
|
||||
gx11 = fract(gx11) - 0.5;
|
||||
gy11 = fract(gy11) - 0.5;
|
||||
gz11 = fract(gz11) - 0.5;
|
||||
vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
|
||||
vec4 sw11 = step(gw11, vec4(0.0));
|
||||
gx11 -= sw11 * (step(0.0, gx11) - 0.5);
|
||||
gy11 -= sw11 * (step(0.0, gy11) - 0.5);
|
||||
|
||||
vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
|
||||
vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
|
||||
vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
|
||||
vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
|
||||
vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
|
||||
vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
|
||||
vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
|
||||
vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
|
||||
vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
|
||||
vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
|
||||
vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
|
||||
vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
|
||||
vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
|
||||
vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
|
||||
vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
|
||||
vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
|
||||
|
||||
vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
|
||||
g0000 *= norm00.x;
|
||||
g0100 *= norm00.y;
|
||||
g1000 *= norm00.z;
|
||||
g1100 *= norm00.w;
|
||||
|
||||
vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
|
||||
g0001 *= norm01.x;
|
||||
g0101 *= norm01.y;
|
||||
g1001 *= norm01.z;
|
||||
g1101 *= norm01.w;
|
||||
|
||||
vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
|
||||
g0010 *= norm10.x;
|
||||
g0110 *= norm10.y;
|
||||
g1010 *= norm10.z;
|
||||
g1110 *= norm10.w;
|
||||
|
||||
vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
|
||||
g0011 *= norm11.x;
|
||||
g0111 *= norm11.y;
|
||||
g1011 *= norm11.z;
|
||||
g1111 *= norm11.w;
|
||||
|
||||
float n0000 = dot(g0000, Pf0);
|
||||
float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
|
||||
float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
|
||||
float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
|
||||
float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
|
||||
float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
|
||||
float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
|
||||
float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
|
||||
float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
|
||||
float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
|
||||
float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
|
||||
float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
|
||||
float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
|
||||
float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
|
||||
float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
|
||||
float n1111 = dot(g1111, Pf1);
|
||||
|
||||
vec4 fade_xyzw = fade(Pf0);
|
||||
vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
|
||||
vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
|
||||
vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
|
||||
vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
|
||||
float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
|
||||
return 2.2 * n_xyzw;
|
||||
}
|
||||
|
||||
// Classic Perlin noise, periodic version
|
||||
float cnoise(vec4 P, vec4 rep){
|
||||
vec4 Pi0 = mod(floor(P), rep); // Integer part modulo rep
|
||||
vec4 Pi1 = mod(Pi0 + 1.0, rep); // Integer part + 1 mod rep
|
||||
vec4 Pf0 = fract(P); // Fractional part for interpolation
|
||||
vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
|
||||
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
||||
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
||||
vec4 iz0 = vec4(Pi0.zzzz);
|
||||
vec4 iz1 = vec4(Pi1.zzzz);
|
||||
vec4 iw0 = vec4(Pi0.wwww);
|
||||
vec4 iw1 = vec4(Pi1.wwww);
|
||||
|
||||
vec4 ixy = permute(permute(ix) + iy);
|
||||
vec4 ixy0 = permute(ixy + iz0);
|
||||
vec4 ixy1 = permute(ixy + iz1);
|
||||
vec4 ixy00 = permute(ixy0 + iw0);
|
||||
vec4 ixy01 = permute(ixy0 + iw1);
|
||||
vec4 ixy10 = permute(ixy1 + iw0);
|
||||
vec4 ixy11 = permute(ixy1 + iw1);
|
||||
|
||||
vec4 gx00 = ixy00 / 7.0;
|
||||
vec4 gy00 = floor(gx00) / 7.0;
|
||||
vec4 gz00 = floor(gy00) / 6.0;
|
||||
gx00 = fract(gx00) - 0.5;
|
||||
gy00 = fract(gy00) - 0.5;
|
||||
gz00 = fract(gz00) - 0.5;
|
||||
vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
|
||||
vec4 sw00 = step(gw00, vec4(0.0));
|
||||
gx00 -= sw00 * (step(0.0, gx00) - 0.5);
|
||||
gy00 -= sw00 * (step(0.0, gy00) - 0.5);
|
||||
|
||||
vec4 gx01 = ixy01 / 7.0;
|
||||
vec4 gy01 = floor(gx01) / 7.0;
|
||||
vec4 gz01 = floor(gy01) / 6.0;
|
||||
gx01 = fract(gx01) - 0.5;
|
||||
gy01 = fract(gy01) - 0.5;
|
||||
gz01 = fract(gz01) - 0.5;
|
||||
vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
|
||||
vec4 sw01 = step(gw01, vec4(0.0));
|
||||
gx01 -= sw01 * (step(0.0, gx01) - 0.5);
|
||||
gy01 -= sw01 * (step(0.0, gy01) - 0.5);
|
||||
|
||||
vec4 gx10 = ixy10 / 7.0;
|
||||
vec4 gy10 = floor(gx10) / 7.0;
|
||||
vec4 gz10 = floor(gy10) / 6.0;
|
||||
gx10 = fract(gx10) - 0.5;
|
||||
gy10 = fract(gy10) - 0.5;
|
||||
gz10 = fract(gz10) - 0.5;
|
||||
vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
|
||||
vec4 sw10 = step(gw10, vec4(0.0));
|
||||
gx10 -= sw10 * (step(0.0, gx10) - 0.5);
|
||||
gy10 -= sw10 * (step(0.0, gy10) - 0.5);
|
||||
|
||||
vec4 gx11 = ixy11 / 7.0;
|
||||
vec4 gy11 = floor(gx11) / 7.0;
|
||||
vec4 gz11 = floor(gy11) / 6.0;
|
||||
gx11 = fract(gx11) - 0.5;
|
||||
gy11 = fract(gy11) - 0.5;
|
||||
gz11 = fract(gz11) - 0.5;
|
||||
vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
|
||||
vec4 sw11 = step(gw11, vec4(0.0));
|
||||
gx11 -= sw11 * (step(0.0, gx11) - 0.5);
|
||||
gy11 -= sw11 * (step(0.0, gy11) - 0.5);
|
||||
|
||||
vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
|
||||
vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
|
||||
vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
|
||||
vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
|
||||
vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
|
||||
vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
|
||||
vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
|
||||
vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
|
||||
vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
|
||||
vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
|
||||
vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
|
||||
vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
|
||||
vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
|
||||
vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
|
||||
vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
|
||||
vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
|
||||
|
||||
vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
|
||||
g0000 *= norm00.x;
|
||||
g0100 *= norm00.y;
|
||||
g1000 *= norm00.z;
|
||||
g1100 *= norm00.w;
|
||||
|
||||
vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
|
||||
g0001 *= norm01.x;
|
||||
g0101 *= norm01.y;
|
||||
g1001 *= norm01.z;
|
||||
g1101 *= norm01.w;
|
||||
|
||||
vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
|
||||
g0010 *= norm10.x;
|
||||
g0110 *= norm10.y;
|
||||
g1010 *= norm10.z;
|
||||
g1110 *= norm10.w;
|
||||
|
||||
vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
|
||||
g0011 *= norm11.x;
|
||||
g0111 *= norm11.y;
|
||||
g1011 *= norm11.z;
|
||||
g1111 *= norm11.w;
|
||||
|
||||
float n0000 = dot(g0000, Pf0);
|
||||
float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
|
||||
float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
|
||||
float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
|
||||
float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
|
||||
float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
|
||||
float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
|
||||
float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
|
||||
float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
|
||||
float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
|
||||
float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
|
||||
float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
|
||||
float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
|
||||
float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
|
||||
float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
|
||||
float n1111 = dot(g1111, Pf1);
|
||||
|
||||
vec4 fade_xyzw = fade(Pf0);
|
||||
vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
|
||||
vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
|
||||
vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
|
||||
vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
|
||||
float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
|
||||
return 2.2 * n_xyzw;
|
||||
}
|
||||
|
||||
varying vec2 vUv;
|
||||
varying vec3 vPosition;
|
||||
uniform float uTime;
|
||||
|
||||
// 6 lyers of noise
|
||||
|
||||
float fbm(vec4 p){
|
||||
float sum = 0.;
|
||||
float amp = 1.;
|
||||
float scale = 0.5;
|
||||
for(int i = 0; i < 6; i++){
|
||||
sum+=cnoise(p*scale)*amp;
|
||||
//p.w += 100.;
|
||||
amp*=0.9;
|
||||
scale *= 3.9;
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
|
||||
void main(){
|
||||
|
||||
vec4 p = vec4(vPosition*3.,uTime*0.4);
|
||||
|
||||
float noisy = fbm(p*0.1);
|
||||
|
||||
vec4 p1 = vec4(vPosition*2.,uTime*0.05);
|
||||
float spots = max(cnoise(p1),0.5);
|
||||
|
||||
gl_FragColor = vec4(noisy);
|
||||
gl_FragColor *= mix(1.,spots, 1.0);
|
||||
gl_FragColor *= vec4(1.,0.7,0.,1.);
|
||||
}`
|
||||
);
|
||||
|
||||
extend({ SunPerlinMaterial });
|
||||
|
||||
const Sun = () => {
|
||||
const { scene, camera } = useThree();
|
||||
const sunPerlinMesh = useRef();
|
||||
const group = useRef();
|
||||
const ref = useRef();
|
||||
|
||||
useFrame(({ clock, gl }) => {
|
||||
gl.render(scene, camera);
|
||||
ref.current.uTime = clock.getElapsedTime();
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.counter = 0;
|
||||
group.current.userData.name = "Sun";
|
||||
group.current.userData.nearOvOp = 800;
|
||||
group.current.userData.nearOvOp = 1800;
|
||||
group.current.userData.scolor = "white";
|
||||
}, []);
|
||||
|
||||
useFrame(() => {
|
||||
if (false) {
|
||||
group.current.position.set(
|
||||
Number(
|
||||
positions[group.current.userData.counter].x / distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
positions[group.current.userData.counter].y / distanceScaleFactor
|
||||
),
|
||||
Number(
|
||||
positions[group.current.userData.counter].z / distanceScaleFactor
|
||||
)
|
||||
);
|
||||
group.current.userData.counter++;
|
||||
}
|
||||
});
|
||||
const sunMesh = useRef();
|
||||
|
||||
return (
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={mars}>
|
||||
<sphereGeometry args={[100000 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial emissiveMap={col} emmisiveIntensite={1} />
|
||||
</mesh>
|
||||
</group>
|
||||
<>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={sunPerlinMesh} position={[0, 0, 0]}>
|
||||
<sphereGeometry args={[32, 50, 50]} />
|
||||
<sunPerlinMaterial ref={ref} />
|
||||
</mesh>
|
||||
<CubeCamera near={0.1} far={35} frames={3}>
|
||||
{(texture) => (
|
||||
<>
|
||||
<mesh ref={sunMesh} position={[0, 0, 0]}>
|
||||
<sphereGeometry args={[33, 50, 50]} />
|
||||
<meshBasicMaterial envMap={texture} />
|
||||
</mesh>
|
||||
</>
|
||||
)}
|
||||
</CubeCamera>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sun;
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
import { useFrame, useLoader } from "@react-three/fiber";
|
||||
import React, { useRef, useLayoutEffect, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import "../styles.css";
|
||||
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
|
||||
export const Uranus = ({
|
||||
speed,
|
||||
speedChanged,
|
||||
getPosition,
|
||||
setPosition,
|
||||
data,
|
||||
}) => {
|
||||
let distanceScaleFactor = 1000000;
|
||||
const [posArr, setPosArr] = useState(data);
|
||||
const lineArr = useRef([]);
|
||||
const lastPositionUpdate = useRef(0);
|
||||
|
||||
let planetPositionIndex = useRef(0);
|
||||
|
||||
const uranus = useRef();
|
||||
const group = useRef();
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.counter = 0;
|
||||
group.current.userData.name = "Uranus";
|
||||
group.current.userData.nearOvOp = 350;
|
||||
group.current.userData.scolor = "lightblue";
|
||||
}, []);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
if (timeSinceLastUpdate >= 2) {
|
||||
//console.log("gethis");
|
||||
getPosition("uranus", setPosArr, posArr, planetPositionIndex.current);
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
}
|
||||
//console.log("arrlength" + posArr.length);
|
||||
|
||||
//if speed is 0 set the date to current date get from posArr
|
||||
//search for current date in posArr an set planetPositionIndex
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
|
||||
const col = useLoader(TextureLoader, "../img/uranus/uranusmap.jpg");
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
planet={group}
|
||||
color={"lightblue"}
|
||||
lineLength={200}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={uranus}>
|
||||
<sphereGeometry args={[25362 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial map={col} />
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import { useFrame, useLoader } from "@react-three/fiber";
|
||||
import React, { useRef, useLayoutEffect, useState, useContext } from "react";
|
||||
import * as THREE from "three";
|
||||
import { TextureLoader } from "three/src/loaders/TextureLoader";
|
||||
import "../styles.css";
|
||||
|
||||
import { PlanetOverlay } from "../planetOverlay";
|
||||
import { PlanetPath } from "../path";
|
||||
import { MyContext } from "../Scene3";
|
||||
|
||||
export const Venus = ({
|
||||
speed,
|
||||
speedChanged,
|
||||
getPosition,
|
||||
setPosition,
|
||||
data,
|
||||
}) => {
|
||||
const [posArr, setPosArr] = useState(data);
|
||||
const lineArr = useRef([]);
|
||||
const lastPositionUpdate = useRef(0);
|
||||
|
||||
let planetPositionIndex = useRef(0);
|
||||
const venus = useRef();
|
||||
const group = useRef();
|
||||
const { customData } = useContext(MyContext);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
group.current.userData.counter = 0;
|
||||
group.current.userData.name = "Venus";
|
||||
group.current.userData.nearOvOp = 20;
|
||||
group.current.userData.scolor = "brown";
|
||||
}, []);
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||
if (timeSinceLastUpdate >= 2) {
|
||||
//console.log("gethis");
|
||||
getPosition("venus", setPosArr, posArr, planetPositionIndex.current);
|
||||
lastPositionUpdate.current = clock.elapsedTime;
|
||||
}
|
||||
//console.log("arrlength" + posArr.length);
|
||||
|
||||
//if speed is 0 set the date to current date get from posArr
|
||||
//search for current date in posArr an set planetPositionIndex
|
||||
setPosition(group, posArr, lineArr);
|
||||
}, []);
|
||||
|
||||
const col = useLoader(TextureLoader, "../img/venus/venusmap.jpg");
|
||||
const bump = useLoader(TextureLoader, "../img/venus/venusbump.jpg");
|
||||
return (
|
||||
<>
|
||||
<PlanetPath
|
||||
linePos={lineArr.current}
|
||||
planet={group}
|
||||
color={"brown"}
|
||||
lineLength={100}
|
||||
/>
|
||||
<group ref={group}>
|
||||
<PlanetOverlay planet={group} />
|
||||
<mesh ref={venus}>
|
||||
<sphereGeometry args={[6051.8 / 6000, 50, 50]} />
|
||||
<meshPhongMaterial map={col} bumpMap={bump} bumpScale={0.3} />
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
129
src/styles.css
129
src/styles.css
|
|
@ -1,129 +0,0 @@
|
|||
.overlay .wrapper {
|
||||
transform: translate3d(-10px, -10px, 0);
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
canvas {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.overlay .wrapper .content {
|
||||
position: absolute;
|
||||
color: rgb(254, 254, 254);
|
||||
font-size: 1.05em;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
user-select: none;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.overlay .wrapper .icon {
|
||||
/*background-image: url(../ring.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
stroke: red;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 10px;*/
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.planetInfo {
|
||||
z-index: 12;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
transition: opacity 0.5s;
|
||||
/*opacity: 0;
|
||||
/*background-color: aliceblue;*/
|
||||
}
|
||||
|
||||
.slidecontainer {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
z-index: 12;
|
||||
top: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.planetInfoFadeIn {
|
||||
z-index: 12;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
transition-delay: 1s;
|
||||
transition-property: opacity;
|
||||
transition: opacity 2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 50px;
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
right: calc(-100% + 40px);
|
||||
}
|
||||
|
||||
.planetInfo .wrapper {
|
||||
padding-top: 100px;
|
||||
background-color: rgba(194, 15, 15, 0);
|
||||
backdrop-filter: blur(0.5px);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.216);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper p {
|
||||
color: white;
|
||||
padding: 10px 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper .data {
|
||||
padding-bottom: 0px;
|
||||
border-bottom: 1px solid rgb(116, 116, 116);
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper .data-1 {
|
||||
padding-right: 5px;
|
||||
font-size: 28.8px;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper .data-2 {
|
||||
padding-right: 5px;
|
||||
color: white;
|
||||
font-size: 18.8px;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper .data-wrapper .data-3 {
|
||||
padding-right: 5px;
|
||||
color: rgb(83, 83, 83);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.planetInfo .wrapper h1 {
|
||||
color: white;
|
||||
padding: 2px;
|
||||
margin-left: 3%;
|
||||
}
|
||||
809
src/sunscene.jsx
809
src/sunscene.jsx
|
|
@ -1,809 +0,0 @@
|
|||
import {
|
||||
Canvas,
|
||||
extend,
|
||||
useFrame,
|
||||
useLoader,
|
||||
useThree,
|
||||
} from "@react-three/fiber";
|
||||
import {
|
||||
shaderMaterial,
|
||||
OrbitControls,
|
||||
CubeCamera,
|
||||
useCubeCamera,
|
||||
} from "@react-three/drei";
|
||||
import React, { useRef, Suspense } from "react";
|
||||
import * as THREE from "three";
|
||||
import glsl from "glslify";
|
||||
|
||||
const SunPerlinMaterial = shaderMaterial(
|
||||
//uniform
|
||||
{
|
||||
uTime: 0,
|
||||
},
|
||||
//Vertex SHader
|
||||
glsl`
|
||||
uniform float uTime;
|
||||
|
||||
varying vec3 vPosition;
|
||||
|
||||
varying vec2 vUv;
|
||||
void main(){
|
||||
|
||||
vPosition = position;
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
|
||||
}`,
|
||||
//Fragment Shader
|
||||
glsl`
|
||||
// Classic Perlin 3D Noise
|
||||
// by Stefan Gustavson
|
||||
//
|
||||
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
|
||||
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
|
||||
vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
|
||||
|
||||
float cnoise(vec4 P){
|
||||
vec4 Pi0 = floor(P); // Integer part for indexing
|
||||
vec4 Pi1 = Pi0 + 1.0; // Integer part + 1
|
||||
Pi0 = mod(Pi0, 289.0);
|
||||
Pi1 = mod(Pi1, 289.0);
|
||||
vec4 Pf0 = fract(P); // Fractional part for interpolation
|
||||
vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
|
||||
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
||||
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
||||
vec4 iz0 = vec4(Pi0.zzzz);
|
||||
vec4 iz1 = vec4(Pi1.zzzz);
|
||||
vec4 iw0 = vec4(Pi0.wwww);
|
||||
vec4 iw1 = vec4(Pi1.wwww);
|
||||
|
||||
vec4 ixy = permute(permute(ix) + iy);
|
||||
vec4 ixy0 = permute(ixy + iz0);
|
||||
vec4 ixy1 = permute(ixy + iz1);
|
||||
vec4 ixy00 = permute(ixy0 + iw0);
|
||||
vec4 ixy01 = permute(ixy0 + iw1);
|
||||
vec4 ixy10 = permute(ixy1 + iw0);
|
||||
vec4 ixy11 = permute(ixy1 + iw1);
|
||||
|
||||
vec4 gx00 = ixy00 / 7.0;
|
||||
vec4 gy00 = floor(gx00) / 7.0;
|
||||
vec4 gz00 = floor(gy00) / 6.0;
|
||||
gx00 = fract(gx00) - 0.5;
|
||||
gy00 = fract(gy00) - 0.5;
|
||||
gz00 = fract(gz00) - 0.5;
|
||||
vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
|
||||
vec4 sw00 = step(gw00, vec4(0.0));
|
||||
gx00 -= sw00 * (step(0.0, gx00) - 0.5);
|
||||
gy00 -= sw00 * (step(0.0, gy00) - 0.5);
|
||||
|
||||
vec4 gx01 = ixy01 / 7.0;
|
||||
vec4 gy01 = floor(gx01) / 7.0;
|
||||
vec4 gz01 = floor(gy01) / 6.0;
|
||||
gx01 = fract(gx01) - 0.5;
|
||||
gy01 = fract(gy01) - 0.5;
|
||||
gz01 = fract(gz01) - 0.5;
|
||||
vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
|
||||
vec4 sw01 = step(gw01, vec4(0.0));
|
||||
gx01 -= sw01 * (step(0.0, gx01) - 0.5);
|
||||
gy01 -= sw01 * (step(0.0, gy01) - 0.5);
|
||||
|
||||
vec4 gx10 = ixy10 / 7.0;
|
||||
vec4 gy10 = floor(gx10) / 7.0;
|
||||
vec4 gz10 = floor(gy10) / 6.0;
|
||||
gx10 = fract(gx10) - 0.5;
|
||||
gy10 = fract(gy10) - 0.5;
|
||||
gz10 = fract(gz10) - 0.5;
|
||||
vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
|
||||
vec4 sw10 = step(gw10, vec4(0.0));
|
||||
gx10 -= sw10 * (step(0.0, gx10) - 0.5);
|
||||
gy10 -= sw10 * (step(0.0, gy10) - 0.5);
|
||||
|
||||
vec4 gx11 = ixy11 / 7.0;
|
||||
vec4 gy11 = floor(gx11) / 7.0;
|
||||
vec4 gz11 = floor(gy11) / 6.0;
|
||||
gx11 = fract(gx11) - 0.5;
|
||||
gy11 = fract(gy11) - 0.5;
|
||||
gz11 = fract(gz11) - 0.5;
|
||||
vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
|
||||
vec4 sw11 = step(gw11, vec4(0.0));
|
||||
gx11 -= sw11 * (step(0.0, gx11) - 0.5);
|
||||
gy11 -= sw11 * (step(0.0, gy11) - 0.5);
|
||||
|
||||
vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
|
||||
vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
|
||||
vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
|
||||
vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
|
||||
vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
|
||||
vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
|
||||
vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
|
||||
vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
|
||||
vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
|
||||
vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
|
||||
vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
|
||||
vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
|
||||
vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
|
||||
vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
|
||||
vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
|
||||
vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
|
||||
|
||||
vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
|
||||
g0000 *= norm00.x;
|
||||
g0100 *= norm00.y;
|
||||
g1000 *= norm00.z;
|
||||
g1100 *= norm00.w;
|
||||
|
||||
vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
|
||||
g0001 *= norm01.x;
|
||||
g0101 *= norm01.y;
|
||||
g1001 *= norm01.z;
|
||||
g1101 *= norm01.w;
|
||||
|
||||
vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
|
||||
g0010 *= norm10.x;
|
||||
g0110 *= norm10.y;
|
||||
g1010 *= norm10.z;
|
||||
g1110 *= norm10.w;
|
||||
|
||||
vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
|
||||
g0011 *= norm11.x;
|
||||
g0111 *= norm11.y;
|
||||
g1011 *= norm11.z;
|
||||
g1111 *= norm11.w;
|
||||
|
||||
float n0000 = dot(g0000, Pf0);
|
||||
float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
|
||||
float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
|
||||
float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
|
||||
float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
|
||||
float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
|
||||
float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
|
||||
float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
|
||||
float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
|
||||
float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
|
||||
float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
|
||||
float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
|
||||
float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
|
||||
float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
|
||||
float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
|
||||
float n1111 = dot(g1111, Pf1);
|
||||
|
||||
vec4 fade_xyzw = fade(Pf0);
|
||||
vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
|
||||
vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
|
||||
vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
|
||||
vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
|
||||
float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
|
||||
return 2.2 * n_xyzw;
|
||||
}
|
||||
|
||||
// Classic Perlin noise, periodic version
|
||||
float cnoise(vec4 P, vec4 rep){
|
||||
vec4 Pi0 = mod(floor(P), rep); // Integer part modulo rep
|
||||
vec4 Pi1 = mod(Pi0 + 1.0, rep); // Integer part + 1 mod rep
|
||||
vec4 Pf0 = fract(P); // Fractional part for interpolation
|
||||
vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
|
||||
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
||||
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
||||
vec4 iz0 = vec4(Pi0.zzzz);
|
||||
vec4 iz1 = vec4(Pi1.zzzz);
|
||||
vec4 iw0 = vec4(Pi0.wwww);
|
||||
vec4 iw1 = vec4(Pi1.wwww);
|
||||
|
||||
vec4 ixy = permute(permute(ix) + iy);
|
||||
vec4 ixy0 = permute(ixy + iz0);
|
||||
vec4 ixy1 = permute(ixy + iz1);
|
||||
vec4 ixy00 = permute(ixy0 + iw0);
|
||||
vec4 ixy01 = permute(ixy0 + iw1);
|
||||
vec4 ixy10 = permute(ixy1 + iw0);
|
||||
vec4 ixy11 = permute(ixy1 + iw1);
|
||||
|
||||
vec4 gx00 = ixy00 / 7.0;
|
||||
vec4 gy00 = floor(gx00) / 7.0;
|
||||
vec4 gz00 = floor(gy00) / 6.0;
|
||||
gx00 = fract(gx00) - 0.5;
|
||||
gy00 = fract(gy00) - 0.5;
|
||||
gz00 = fract(gz00) - 0.5;
|
||||
vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
|
||||
vec4 sw00 = step(gw00, vec4(0.0));
|
||||
gx00 -= sw00 * (step(0.0, gx00) - 0.5);
|
||||
gy00 -= sw00 * (step(0.0, gy00) - 0.5);
|
||||
|
||||
vec4 gx01 = ixy01 / 7.0;
|
||||
vec4 gy01 = floor(gx01) / 7.0;
|
||||
vec4 gz01 = floor(gy01) / 6.0;
|
||||
gx01 = fract(gx01) - 0.5;
|
||||
gy01 = fract(gy01) - 0.5;
|
||||
gz01 = fract(gz01) - 0.5;
|
||||
vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
|
||||
vec4 sw01 = step(gw01, vec4(0.0));
|
||||
gx01 -= sw01 * (step(0.0, gx01) - 0.5);
|
||||
gy01 -= sw01 * (step(0.0, gy01) - 0.5);
|
||||
|
||||
vec4 gx10 = ixy10 / 7.0;
|
||||
vec4 gy10 = floor(gx10) / 7.0;
|
||||
vec4 gz10 = floor(gy10) / 6.0;
|
||||
gx10 = fract(gx10) - 0.5;
|
||||
gy10 = fract(gy10) - 0.5;
|
||||
gz10 = fract(gz10) - 0.5;
|
||||
vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
|
||||
vec4 sw10 = step(gw10, vec4(0.0));
|
||||
gx10 -= sw10 * (step(0.0, gx10) - 0.5);
|
||||
gy10 -= sw10 * (step(0.0, gy10) - 0.5);
|
||||
|
||||
vec4 gx11 = ixy11 / 7.0;
|
||||
vec4 gy11 = floor(gx11) / 7.0;
|
||||
vec4 gz11 = floor(gy11) / 6.0;
|
||||
gx11 = fract(gx11) - 0.5;
|
||||
gy11 = fract(gy11) - 0.5;
|
||||
gz11 = fract(gz11) - 0.5;
|
||||
vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
|
||||
vec4 sw11 = step(gw11, vec4(0.0));
|
||||
gx11 -= sw11 * (step(0.0, gx11) - 0.5);
|
||||
gy11 -= sw11 * (step(0.0, gy11) - 0.5);
|
||||
|
||||
vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
|
||||
vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
|
||||
vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
|
||||
vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
|
||||
vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
|
||||
vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
|
||||
vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
|
||||
vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
|
||||
vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
|
||||
vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
|
||||
vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
|
||||
vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
|
||||
vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
|
||||
vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
|
||||
vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
|
||||
vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
|
||||
|
||||
vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
|
||||
g0000 *= norm00.x;
|
||||
g0100 *= norm00.y;
|
||||
g1000 *= norm00.z;
|
||||
g1100 *= norm00.w;
|
||||
|
||||
vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
|
||||
g0001 *= norm01.x;
|
||||
g0101 *= norm01.y;
|
||||
g1001 *= norm01.z;
|
||||
g1101 *= norm01.w;
|
||||
|
||||
vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
|
||||
g0010 *= norm10.x;
|
||||
g0110 *= norm10.y;
|
||||
g1010 *= norm10.z;
|
||||
g1110 *= norm10.w;
|
||||
|
||||
vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
|
||||
g0011 *= norm11.x;
|
||||
g0111 *= norm11.y;
|
||||
g1011 *= norm11.z;
|
||||
g1111 *= norm11.w;
|
||||
|
||||
float n0000 = dot(g0000, Pf0);
|
||||
float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
|
||||
float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
|
||||
float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
|
||||
float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
|
||||
float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
|
||||
float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
|
||||
float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
|
||||
float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
|
||||
float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
|
||||
float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
|
||||
float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
|
||||
float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
|
||||
float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
|
||||
float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
|
||||
float n1111 = dot(g1111, Pf1);
|
||||
|
||||
vec4 fade_xyzw = fade(Pf0);
|
||||
vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
|
||||
vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
|
||||
vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
|
||||
vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
|
||||
float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
|
||||
return 2.2 * n_xyzw;
|
||||
}
|
||||
|
||||
varying vec2 vUv;
|
||||
varying vec3 vPosition;
|
||||
uniform float uTime;
|
||||
|
||||
// 6 lyers of noise
|
||||
|
||||
float fbm(vec4 p){
|
||||
float sum = 0.;
|
||||
float amp = 1.;
|
||||
float scale = 1.;
|
||||
for(int i = 0; i < 6; i++){
|
||||
sum+=cnoise(p*scale)*amp;
|
||||
p.w += 100.;
|
||||
amp*=0.9;
|
||||
scale *= 2.;
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
|
||||
void main(){
|
||||
|
||||
vec4 p = vec4(vPosition*3.,uTime*0.05);
|
||||
|
||||
float noisy = fbm(p);
|
||||
|
||||
vec4 p1 = vec4(vPosition*2.,uTime*0.07);
|
||||
float spots = max(cnoise(p1),0.);
|
||||
|
||||
gl_FragColor = vec4(noisy);
|
||||
gl_FragColor *= mix(1.,spots, 0.3);
|
||||
gl_FragColor *= vec4(1.,0.3,0.,1.);
|
||||
}`
|
||||
);
|
||||
|
||||
const SunShaderMaterial = shaderMaterial(
|
||||
{
|
||||
uTime: 0,
|
||||
uPerlin: null,
|
||||
},
|
||||
glsl`
|
||||
uniform float uTime;
|
||||
|
||||
varying vec3 vPosition;
|
||||
varying vec2 vUv;
|
||||
|
||||
void main(){
|
||||
vPosition = position;
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
|
||||
}`,
|
||||
glsl`
|
||||
uniform float uTime;
|
||||
uniform samplerCube uPerlin;
|
||||
|
||||
varying vec3 vPosition;
|
||||
varying vec2 vUv;
|
||||
|
||||
void main(){
|
||||
|
||||
gl_FragColor = textureCube(uPerlin, vPosition);
|
||||
//gl_FragColor = vec4(0.8,1.,0.1,1.);
|
||||
}`
|
||||
);
|
||||
|
||||
extend({ SunPerlinMaterial });
|
||||
extend({ SunShaderMaterial });
|
||||
|
||||
const Sun = () => {
|
||||
const { scene, camera, gl, clock } = useThree();
|
||||
console.log(useThree());
|
||||
const sunMesh = useRef();
|
||||
const scene2 = new THREE.Scene();
|
||||
const time = useRef(0);
|
||||
|
||||
const sunPerlinMesh = useRef();
|
||||
const sphere = new THREE.SphereGeometry(2, 30, 30);
|
||||
const sphereMat = new THREE.ShaderMaterial({
|
||||
side: THREE.DoubleSide,
|
||||
uniforms: {
|
||||
uTime: clock.getElapsedTime(),
|
||||
},
|
||||
vertexShader: `uniform float uTime;
|
||||
|
||||
varying vec3 vPosition;
|
||||
varying vec2 vUv;
|
||||
|
||||
void main(){
|
||||
vPosition = position;
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
|
||||
}`,
|
||||
fragmentShader: `
|
||||
uniform float uTime;
|
||||
//uniform samplerCube uPerlin;
|
||||
|
||||
varying vec3 vPosition;
|
||||
varying vec2 vUv;
|
||||
|
||||
void main(){
|
||||
|
||||
//gl_FragColor = textureCube(uPerlin, vPosition);
|
||||
gl_FragColor = vec4(vUv,1.*uTime,1.);
|
||||
}`,
|
||||
});
|
||||
const sphereMesh = new THREE.Mesh(sphere, sphereMat);
|
||||
|
||||
const perlinSphere = new THREE.SphereGeometry(3, 30, 30);
|
||||
const perlinSphereMat = new THREE.ShaderMaterial({
|
||||
side: THREE.DoubleSide,
|
||||
uniforms: {
|
||||
uTime: time.current,
|
||||
},
|
||||
vertexShader: `
|
||||
uniform float uTime;
|
||||
|
||||
varying vec3 vPosition;
|
||||
|
||||
varying vec2 vUv;
|
||||
void main(){
|
||||
|
||||
vPosition = position;
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.);
|
||||
}`,
|
||||
fragmentShader: `
|
||||
// Classic Perlin 3D Noise
|
||||
// by Stefan Gustavson
|
||||
//
|
||||
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
|
||||
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
|
||||
vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
|
||||
|
||||
float cnoise(vec4 P){
|
||||
vec4 Pi0 = floor(P); // Integer part for indexing
|
||||
vec4 Pi1 = Pi0 + 1.0; // Integer part + 1
|
||||
Pi0 = mod(Pi0, 289.0);
|
||||
Pi1 = mod(Pi1, 289.0);
|
||||
vec4 Pf0 = fract(P); // Fractional part for interpolation
|
||||
vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
|
||||
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
||||
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
||||
vec4 iz0 = vec4(Pi0.zzzz);
|
||||
vec4 iz1 = vec4(Pi1.zzzz);
|
||||
vec4 iw0 = vec4(Pi0.wwww);
|
||||
vec4 iw1 = vec4(Pi1.wwww);
|
||||
|
||||
vec4 ixy = permute(permute(ix) + iy);
|
||||
vec4 ixy0 = permute(ixy + iz0);
|
||||
vec4 ixy1 = permute(ixy + iz1);
|
||||
vec4 ixy00 = permute(ixy0 + iw0);
|
||||
vec4 ixy01 = permute(ixy0 + iw1);
|
||||
vec4 ixy10 = permute(ixy1 + iw0);
|
||||
vec4 ixy11 = permute(ixy1 + iw1);
|
||||
|
||||
vec4 gx00 = ixy00 / 7.0;
|
||||
vec4 gy00 = floor(gx00) / 7.0;
|
||||
vec4 gz00 = floor(gy00) / 6.0;
|
||||
gx00 = fract(gx00) - 0.5;
|
||||
gy00 = fract(gy00) - 0.5;
|
||||
gz00 = fract(gz00) - 0.5;
|
||||
vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
|
||||
vec4 sw00 = step(gw00, vec4(0.0));
|
||||
gx00 -= sw00 * (step(0.0, gx00) - 0.5);
|
||||
gy00 -= sw00 * (step(0.0, gy00) - 0.5);
|
||||
|
||||
vec4 gx01 = ixy01 / 7.0;
|
||||
vec4 gy01 = floor(gx01) / 7.0;
|
||||
vec4 gz01 = floor(gy01) / 6.0;
|
||||
gx01 = fract(gx01) - 0.5;
|
||||
gy01 = fract(gy01) - 0.5;
|
||||
gz01 = fract(gz01) - 0.5;
|
||||
vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
|
||||
vec4 sw01 = step(gw01, vec4(0.0));
|
||||
gx01 -= sw01 * (step(0.0, gx01) - 0.5);
|
||||
gy01 -= sw01 * (step(0.0, gy01) - 0.5);
|
||||
|
||||
vec4 gx10 = ixy10 / 7.0;
|
||||
vec4 gy10 = floor(gx10) / 7.0;
|
||||
vec4 gz10 = floor(gy10) / 6.0;
|
||||
gx10 = fract(gx10) - 0.5;
|
||||
gy10 = fract(gy10) - 0.5;
|
||||
gz10 = fract(gz10) - 0.5;
|
||||
vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
|
||||
vec4 sw10 = step(gw10, vec4(0.0));
|
||||
gx10 -= sw10 * (step(0.0, gx10) - 0.5);
|
||||
gy10 -= sw10 * (step(0.0, gy10) - 0.5);
|
||||
|
||||
vec4 gx11 = ixy11 / 7.0;
|
||||
vec4 gy11 = floor(gx11) / 7.0;
|
||||
vec4 gz11 = floor(gy11) / 6.0;
|
||||
gx11 = fract(gx11) - 0.5;
|
||||
gy11 = fract(gy11) - 0.5;
|
||||
gz11 = fract(gz11) - 0.5;
|
||||
vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
|
||||
vec4 sw11 = step(gw11, vec4(0.0));
|
||||
gx11 -= sw11 * (step(0.0, gx11) - 0.5);
|
||||
gy11 -= sw11 * (step(0.0, gy11) - 0.5);
|
||||
|
||||
vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
|
||||
vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
|
||||
vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
|
||||
vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
|
||||
vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
|
||||
vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
|
||||
vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
|
||||
vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
|
||||
vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
|
||||
vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
|
||||
vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
|
||||
vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
|
||||
vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
|
||||
vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
|
||||
vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
|
||||
vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
|
||||
|
||||
vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
|
||||
g0000 *= norm00.x;
|
||||
g0100 *= norm00.y;
|
||||
g1000 *= norm00.z;
|
||||
g1100 *= norm00.w;
|
||||
|
||||
vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
|
||||
g0001 *= norm01.x;
|
||||
g0101 *= norm01.y;
|
||||
g1001 *= norm01.z;
|
||||
g1101 *= norm01.w;
|
||||
|
||||
vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
|
||||
g0010 *= norm10.x;
|
||||
g0110 *= norm10.y;
|
||||
g1010 *= norm10.z;
|
||||
g1110 *= norm10.w;
|
||||
|
||||
vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
|
||||
g0011 *= norm11.x;
|
||||
g0111 *= norm11.y;
|
||||
g1011 *= norm11.z;
|
||||
g1111 *= norm11.w;
|
||||
|
||||
float n0000 = dot(g0000, Pf0);
|
||||
float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
|
||||
float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
|
||||
float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
|
||||
float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
|
||||
float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
|
||||
float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
|
||||
float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
|
||||
float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
|
||||
float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
|
||||
float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
|
||||
float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
|
||||
float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
|
||||
float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
|
||||
float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
|
||||
float n1111 = dot(g1111, Pf1);
|
||||
|
||||
vec4 fade_xyzw = fade(Pf0);
|
||||
vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
|
||||
vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
|
||||
vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
|
||||
vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
|
||||
float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
|
||||
return 2.2 * n_xyzw;
|
||||
}
|
||||
|
||||
// Classic Perlin noise, periodic version
|
||||
float cnoise(vec4 P, vec4 rep){
|
||||
vec4 Pi0 = mod(floor(P), rep); // Integer part modulo rep
|
||||
vec4 Pi1 = mod(Pi0 + 1.0, rep); // Integer part + 1 mod rep
|
||||
vec4 Pf0 = fract(P); // Fractional part for interpolation
|
||||
vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0
|
||||
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
||||
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
||||
vec4 iz0 = vec4(Pi0.zzzz);
|
||||
vec4 iz1 = vec4(Pi1.zzzz);
|
||||
vec4 iw0 = vec4(Pi0.wwww);
|
||||
vec4 iw1 = vec4(Pi1.wwww);
|
||||
|
||||
vec4 ixy = permute(permute(ix) + iy);
|
||||
vec4 ixy0 = permute(ixy + iz0);
|
||||
vec4 ixy1 = permute(ixy + iz1);
|
||||
vec4 ixy00 = permute(ixy0 + iw0);
|
||||
vec4 ixy01 = permute(ixy0 + iw1);
|
||||
vec4 ixy10 = permute(ixy1 + iw0);
|
||||
vec4 ixy11 = permute(ixy1 + iw1);
|
||||
|
||||
vec4 gx00 = ixy00 / 7.0;
|
||||
vec4 gy00 = floor(gx00) / 7.0;
|
||||
vec4 gz00 = floor(gy00) / 6.0;
|
||||
gx00 = fract(gx00) - 0.5;
|
||||
gy00 = fract(gy00) - 0.5;
|
||||
gz00 = fract(gz00) - 0.5;
|
||||
vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00);
|
||||
vec4 sw00 = step(gw00, vec4(0.0));
|
||||
gx00 -= sw00 * (step(0.0, gx00) - 0.5);
|
||||
gy00 -= sw00 * (step(0.0, gy00) - 0.5);
|
||||
|
||||
vec4 gx01 = ixy01 / 7.0;
|
||||
vec4 gy01 = floor(gx01) / 7.0;
|
||||
vec4 gz01 = floor(gy01) / 6.0;
|
||||
gx01 = fract(gx01) - 0.5;
|
||||
gy01 = fract(gy01) - 0.5;
|
||||
gz01 = fract(gz01) - 0.5;
|
||||
vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01);
|
||||
vec4 sw01 = step(gw01, vec4(0.0));
|
||||
gx01 -= sw01 * (step(0.0, gx01) - 0.5);
|
||||
gy01 -= sw01 * (step(0.0, gy01) - 0.5);
|
||||
|
||||
vec4 gx10 = ixy10 / 7.0;
|
||||
vec4 gy10 = floor(gx10) / 7.0;
|
||||
vec4 gz10 = floor(gy10) / 6.0;
|
||||
gx10 = fract(gx10) - 0.5;
|
||||
gy10 = fract(gy10) - 0.5;
|
||||
gz10 = fract(gz10) - 0.5;
|
||||
vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10);
|
||||
vec4 sw10 = step(gw10, vec4(0.0));
|
||||
gx10 -= sw10 * (step(0.0, gx10) - 0.5);
|
||||
gy10 -= sw10 * (step(0.0, gy10) - 0.5);
|
||||
|
||||
vec4 gx11 = ixy11 / 7.0;
|
||||
vec4 gy11 = floor(gx11) / 7.0;
|
||||
vec4 gz11 = floor(gy11) / 6.0;
|
||||
gx11 = fract(gx11) - 0.5;
|
||||
gy11 = fract(gy11) - 0.5;
|
||||
gz11 = fract(gz11) - 0.5;
|
||||
vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11);
|
||||
vec4 sw11 = step(gw11, vec4(0.0));
|
||||
gx11 -= sw11 * (step(0.0, gx11) - 0.5);
|
||||
gy11 -= sw11 * (step(0.0, gy11) - 0.5);
|
||||
|
||||
vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x);
|
||||
vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y);
|
||||
vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z);
|
||||
vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w);
|
||||
vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x);
|
||||
vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y);
|
||||
vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z);
|
||||
vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w);
|
||||
vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x);
|
||||
vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y);
|
||||
vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z);
|
||||
vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w);
|
||||
vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x);
|
||||
vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y);
|
||||
vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z);
|
||||
vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w);
|
||||
|
||||
vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100)));
|
||||
g0000 *= norm00.x;
|
||||
g0100 *= norm00.y;
|
||||
g1000 *= norm00.z;
|
||||
g1100 *= norm00.w;
|
||||
|
||||
vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101)));
|
||||
g0001 *= norm01.x;
|
||||
g0101 *= norm01.y;
|
||||
g1001 *= norm01.z;
|
||||
g1101 *= norm01.w;
|
||||
|
||||
vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110)));
|
||||
g0010 *= norm10.x;
|
||||
g0110 *= norm10.y;
|
||||
g1010 *= norm10.z;
|
||||
g1110 *= norm10.w;
|
||||
|
||||
vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111)));
|
||||
g0011 *= norm11.x;
|
||||
g0111 *= norm11.y;
|
||||
g1011 *= norm11.z;
|
||||
g1111 *= norm11.w;
|
||||
|
||||
float n0000 = dot(g0000, Pf0);
|
||||
float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw));
|
||||
float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw));
|
||||
float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw));
|
||||
float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w));
|
||||
float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w));
|
||||
float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w));
|
||||
float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w));
|
||||
float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w));
|
||||
float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w));
|
||||
float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w));
|
||||
float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w));
|
||||
float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw));
|
||||
float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw));
|
||||
float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw));
|
||||
float n1111 = dot(g1111, Pf1);
|
||||
|
||||
vec4 fade_xyzw = fade(Pf0);
|
||||
vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w);
|
||||
vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w);
|
||||
vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z);
|
||||
vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y);
|
||||
float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x);
|
||||
return 2.2 * n_xyzw;
|
||||
}
|
||||
|
||||
varying vec2 vUv;
|
||||
varying vec3 vPosition;
|
||||
uniform float uTime;
|
||||
|
||||
// 6 lyers of noise
|
||||
|
||||
float fbm(vec4 p){
|
||||
float sum = 0.;
|
||||
float amp = 1.;
|
||||
float scale = 1.;
|
||||
for(int i = 0; i < 6; i++){
|
||||
sum+=cnoise(p*scale)*amp;
|
||||
p.w += 100.;
|
||||
amp*=0.9;
|
||||
scale *= 2.;
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
|
||||
void main(){
|
||||
|
||||
vec4 p = vec4(vPosition*3.,uTime*0.05);
|
||||
|
||||
float noisy = fbm(p);
|
||||
|
||||
vec4 p1 = vec4(vPosition*2.,uTime*10.);
|
||||
float spots = max(cnoise(p1),0.);
|
||||
|
||||
gl_FragColor = vec4(noisy);
|
||||
gl_FragColor *= mix(1.,spots, 0.3);
|
||||
gl_FragColor *= vec4(1.,0.3,0.,1.);
|
||||
}`,
|
||||
});
|
||||
//const perlinSphereMesh = new THREE.Mesh(perlinSphere, perlinSphereMat);
|
||||
|
||||
//scene.add(sphereMesh);
|
||||
//scene.add(perlinSphereMesh);
|
||||
//const scene1 = useRef();
|
||||
//const scene2 = useRef();
|
||||
//const cubeCamera1 = useRef();
|
||||
/*const cubeRenderTarget1 = new THREE.WebGLRenderTarget(256, {
|
||||
format: THREE.RGBAFormat,
|
||||
generateMipMaps: true,
|
||||
minFilter: THREE.LinearMipMapLinearFilter,
|
||||
encoding: THREE.sRGBEncoding,
|
||||
});
|
||||
const cubeCamera = useCubeCamera(256, 0.1, 1000);*/
|
||||
const cube = new THREE.CubeCamera();
|
||||
scene.add(cube);
|
||||
const ref = useRef();
|
||||
const ref1 = useRef();
|
||||
const tmpRef = useRef();
|
||||
useFrame(({ clock, gl }) => {
|
||||
perlinSphereMat.uniforms.uTime = clock.getElapsedTime();
|
||||
console.log(perlinSphereMat.uniforms.uTime);
|
||||
//console.log(gl);
|
||||
gl.render(scene, camera);
|
||||
time.current = clock.getElapsedTime();
|
||||
//console.log(time.current);
|
||||
ref.current.uTime = clock.getElapsedTime();
|
||||
ref1.current.uTime = clock.getElapsedTime();
|
||||
//gl.render(scene, camera);
|
||||
//console.log(tmpRef);
|
||||
ref1.current.uPerlin = tmpRef.current;
|
||||
|
||||
//cubeCamera.camera.position.copy(sunPerlinMesh.current.position);
|
||||
//cubeCamera.camera.update(renderer, scene);
|
||||
//gl.render(scene1, camera);
|
||||
//console.log(camera);
|
||||
//console.log(ref1.current);
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<CubeCamera>
|
||||
{(texture) => {
|
||||
//tmpRef.current = texture;
|
||||
}}
|
||||
</CubeCamera>
|
||||
<mesh ref={sunMesh} position={[0, 0, 0]}>
|
||||
<sphereGeometry args={[1.3, 30, 30]} />
|
||||
<sunShaderMaterial ref={ref1} />
|
||||
</mesh>
|
||||
|
||||
<mesh ref={sunPerlinMesh} position={[0, 0, 0]}>
|
||||
<sphereGeometry args={[1.4, 30, 30]} />
|
||||
<sunPerlinMaterial ref={ref} />
|
||||
</mesh>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SunScene = () => {
|
||||
return (
|
||||
<Canvas style={{ backgroundColor: "white" }}>
|
||||
<Suspense fallback={null}>
|
||||
<Sun />
|
||||
<OrbitControls enablePan={false} />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
);
|
||||
};
|
||||
|
||||
export default SunScene;
|
||||
|
|
@ -5,4 +5,5 @@ import glsl from "vite-plugin-glsl";
|
|||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), glsl()],
|
||||
publicDir: 'public'
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue