Блог

Я уже некоторое время работаю над моделью Солнечной системы. Мне удалось отобразить все планеты Солнечной системы(извините, Плутон) и заставить их вращаться вокруг Солнца.

Я понял, что было бы полезно показать орбиты планет по цветной траектории. Но я понятия не имею, как это сделать.

Есть какие-нибудь идеи? Файл, который я продемонстрирую, — это файл Земли, который отображается в другом файле, который я назвал Skysphere.

Небесная сфера:

 import { Canvas, useThree } from "@react-three/fiber";
import { PerspectiveCamera, PointerLockControls, OrbitControls, Stars } from "@react-three/drei";
import Sun from "../PlanetsModels/Sun";
import Earth from "../PlanetsModels/Earth";
import Mars from "../PlanetsModels/Mars"
import Mercury from "../PlanetsModels/Mercury";
import Venus from "../PlanetsModels/Venus"
import Jupiter from "../PlanetsModels/Jupiter"
import Saturn from "../PlanetsModels/Saturn"
import Uranus from "../PlanetsModels/Uranus"
import Neptune from "../PlanetsModels/Neptune"
import { SignatureKind } from "typescript";
  


export default function System() {
    return(
    <Canvas style={{backgroundColor: 'Black', width:window.innerWidth, height:window.innerHeight}}>
        <ambientLight intensity = {1}/>            
        <Stars radius = {300} depth = {60} count = {10000} factor = {8} saturation = {0}/>
        <Suspense fallback = {null}>
            <Sun/>
            <Mercury/>
            <Venus/>
            <Mars/>
            <Earth/>
            <Jupiter/>
            <Saturn/>
            <Uranus/>
            <Neptune/>
        </Suspense> 
        <OrbitControls
        enablePan={ true}
        enableZoom={true}
        enableRotate={true}
      />
    </Canvas>
    );
};
 

Мой файл с Землей находится ниже:

 Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef } from 'react'
import {useFrame} from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'

type GLTFResult = GLTF amp; {
  nodes: {
    Cube001: THREE.Mesh
  }
  materials: {
    ['Default OBJ']: THREE.MeshStandardMaterial
  }
}

export default function Model(props: JSX.IntrinsicElements['group']) {
  const group = useRef<THREE.Group>()
  const { nodes, materials } = useGLTF('/Earth.glb') as GLTFResult
  useFrame(() => { //rotates sun around its axis
    group!.current!.rotation.y  = .0037;
   })
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh geometry={nodes.Cube001.geometry} material={materials['Default OBJ']} visible = {true} position = {[18.46,0,0]} scale = {.00297} />
    </group>
  )
}

 

Самый простой способ, который я могу придумать, — это создать торосгеометрию с небольшим tube значением и radius соответствующим расстоянием планеты от солнца. Если вы добавите а MeshBasicMaterial к этой сетке, она будет выглядеть как сплошная линия и на нее не повлияет освещение.