React.jsからTHREEへ.JSの使用

バニラJSの中のThree.jsを学び、現在reactでの活用方法を学んでいます.
ちょっと違うのでバニラjsで表現しようかと考えましたが、挑戦してみます!🧐
正式な書類とユービンを見て、コードを適用します!
英語の資料なので、TOEICで勉強している一石二鳥のような気がします.

npm download

もちろん、npmもダウンロードします.
npm i three
npm install three @react-three/fiber
npm install @react-three/drei
react-3繊維は3jsをコンポーネントベースで使用できるようにします.jsxを持ってきて、3つはキャンバスに使います.jsコードに変換します.
react-3/dreiは、繊維を予め実現したコンポーネントであり、再使用可能なパッケージである.
カメラやレールなど有用な部品が多い.
(おしゃべりとしてドイツ語3はdrei!教養でドイツ語を学んでくれて嬉しいです^o^)

// Create a box geometry
const geometry = new THREE.BoxBufferGeometry(10, 10, 10);

// Create a material
const material = new THREE.MeshStandardMaterial();

// Create a mesh with the defined geometry and material
mesh = new THREE.Mesh(geometry, material);

// Add the mesh to the scene![](https://media.vlpt.us/images/jeon-yj/post/deb9bfc7-3c33-41d6-a4fc-18c7409ef553/%EC%BA%A1%EC%B2%98.PNG)
scene.add(mesh);

このjsコードはreact−3繊維であり、以下に示す.

<mesh>
  <boxBufferGemometry attach='geometry' args={[10, 10, 10]} />
  <meshBasicMaterial attach='material' />
</mesh>

大きく違って、難しくないですが、簡単です.

Sceneの作成

シーンはreact/fiberによってインポートされたCanvasコンポーネントによって作成されます.
後三.jsで作成する構成部品は、これらのCanvas構成部品にある必要があります.

import React from 'react'
import { Canvas } from '@react-three/fiber'

const App = () => (
  <Canvas>
    <pointLight position={[10, 10, 10]} />
    <mesh>
      <sphereBufferGeometry />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  </Canvas>

上のコード<mesh>から3がわかります.jsコンポーネントは通常のreactコンポーネントとは異なり、小文字です.
(react素子の最初のアルファベットは大文字でなければならないことはよく知られていますが、これは守らなければならないルールと慣例です.)
参考にしたYOUTUBERは頑張って説明しましたが短い英語力で理解すると3jsコンポーネントは小文字で、レンダラーは3つしかありません.すなわち,jsの内部コンポーネントと考えられる.
mesh素子では、素子を幾何学的およびmaterial的に順次表す.キャンバスが発光しない場合は、指定したマテリアルの色も見えません(黒に見えます).光があるから色がある.
pointLightはその名の通り一つの場所で打ち上げられた光で、
AmbientLightは太陽のように物体全体に発光する.シーンを照らす.
結果:cssまたはその他のプロパティは適用されず、hotpinkカラーボールのみが丸い.

3 D地球を作成する

import React, { useRef } from "react";
import { useFrame, useLoader } from "@react-three/fiber";
import { TextureLoader } from "three";

import * as THREE from "three";
import { OrbitControls, Stars } from "@react-three/drei";

import EarthDayMap from "../../assets/img/8k_earth_daymap.jpg";
import EarthNormalMap from "../../assets/img/8k_earth_normal_map.jpg";
import EarthSpecularMap from "../../assets/img/8k_earth_specular_map.jpg";
import EarthCloudsMap from "../../assets/img/8k_earth_clouds.jpg";

export default function Earth() {
  
  const [colorMap, normalMap, specularMap, cloudsMap] = useLoader(
    TextureLoader,
    [EarthDayMap, EarthNormalMap, EarthSpecularMap, EarthCloudsMap]
  );
  
  const earthRef = useRef();
  const cloudsRef = useRef();
//회전을 위해
  useFrame(({ clock }) => {
    const elapsedTime = clock.getElapsedTime();

    earthRef.current.rotation.y = elapsedTime / 6;
    cloudsRef.current.rotation.y = elapsedTime / 6;
  });

  return (
    <>
      <pointLight color="#f6f3ea" position={[2, 0, 2]} intensity={1} />
      <Stars
        radius={300}
        depth={60}
        count={20000}
        factor={7}
        saturation={0}
        fade={true}
      />
      
      <mesh ref={cloudsRef}>
    {/* sphereGeometry의 인자는 순서대로 반지름, 너비, 높이 이다 */}
        <sphereGeometry args={[1.005, 32, 32]} />
        <meshPhongMaterial
          map={cloudsMap}
          opacity={0.3}
          depthWrite={true}
          transparent={true}
          side={THREE.DoubleSide}
        />
      </mesh>
      
      <mesh ref={earthRef}>
        <sphereGeometry args={[1, 32, 32]} />
        <meshPhongMaterial specularMap={specularMap} />
        <meshStandardMaterial
          map={colorMap}
          normalMap={normalMap}
          metalness={0.4}
          roughness={0.7}
        />
        
        <OrbitControls
          enableZoom={true}
          enablePan={true}
          enableRotate={true}
          zoomSpeed={0.6}
          panSpeed={0.5}
          rotateSpeed={0.4}
        />
      </mesh>
    </>
  );
}

-userFrame:各フレームをレンダリングするときに実行します.
-useLoader:Assetまたはエラー処理を簡略化します.1番目のパラメータはGLTFLADER、OBJLoader、Texture Loader、FontLoaderなどであり、2番目のパラメータはassets(アドレス)であり、3番目はコールバック関数である.
デフォルトでは、userLoadを使用してロードされた資産がキャッシュされます.正式なドキュメントでは、
Assets loaded with useLoader are cached by default. The urls given serve as cache-keys. This allows you to re-use loaded data everywhere in the component tree.
Be very careful with mutating or disposing of loaded assets, especially when you plan to re-use them. Refer to the automatic disposal section in the API.
そのためerror bounders関連エラーが発生し、解決のために冷や汗をかいた.
結果: