mirror of
https://github.com/Sosokker/SOS12.git
synced 2025-12-19 12:44:05 +01:00
add Earth Canvas
This commit is contained in:
Sirin Puenggun
parent
b668824636
commit
1d51f0f533
11
public/planet/license.txt
Normal file
11
public/planet/license.txt
Normal file
@ -0,0 +1,11 @@
|
||||
Model Information:
|
||||
* title: Stylized planet
|
||||
* source: https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70
|
||||
* author: cmzw (https://sketchfab.com/cmzw)
|
||||
|
||||
Model License:
|
||||
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
* requirements: Author must be credited. Commercial use is allowed.
|
||||
|
||||
If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
|
||||
This work is based on "Stylized planet" (https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70) by cmzw (https://sketchfab.com/cmzw) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
BIN
public/planet/scene.bin
Normal file
BIN
public/planet/scene.bin
Normal file
Binary file not shown.
536
public/planet/scene.gltf
Normal file
536
public/planet/scene.gltf
Normal file
@ -0,0 +1,536 @@
|
||||
{
|
||||
"accessors": [
|
||||
{
|
||||
"bufferView": 2,
|
||||
"componentType": 5126,
|
||||
"count": 26495,
|
||||
"max": [
|
||||
0.8758764863014221,
|
||||
0.8545469045639038,
|
||||
0.8728971481323242
|
||||
],
|
||||
"min": [
|
||||
-0.8763356804847717,
|
||||
-0.8634992837905884,
|
||||
-0.8758782148361206
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 2,
|
||||
"byteOffset": 317940,
|
||||
"componentType": 5126,
|
||||
"count": 26495,
|
||||
"max": [
|
||||
1.0,
|
||||
0.9999911785125732,
|
||||
0.9991646409034729
|
||||
],
|
||||
"min": [
|
||||
-1.0,
|
||||
-0.9999968409538269,
|
||||
-0.9999611377716064
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 1,
|
||||
"componentType": 5126,
|
||||
"count": 26495,
|
||||
"max": [
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"min": [
|
||||
0.0,
|
||||
0.0
|
||||
],
|
||||
"type": "VEC2"
|
||||
},
|
||||
{
|
||||
"bufferView": 0,
|
||||
"componentType": 5125,
|
||||
"count": 103014,
|
||||
"type": "SCALAR"
|
||||
},
|
||||
{
|
||||
"bufferView": 2,
|
||||
"byteOffset": 635880,
|
||||
"componentType": 5126,
|
||||
"count": 6596,
|
||||
"max": [
|
||||
0.6551179885864258,
|
||||
0.6613333821296692,
|
||||
0.6618664860725403
|
||||
],
|
||||
"min": [
|
||||
-0.6606217622756958,
|
||||
-0.6490849852561951,
|
||||
-0.6526646018028259
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 2,
|
||||
"byteOffset": 715032,
|
||||
"componentType": 5126,
|
||||
"count": 6596,
|
||||
"max": [
|
||||
0.999987006187439,
|
||||
0.9998384118080139,
|
||||
0.9999796748161316
|
||||
],
|
||||
"min": [
|
||||
-0.9995425939559937,
|
||||
-0.999676525592804,
|
||||
-0.9994800686836243
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 1,
|
||||
"byteOffset": 211960,
|
||||
"componentType": 5126,
|
||||
"count": 6596,
|
||||
"max": [
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"min": [
|
||||
0.0,
|
||||
0.0
|
||||
],
|
||||
"type": "VEC2"
|
||||
},
|
||||
{
|
||||
"bufferView": 0,
|
||||
"byteOffset": 412056,
|
||||
"componentType": 5125,
|
||||
"count": 39042,
|
||||
"type": "SCALAR"
|
||||
},
|
||||
{
|
||||
"bufferView": 3,
|
||||
"componentType": 5126,
|
||||
"count": 451,
|
||||
"max": [
|
||||
15.0
|
||||
],
|
||||
"min": [
|
||||
0.0
|
||||
],
|
||||
"type": "SCALAR"
|
||||
},
|
||||
{
|
||||
"bufferView": 5,
|
||||
"componentType": 5126,
|
||||
"count": 451,
|
||||
"max": [
|
||||
0.20017318427562714,
|
||||
0.979751706123352,
|
||||
0.2001722753047943,
|
||||
0.9797602891921997
|
||||
],
|
||||
"min": [
|
||||
-0.018710684031248093,
|
||||
-0.9797568917274475,
|
||||
-0.1991616040468216,
|
||||
0.0026621678844094276
|
||||
],
|
||||
"type": "VEC4"
|
||||
},
|
||||
{
|
||||
"bufferView": 3,
|
||||
"byteOffset": 1804,
|
||||
"componentType": 5126,
|
||||
"count": 125,
|
||||
"max": [
|
||||
15.0
|
||||
],
|
||||
"min": [
|
||||
0.0
|
||||
],
|
||||
"type": "SCALAR"
|
||||
},
|
||||
{
|
||||
"bufferView": 4,
|
||||
"componentType": 5126,
|
||||
"count": 125,
|
||||
"max": [
|
||||
1.0000001192092896,
|
||||
1.0,
|
||||
1.0000001192092896
|
||||
],
|
||||
"min": [
|
||||
0.9999998807907104,
|
||||
1.0,
|
||||
0.9999998807907104
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 3,
|
||||
"byteOffset": 2304,
|
||||
"componentType": 5126,
|
||||
"count": 451,
|
||||
"max": [
|
||||
15.0
|
||||
],
|
||||
"min": [
|
||||
0.0
|
||||
],
|
||||
"type": "SCALAR"
|
||||
},
|
||||
{
|
||||
"bufferView": 5,
|
||||
"byteOffset": 7216,
|
||||
"componentType": 5126,
|
||||
"count": 451,
|
||||
"max": [
|
||||
0.20017318427562714,
|
||||
0.979751706123352,
|
||||
0.2001722753047943,
|
||||
0.9797602891921997
|
||||
],
|
||||
"min": [
|
||||
-0.018710684031248093,
|
||||
-0.9797568917274475,
|
||||
-0.1991616040468216,
|
||||
0.0026621678844094276
|
||||
],
|
||||
"type": "VEC4"
|
||||
},
|
||||
{
|
||||
"bufferView": 3,
|
||||
"byteOffset": 4108,
|
||||
"componentType": 5126,
|
||||
"count": 125,
|
||||
"max": [
|
||||
15.0
|
||||
],
|
||||
"min": [
|
||||
0.0
|
||||
],
|
||||
"type": "SCALAR"
|
||||
},
|
||||
{
|
||||
"bufferView": 4,
|
||||
"byteOffset": 1500,
|
||||
"componentType": 5126,
|
||||
"count": 125,
|
||||
"max": [
|
||||
1.0000001192092896,
|
||||
1.0,
|
||||
1.0000001192092896
|
||||
],
|
||||
"min": [
|
||||
0.9999998807907104,
|
||||
1.0,
|
||||
0.9999998807907104
|
||||
],
|
||||
"type": "VEC3"
|
||||
}
|
||||
],
|
||||
"animations": [
|
||||
{
|
||||
"channels": [
|
||||
{
|
||||
"sampler": 0,
|
||||
"target": {
|
||||
"node": 3,
|
||||
"path": "rotation"
|
||||
}
|
||||
},
|
||||
{
|
||||
"sampler": 1,
|
||||
"target": {
|
||||
"node": 3,
|
||||
"path": "scale"
|
||||
}
|
||||
},
|
||||
{
|
||||
"sampler": 2,
|
||||
"target": {
|
||||
"node": 5,
|
||||
"path": "rotation"
|
||||
}
|
||||
},
|
||||
{
|
||||
"sampler": 3,
|
||||
"target": {
|
||||
"node": 5,
|
||||
"path": "scale"
|
||||
}
|
||||
}
|
||||
],
|
||||
"name": "Animation",
|
||||
"samplers": [
|
||||
{
|
||||
"input": 8,
|
||||
"interpolation": "LINEAR",
|
||||
"output": 9
|
||||
},
|
||||
{
|
||||
"input": 10,
|
||||
"interpolation": "LINEAR",
|
||||
"output": 11
|
||||
},
|
||||
{
|
||||
"input": 12,
|
||||
"interpolation": "LINEAR",
|
||||
"output": 13
|
||||
},
|
||||
{
|
||||
"input": 14,
|
||||
"interpolation": "LINEAR",
|
||||
"output": 15
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"asset": {
|
||||
"extras": {
|
||||
"author": "cmzw (https://sketchfab.com/cmzw)",
|
||||
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
|
||||
"source": "https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70",
|
||||
"title": "Stylized planet"
|
||||
},
|
||||
"generator": "Sketchfab-14.10.0",
|
||||
"version": "2.0"
|
||||
},
|
||||
"bufferViews": [
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 568224,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34963
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 264728,
|
||||
"byteOffset": 568224,
|
||||
"byteStride": 8,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 794184,
|
||||
"byteOffset": 832952,
|
||||
"byteStride": 12,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 4608,
|
||||
"byteOffset": 1627136,
|
||||
"name": "floatBufferViews"
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 3000,
|
||||
"byteOffset": 1631744,
|
||||
"byteStride": 12,
|
||||
"name": "floatBufferViews"
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 14432,
|
||||
"byteOffset": 1634744,
|
||||
"byteStride": 16,
|
||||
"name": "floatBufferViews"
|
||||
}
|
||||
],
|
||||
"buffers": [
|
||||
{
|
||||
"byteLength": 1649176,
|
||||
"uri": "scene.bin"
|
||||
}
|
||||
],
|
||||
"extensionsUsed": [
|
||||
"KHR_materials_unlit"
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"uri": "textures/Clouds_baseColor.png"
|
||||
},
|
||||
{
|
||||
"uri": "textures/Planet_baseColor.png"
|
||||
}
|
||||
],
|
||||
"materials": [
|
||||
{
|
||||
"doubleSided": true,
|
||||
"emissiveTexture": {
|
||||
"index": 0
|
||||
},
|
||||
"extensions": {
|
||||
"KHR_materials_unlit": {}
|
||||
},
|
||||
"name": "Clouds",
|
||||
"pbrMetallicRoughness": {
|
||||
"baseColorTexture": {
|
||||
"index": 0
|
||||
},
|
||||
"metallicFactor": 0.0
|
||||
}
|
||||
},
|
||||
{
|
||||
"emissiveFactor": [
|
||||
0.23391156271636818,
|
||||
0.23391156271636818,
|
||||
0.23391156271636818
|
||||
],
|
||||
"emissiveTexture": {
|
||||
"index": 1
|
||||
},
|
||||
"extensions": {
|
||||
"KHR_materials_unlit": {}
|
||||
},
|
||||
"name": "Planet",
|
||||
"pbrMetallicRoughness": {
|
||||
"baseColorTexture": {
|
||||
"index": 1
|
||||
},
|
||||
"metallicFactor": 0.0
|
||||
}
|
||||
}
|
||||
],
|
||||
"meshes": [
|
||||
{
|
||||
"name": "Object_0",
|
||||
"primitives": [
|
||||
{
|
||||
"attributes": {
|
||||
"NORMAL": 1,
|
||||
"POSITION": 0,
|
||||
"TEXCOORD_0": 2
|
||||
},
|
||||
"indices": 3,
|
||||
"material": 0,
|
||||
"mode": 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Object_1",
|
||||
"primitives": [
|
||||
{
|
||||
"attributes": {
|
||||
"NORMAL": 5,
|
||||
"POSITION": 4,
|
||||
"TEXCOORD_0": 6
|
||||
},
|
||||
"indices": 7,
|
||||
"material": 1,
|
||||
"mode": 4
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"nodes": [
|
||||
{
|
||||
"children": [
|
||||
1
|
||||
],
|
||||
"matrix": [
|
||||
0.9979661703109741,
|
||||
0.06371438503265381,
|
||||
0.001990502001717701,
|
||||
0.0,
|
||||
0.0,
|
||||
0.031225780025124772,
|
||||
-0.9995123744010925,
|
||||
0.0,
|
||||
-0.06374546885490417,
|
||||
0.9974795579910278,
|
||||
0.031162271276116593,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"name": "Sketchfab_model"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
2
|
||||
],
|
||||
"name": "root"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
3,
|
||||
5
|
||||
],
|
||||
"matrix": [
|
||||
1.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
2.220446049250313e-16,
|
||||
1.0,
|
||||
0.0,
|
||||
0.0,
|
||||
-1.0,
|
||||
2.220446049250313e-16,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"name": "GLTF_SceneRootNode"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
4
|
||||
],
|
||||
"name": "Clouds_1"
|
||||
},
|
||||
{
|
||||
"mesh": 0,
|
||||
"name": "Object_4"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
6
|
||||
],
|
||||
"name": "Planet_2"
|
||||
},
|
||||
{
|
||||
"mesh": 1,
|
||||
"name": "Object_6"
|
||||
}
|
||||
],
|
||||
"samplers": [
|
||||
{
|
||||
"magFilter": 9729,
|
||||
"minFilter": 9987,
|
||||
"wrapS": 10497,
|
||||
"wrapT": 10497
|
||||
}
|
||||
],
|
||||
"scene": 0,
|
||||
"scenes": [
|
||||
{
|
||||
"name": "Sketchfab_Scene",
|
||||
"nodes": [
|
||||
0
|
||||
]
|
||||
}
|
||||
],
|
||||
"textures": [
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 0
|
||||
},
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
public/planet/textures/Clouds_baseColor.png
Normal file
BIN
public/planet/textures/Clouds_baseColor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 713 KiB |
BIN
public/planet/textures/Planet_baseColor.png
Normal file
BIN
public/planet/textures/Planet_baseColor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 612 KiB |
44
src/components/canvas/Earth.jsx
Normal file
44
src/components/canvas/Earth.jsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React, { Suspense } from "react";
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
|
||||
|
||||
import CanvasLoader from "../Loader";
|
||||
|
||||
const Earth = () => {
|
||||
const earth = useGLTF("./planet/scene.gltf");
|
||||
|
||||
return (
|
||||
<primitive object={earth.scene} scale={2.5} position-y={0} rotation-y={0} />
|
||||
);
|
||||
};
|
||||
|
||||
const EarthCanvas = () => {
|
||||
return (
|
||||
<Canvas
|
||||
shadows
|
||||
frameloop='demand'
|
||||
dpr={[1, 2]}
|
||||
gl={{ preserveDrawingBuffer: true }}
|
||||
camera={{
|
||||
fov: 45,
|
||||
near: 0.1,
|
||||
far: 200,
|
||||
position: [-4, 3, 6],
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<CanvasLoader />}>
|
||||
<OrbitControls
|
||||
autoRotate
|
||||
enableZoom={false}
|
||||
maxPolarAngle={Math.PI / 2}
|
||||
minPolarAngle={Math.PI / 2}
|
||||
/>
|
||||
<Earth />
|
||||
|
||||
<Preload all />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
);
|
||||
};
|
||||
|
||||
export default EarthCanvas;
|
||||
@ -1,3 +1,4 @@
|
||||
import StarsCanvas from "./Stars";
|
||||
import EarthCanvas from "./Earth";
|
||||
|
||||
export { StarsCanvas };
|
||||
export { StarsCanvas, EarthCanvas };
|
||||
|
||||
Loading…
Reference in New Issue
Block a user