mirror of
https://github.com/denismhz/solar-system.git
synced 2025-11-09 16:16:22 +01:00
commit before breaking everything
This commit is contained in:
parent
83bc38696f
commit
f304782ae8
|
|
@ -2,6 +2,12 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Why no working</title>
|
<title>Why no working</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
|
||||||
|
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
|
||||||
|
|
@ -130,7 +130,7 @@ const WaveShaderMaterial = shaderMaterial(
|
||||||
varying vec2 vUv;
|
varying vec2 vUv;
|
||||||
|
|
||||||
void main(){
|
void main(){
|
||||||
gl_FragColor = vec4(cos(vUv.x + uTime*2.0) * uColor, 1.0);
|
gl_FragColor = vec4(cos(vUv.x - uTime*2.0) * uColor, 1.0);
|
||||||
}`
|
}`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -28,26 +28,24 @@ import { MyContext } from "./Scene3.jsx";
|
||||||
|
|
||||||
export const PlanetOverlayContext = createContext();
|
export const PlanetOverlayContext = createContext();
|
||||||
|
|
||||||
|
import { Planet } from "./planet.jsx";
|
||||||
|
|
||||||
export const SharedPlanetState = () => {
|
export const SharedPlanetState = () => {
|
||||||
const { customData } = useContext(MyContext);
|
const { customData } = useContext(MyContext);
|
||||||
|
|
||||||
let [nameVis, setNameVis] = useState("visible");
|
let [nameVis, setNameVis] = useState("visible");
|
||||||
let [iconVis, setIconVis] = useState("visible");
|
let [iconVis, setIconVis] = useState("visible");
|
||||||
|
|
||||||
|
const lastPositionUpdate = useRef(0);
|
||||||
|
|
||||||
const handleVisibility = () => {
|
const handleVisibility = () => {
|
||||||
if (nameVis == "visible" && iconVis == "visible") {
|
if (nameVis == "visible" && iconVis == "visible") {
|
||||||
setNameVis("hidden");
|
setNameVis("hidden");
|
||||||
console.log(nameVis);
|
|
||||||
console.log("hiding names");
|
|
||||||
} else if (nameVis == "hidden" && iconVis == "visible") {
|
} else if (nameVis == "hidden" && iconVis == "visible") {
|
||||||
setIconVis("hidden");
|
setIconVis("hidden");
|
||||||
console.log(nameVis);
|
|
||||||
console.log("hiding icons");
|
|
||||||
} else if (nameVis == "hidden" && iconVis == "hidden") {
|
} else if (nameVis == "hidden" && iconVis == "hidden") {
|
||||||
setIconVis("visible");
|
setIconVis("visible");
|
||||||
setNameVis("visible");
|
setNameVis("visible");
|
||||||
console.log(nameVis);
|
|
||||||
console.log("showing everything");
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
customData.current["handleVisibility"] = handleVisibility;
|
customData.current["handleVisibility"] = handleVisibility;
|
||||||
|
|
@ -58,7 +56,7 @@ export const SharedPlanetState = () => {
|
||||||
customData.current["handleReset"] = handleReset;
|
customData.current["handleReset"] = handleReset;
|
||||||
|
|
||||||
//set speed (timeinterval between positions 60000ms*speed)
|
//set speed (timeinterval between positions 60000ms*speed)
|
||||||
const [speed, setSpeed] = useState(1);
|
const [speed, setSpeed] = useState(60);
|
||||||
const updateSpeed = (newSpeed) => {
|
const updateSpeed = (newSpeed) => {
|
||||||
setSpeed(newSpeed);
|
setSpeed(newSpeed);
|
||||||
setSpeedChanged(true);
|
setSpeedChanged(true);
|
||||||
|
|
@ -104,6 +102,42 @@ export const SharedPlanetState = () => {
|
||||||
//console.log(oldState.length);
|
//console.log(oldState.length);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const dataRef = useRef(null);
|
||||||
|
const loadingRef = useRef(false);
|
||||||
|
const errRef = useRef(null);
|
||||||
|
|
||||||
|
useFrame(({ clock }) => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
fetch(`http://127.0.0.1:8000/duration`).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) => {
|
||||||
|
dataRef.current = data;
|
||||||
|
errRef.current = null;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
dataRef.current = null;
|
||||||
|
errRef.current = err.message;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loadingRef.current = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||||
|
if (timeSinceLastUpdate >= 5) {
|
||||||
|
fetchData();
|
||||||
|
console.log(dataRef.current);
|
||||||
|
lastPositionUpdate.current = clock.elapsedTime;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed }}>
|
<PlanetOverlayContext.Provider value={{ nameVis, iconVis, speed }}>
|
||||||
|
|
|
||||||
|
|
@ -31,10 +31,10 @@ export function CustomCamera(props) {
|
||||||
const mouseUp = useRef(false);
|
const mouseUp = useRef(false);
|
||||||
let _mouseStart = useRef(new THREE.Vector2(0, 0));
|
let _mouseStart = useRef(new THREE.Vector2(0, 0));
|
||||||
let _mouseEnd = useRef(new THREE.Vector2(0, 0));
|
let _mouseEnd = useRef(new THREE.Vector2(0, 0));
|
||||||
let distance = useRef(0);
|
let distance = useRef(200);
|
||||||
|
|
||||||
const [currObj, setCurrObj] = useState(undefined);
|
const [currObj, setCurrObj] = useState(undefined);
|
||||||
let rotate = useRef(false);
|
let rotate = useRef(true);
|
||||||
|
|
||||||
const handleMouseWheel = (event) => {
|
const handleMouseWheel = (event) => {
|
||||||
const delta = Math.sign(event.deltaY);
|
const delta = Math.sign(event.deltaY);
|
||||||
|
|
@ -47,7 +47,7 @@ export function CustomCamera(props) {
|
||||||
const deltaX = event.movementX;
|
const deltaX = event.movementX;
|
||||||
const deltaY = event.movementY;
|
const deltaY = event.movementY;
|
||||||
|
|
||||||
const rotationSpeed = 0.01;
|
const rotationSpeed = 0.005;
|
||||||
|
|
||||||
// Create quaternions for rotation around X and Y axes
|
// Create quaternions for rotation around X and Y axes
|
||||||
const quaternionX = new THREE.Quaternion().setFromAxisAngle(
|
const quaternionX = new THREE.Quaternion().setFromAxisAngle(
|
||||||
|
|
@ -63,7 +63,8 @@ export function CustomCamera(props) {
|
||||||
const deltaQuaternion = quaternionY.multiply(quaternionX);
|
const deltaQuaternion = quaternionY.multiply(quaternionX);
|
||||||
|
|
||||||
// Apply the rotation to the camera quaternion
|
// Apply the rotation to the camera quaternion
|
||||||
camGroup.current.quaternion.multiply(deltaQuaternion);
|
if (camGroup.current.quaternion)
|
||||||
|
camGroup.current.quaternion.multiply(deltaQuaternion);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -84,10 +85,17 @@ export function CustomCamera(props) {
|
||||||
customData.current["handleLookAt"] = handleLookAt;
|
customData.current["handleLookAt"] = handleLookAt;
|
||||||
|
|
||||||
const handleZoom = (delta) => {
|
const handleZoom = (delta) => {
|
||||||
const zoomSpeed = 0.1;
|
let zoomSpeed = 0.01;
|
||||||
|
if (camGroup && cameraRef) {
|
||||||
|
zoomSpeed *= cameraRef.current.position.distanceTo(
|
||||||
|
camGroup.current.position
|
||||||
|
);
|
||||||
|
console.log("asdasd");
|
||||||
|
}
|
||||||
|
|
||||||
function newDistance(prevDistance) {
|
function newDistance(prevDistance) {
|
||||||
const newDistance = prevDistance + delta * zoomSpeed;
|
const newDistance = prevDistance + delta * zoomSpeed;
|
||||||
return Math.max(1, newDistance); // Adjust the minimum distance as needed
|
return Math.max(0, newDistance); // Adjust the minimum distance as needed
|
||||||
}
|
}
|
||||||
distance.current = newDistance(distance.current);
|
distance.current = newDistance(distance.current);
|
||||||
console.log(distance);
|
console.log(distance);
|
||||||
|
|
@ -113,7 +121,7 @@ export function CustomCamera(props) {
|
||||||
cameraRef.current.aspect = size.width / size.height;
|
cameraRef.current.aspect = size.width / size.height;
|
||||||
cameraRef.current.updateProjectionMatrix();
|
cameraRef.current.updateProjectionMatrix();
|
||||||
}
|
}
|
||||||
cameraRef.current.position.copy(new THREE.Vector3(0, 0, 1000));
|
cameraRef.current.position.copy(new THREE.Vector3(0, 0, 400));
|
||||||
window.addEventListener("mousedown", handleMouseDown);
|
window.addEventListener("mousedown", handleMouseDown);
|
||||||
window.addEventListener("mouseup", handleMouseUp);
|
window.addEventListener("mouseup", handleMouseUp);
|
||||||
window.addEventListener("mousemove", handleMouseMove);
|
window.addEventListener("mousemove", handleMouseMove);
|
||||||
|
|
@ -124,39 +132,49 @@ export function CustomCamera(props) {
|
||||||
set({ camera: cameraRef.current });
|
set({ camera: cameraRef.current });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let lerpedilerp = useRef(0.01);
|
||||||
|
|
||||||
useFrame(({ clock }) => {
|
useFrame(({ clock }) => {
|
||||||
cameraRef.current.updateProjectionMatrix();
|
cameraRef.current.updateProjectionMatrix();
|
||||||
|
|
||||||
if (animate && currObj) {
|
if (animate && currObj) {
|
||||||
distance.current =
|
distance.current =
|
||||||
currObj.children[1].geometry.boundingSphere.radius * 2.5;
|
currObj.children[1].geometry.boundingSphere.radius * 2.5;
|
||||||
camGroup.current.position.lerp(currObj.position, 0.02);
|
camGroup.current.position.lerp(currObj.position, lerpedilerp.current);
|
||||||
cameraRef.current.position.lerp(
|
cameraRef.current.position.lerp(
|
||||||
new THREE.Vector3(
|
new THREE.Vector3(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
currObj.children[1].geometry.boundingSphere.radius * 2.5
|
currObj.children[1].geometry.boundingSphere.radius * 2.5
|
||||||
),
|
),
|
||||||
0.02
|
lerpedilerp.current
|
||||||
);
|
);
|
||||||
|
|
||||||
cameraRef.current.lookAt(currObj.position);
|
cameraRef.current.lookAt(currObj.position);
|
||||||
|
|
||||||
rotate.current = false;
|
rotate.current = false;
|
||||||
|
lerpedilerp.current *= 1.1;
|
||||||
|
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.1) {
|
||||||
currObj.add(camGroup.current);
|
currObj.add(camGroup.current);
|
||||||
camGroup.current.position.copy(new THREE.Vector3(0, 0, 0), 0.2);
|
camGroup.current.position.copy(new THREE.Vector3(0, 0, 0), 0.2);
|
||||||
rotate.current = true;
|
rotate.current = true;
|
||||||
setAnimate(false);
|
setAnimate(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (rotate.current) {
|
if (rotate.current && currObj) {
|
||||||
/* cameraRef.current.quaternion.multiply(lastQ.current); */
|
/* cameraRef.current.quaternion.multiply(lastQ.current); */
|
||||||
//camGroup.current.rotation.x += 0.005;
|
//camGroup.current.rotation.x += 0.005;
|
||||||
cameraRef.current.position.copy(
|
lerpedilerp.current = 0.01;
|
||||||
new THREE.Vector3(0, 0, distance.current)
|
if (
|
||||||
);
|
distance.current >
|
||||||
|
currObj.children[1].geometry.boundingSphere.radius * 2.5
|
||||||
|
) {
|
||||||
|
cameraRef.current.position.copy(
|
||||||
|
new THREE.Vector3(0, 0, distance.current)
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ export const ScreenOverlay = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="slidecontainer">
|
{/* <div className="slidecontainer">
|
||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
min="30"
|
min="30"
|
||||||
|
|
@ -39,9 +39,36 @@ export const ScreenOverlay = () => {
|
||||||
className="slider"
|
className="slider"
|
||||||
id="myRange"
|
id="myRange"
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/> */}
|
||||||
<button onClick={handleReset}>Reset</button>
|
<div className="btn-toolbar slidecontainer">
|
||||||
<button onClick={handlePlanetOverlayVisibility}>Hide things</button>
|
<div className="btn-group mr-2" role="group">
|
||||||
|
<button onClick={handleReset} className="btn btn-primary">
|
||||||
|
<
|
||||||
|
</button>
|
||||||
|
<button onClick={handleReset} className="btn btn-primary">
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handlePlanetOverlayVisibility}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
>>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handlePlanetOverlayVisibility}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
>>>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="btn-group" role="group">
|
||||||
|
<button
|
||||||
|
onClick={handlePlanetOverlayVisibility}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
O
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<PlanetInfo />
|
<PlanetInfo />
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
163
src/planet.jsx
163
src/planet.jsx
|
|
@ -0,0 +1,163 @@
|
||||||
|
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 posArr = props.posArr;
|
||||||
|
console.log(props.posArr);
|
||||||
|
let speed = props.speed;
|
||||||
|
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";
|
||||||
|
});
|
||||||
|
|
||||||
|
useFrame(({ clock }) => {
|
||||||
|
const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current;
|
||||||
|
if (timeSinceLastUpdate >= 2 || speedChanged) {
|
||||||
|
//console.log("gethis");
|
||||||
|
getPosition("earth", setPosArr, posArr, planetPositionIndex.current);
|
||||||
|
lastPositionUpdate.current = clock.elapsedTime;
|
||||||
|
//console.log(group.current);
|
||||||
|
}
|
||||||
|
//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 an set planetPositionIndex
|
||||||
|
if (speed == 0) planetPositionIndex.current = 0;
|
||||||
|
if (
|
||||||
|
true &&
|
||||||
|
planetPositionIndex.current < posArr.length &&
|
||||||
|
posArr.length > 0
|
||||||
|
) {
|
||||||
|
group.current.position.set(
|
||||||
|
Number(
|
||||||
|
posArr[planetPositionIndex.current].position.x / distanceScaleFactor
|
||||||
|
),
|
||||||
|
Number(
|
||||||
|
posArr[planetPositionIndex.current].position.y / distanceScaleFactor
|
||||||
|
),
|
||||||
|
Number(
|
||||||
|
posArr[planetPositionIndex.current].position.z / distanceScaleFactor
|
||||||
|
)
|
||||||
|
);
|
||||||
|
planetPositionIndex.current += Number(1);
|
||||||
|
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
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<line ref={line}>
|
||||||
|
<bufferGeometry />
|
||||||
|
<lineBasicMaterial
|
||||||
|
color={"hotpink"}
|
||||||
|
transparent={true}
|
||||||
|
opacity={0.5}
|
||||||
|
linewidth={2}
|
||||||
|
/>
|
||||||
|
</line>
|
||||||
|
</group>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -31,9 +31,6 @@ canvas {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
|
||||||
}
|
|
||||||
|
|
||||||
.planetInfo {
|
.planetInfo {
|
||||||
z-index: 12;
|
z-index: 12;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -42,10 +39,14 @@ canvas {
|
||||||
}
|
}
|
||||||
|
|
||||||
.slidecontainer {
|
.slidecontainer {
|
||||||
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
z-index: 12;
|
z-index: 12;
|
||||||
top: 96%;
|
top: 90%;
|
||||||
right: 45%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.planetInfo .wrapper {
|
.planetInfo .wrapper {
|
||||||
|
|
|
||||||
396
src/sunscene.jsx
396
src/sunscene.jsx
|
|
@ -332,12 +332,12 @@ const SunPerlinMaterial = shaderMaterial(
|
||||||
|
|
||||||
float noisy = fbm(p);
|
float noisy = fbm(p);
|
||||||
|
|
||||||
vec4 p1 = vec4(vPosition*2.,uTime*0.05);
|
vec4 p1 = vec4(vPosition*2.,uTime*0.07);
|
||||||
float spots = max(cnoise(p1),0.);
|
float spots = max(cnoise(p1),0.);
|
||||||
|
|
||||||
gl_FragColor = vec4(noisy);
|
gl_FragColor = vec4(noisy);
|
||||||
gl_FragColor *= mix(1.,spots, 0.7);
|
gl_FragColor *= mix(1.,spots, 0.3);
|
||||||
//gl_FragColor = vec4(vUv,1.,1.);
|
gl_FragColor *= vec4(1.,0.3,0.,1.);
|
||||||
}`
|
}`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -367,7 +367,7 @@ const SunShaderMaterial = shaderMaterial(
|
||||||
void main(){
|
void main(){
|
||||||
|
|
||||||
gl_FragColor = textureCube(uPerlin, vPosition);
|
gl_FragColor = textureCube(uPerlin, vPosition);
|
||||||
//gl_FragColor = vec4(vUv,1.,1.);
|
//gl_FragColor = vec4(0.8,1.,0.1,1.);
|
||||||
}`
|
}`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -375,8 +375,372 @@ extend({ SunPerlinMaterial });
|
||||||
extend({ SunShaderMaterial });
|
extend({ SunShaderMaterial });
|
||||||
|
|
||||||
const Sun = () => {
|
const Sun = () => {
|
||||||
|
const { scene, camera, gl, clock } = useThree();
|
||||||
|
console.log(useThree());
|
||||||
const sunMesh = useRef();
|
const sunMesh = useRef();
|
||||||
|
const scene2 = new THREE.Scene();
|
||||||
|
const time = useRef(0);
|
||||||
|
|
||||||
const sunPerlinMesh = useRef();
|
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 scene1 = useRef();
|
||||||
//const scene2 = useRef();
|
//const scene2 = useRef();
|
||||||
//const cubeCamera1 = useRef();
|
//const cubeCamera1 = useRef();
|
||||||
|
|
@ -387,14 +751,24 @@ const Sun = () => {
|
||||||
encoding: THREE.sRGBEncoding,
|
encoding: THREE.sRGBEncoding,
|
||||||
});
|
});
|
||||||
const cubeCamera = useCubeCamera(256, 0.1, 1000);*/
|
const cubeCamera = useCubeCamera(256, 0.1, 1000);*/
|
||||||
|
const cube = new THREE.CubeCamera();
|
||||||
|
scene.add(cube);
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
const ref1 = useRef();
|
const ref1 = useRef();
|
||||||
const tmpRef = useRef();
|
const tmpRef = useRef();
|
||||||
useFrame(({ clock }) => {
|
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();
|
ref.current.uTime = clock.getElapsedTime();
|
||||||
ref1.current.uTime = clock.getElapsedTime();
|
ref1.current.uTime = clock.getElapsedTime();
|
||||||
|
//gl.render(scene, camera);
|
||||||
//console.log(tmpRef);
|
//console.log(tmpRef);
|
||||||
ref1.current.uPerlin = tmpRef.current;
|
ref1.current.uPerlin = tmpRef.current;
|
||||||
|
|
||||||
//cubeCamera.camera.position.copy(sunPerlinMesh.current.position);
|
//cubeCamera.camera.position.copy(sunPerlinMesh.current.position);
|
||||||
//cubeCamera.camera.update(renderer, scene);
|
//cubeCamera.camera.update(renderer, scene);
|
||||||
//gl.render(scene1, camera);
|
//gl.render(scene1, camera);
|
||||||
|
|
@ -405,16 +779,16 @@ const Sun = () => {
|
||||||
<>
|
<>
|
||||||
<CubeCamera>
|
<CubeCamera>
|
||||||
{(texture) => {
|
{(texture) => {
|
||||||
tmpRef.current = texture;
|
//tmpRef.current = texture;
|
||||||
}}
|
}}
|
||||||
</CubeCamera>
|
</CubeCamera>
|
||||||
<mesh ref={sunMesh} position={[-3, 0, 0]}>
|
<mesh ref={sunMesh} position={[0, 0, 0]}>
|
||||||
<sphereGeometry args={[1.2, 30, 30]} />
|
<sphereGeometry args={[1.3, 30, 30]} />
|
||||||
<sunShaderMaterial ref={ref1} side={THREE.DoubleSide} />
|
<sunShaderMaterial ref={ref1} />
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
<mesh ref={sunPerlinMesh} position={[0, 0, 0]}>
|
<mesh ref={sunPerlinMesh} position={[0, 0, 0]}>
|
||||||
<sphereGeometry args={[1.3, 30, 30]} side={THREE.DoubleSide} />
|
<sphereGeometry args={[1.4, 30, 30]} />
|
||||||
<sunPerlinMaterial ref={ref} />
|
<sunPerlinMaterial ref={ref} />
|
||||||
</mesh>
|
</mesh>
|
||||||
</>
|
</>
|
||||||
|
|
@ -423,7 +797,7 @@ const Sun = () => {
|
||||||
|
|
||||||
const SunScene = () => {
|
const SunScene = () => {
|
||||||
return (
|
return (
|
||||||
<Canvas>
|
<Canvas style={{ backgroundColor: "white" }}>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<Sun />
|
<Sun />
|
||||||
<OrbitControls enablePan={false} />
|
<OrbitControls enablePan={false} />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue