Three.js 基本

Javascript Three.js

https://threejs.org/

■開発環境

viteを利用

https://ja.vitejs.dev/

 yarn create vite

■three.jsの基本コードらしい。githubから。

https://github.com/mrdoob/three.js

■基本のコード

import * as THREE from "three"
import { Light } from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

//グローバルに宣言する
let scene, camera, renderer, pointLight;

window.addEventListener("load", init);

function init(){
  //シーン
  scene = new THREE.Scene();
  //カメラ
  camera = new THREE.PerspectiveCamera(
    50,//視野角
    window.innerWidth / window.innerHeight,//アスペクト比
    0.1,//開始距離
    1000//終了距離
  );
  //カメラの位置をz軸500まで移動して球体が映る位置に移動
  camera.position.set(0,0,500);

  //レンダラー
  renderer = new THREE.WebGL1Renderer({ alpha:true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  //テクスチャを追加
  let textures = new THREE.TextureLoader().load("./public/earth.jpg");

  //ジオメトリ（骨格）を作成
  let ballGeometry = new THREE.SphereGeometry(100, 64, 32);//radius, widthSegments, heightSegments
  //マテリアル（色とか）を作成
  let ballMaterial = new THREE.MeshPhysicalMaterial({ map: textures });
  //メッシュ（ジオメトリ＋マテリアル）化
  let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial);
  scene.add(ballMesh);

  //平衡光源を追加（0xで16進数で書くと宣言）
  let directionalLight = new THREE.DirectionalLight(0xffffff, 2);
  directionalLight.position.set(1, 1, 1);
  scene.add(directionalLight);

  //ポイント光源を追加
  pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(-200, -200, -200);
  scene.add(pointLight);

  //ポイント光源を特定する
  let poinLightHelper = new THREE.PointLightHelper(pointLight, 30);
  scene.add(poinLightHelper);

  //マウス操作を可能にする（公式ドキュメントに準ずる）
  const controls = new OrbitControls( camera, renderer.domElement );

  window.addEventListener("resize", onWindowResize);

  animate();
}

//ブラウザのリサイズに対応させよう
function onWindowResize(){
  //レンダラーのサイズを随時更新
  renderer.setSize(window.innerWidth, window.innerHeight);

  //カメラのアスペクト比を正す
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
}

//ポイント光源を球の周りを巡回させる
function animate(){
  pointLight.position.set(
    200 * Math.sin(Date.now() / 500),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 500)
  );

  requestAnimationFrame(animate);

  //レンダリング
  renderer.render(scene, camera);
}

検索窓で、THREEのプロパティ？メソッド？を調べていく

ジオメトリ

ざっくり言うと「形状」のこと。

「Geometry」を欄を見てみると、詳しく書かれている。 https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry

https://www.udemy.com/course/three-js-with-react-js-course/learn/lecture/30436646#overview

https://codesandbox.io/embed/epic-heisenberg-gx5cl?codemirror=1

https://codesandbox.io/s/qyz5r?file=/src/App.js

■公式ドキュメント

■エコシステム（React Three Fiberより）

  • @react-three/gltfjsx – turns GLTFs into JSX components
  • @react-three/drei – useful helpers for react-three-fiber
  • @react-three/postprocessing – post-processing effects
  • @react-three/flex – flexbox for react-three-fiber
  • @react-three/xr – VR/AR controllers and events
  • @react-three/cannon – physics based hooks
  • @react-three/a11y – accessibility tools for react-three-fiber
  • zustand – state management
  • react-spring – a spring-physics-based animation library
  • react-use-gesture – mouse/touch gestures

■3Dの基礎学習（幾何学、数学、物理）

■用語の整理

■ルール改変

THREE.Geometry はコンストラクターではありませんhttps://qiita.com/masato_makino/items/2ad5b1eb01a118d0a155

どうやら新しいthree.jsではGeometryが廃止されたよう…

↓

Three.js r125 が Geometry のサポートを削除したことがわかりました。今後は、カスタム BufferGeometry を使用する必要があります。

https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html

■基本コード(React Three Fiber)

https://docs.pmnd.rs/react-three-fiber/tutorials/how-it-works

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

function MyApp() {
  return (
    <Canvas>
      <group>
        <mesh>
          <meshNormalMaterial />
          <boxGeometry args={[2, 2, 2]} />
        </mesh>
      </group>
    </Canvas>
  )
}

■gltfjsxを使ってBlenderのglTFをReactに読み込む

（参考URL）https://www.youtube.com/watch?v=2jwqotdQmdQ

1.　Blenderでオブジェクトを作り、エクスポートする。シーンの名前はちゃんと英語でつけた方が、Reactで読み込んだ時に便利。