mirror of
https://github.com/Sosokker/SOS12.git
synced 2025-12-19 20:54:06 +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 StarsCanvas from "./Stars";
|
||||||
|
import EarthCanvas from "./Earth";
|
||||||
|
|
||||||
export { StarsCanvas };
|
export { StarsCanvas, EarthCanvas };
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user