Zenn
🚀

React+TypeScriptなWebアプリで、R3Fのtutorial19。(Annotationsで注釈表示)

2023/12/31に公開
React
TypeScript
Three.js
r3f
drei
tech

Abstract

今回の参考はここ(Annotation)。
やってみた。

結論

今回の成果物はココ↓
https://github.com/aaaa1597/react-r3f-tutorial019-2

アノテーションとは

道路標識みたいなせ目的地とかを空間上に表示する機能。

前提

手順

1.プロジェクト生成 -> VSCodeで開く

めんどいから、このスケルトンコードから始める。react-r3f-tutorial010
で、下記コマンドでフォルダ名とか整備する。

フォルダリネームとか
$ D:
$ cd .\Products\React.js\            # ご自身の適当なフォルダで。
$ rd /q /s D:\Products\React.js\react-r3f-advanced010
$ git clone https://github.com/aaaa1597/react-r3f-tutorial010.git
$ rd /q /s react-r3f-tutorial010/.git
$ ren react-r3f-tutorial010 react-r3f-advanced019
$ cd react-r3f-advanced019

準備

$ npm install --save three
$ npm install --save @types/three
$ npm install --save @react-three/fiber
$ npm install --save @react-three/drei

.eslintrc.jsを修正

エラーになるので、ignoreに追加

.eslintrc.js
-       "react/no-unknown-property": ['error', { ignore: ['css', "args", 'wireframe', 'rotation-x', 'rotation'] }],
+       "react/no-unknown-property": ['error', { ignore: ['css', "args", 'wireframe', 'rotation-x', 'rotation', 'roughness', 'emissive'] }],

App.css

App.css
+.annotation {
+  background: #181c20;
+  color: #fcf2f4;
+  padding: 10px 15px;
+  border-radius: 15px;
+  font-family: var(--leva-fonts-mono);
+}
+
+.content {
+  padding-top: 10px;
+  transform: translate3d(calc(50% + 4px), 0, 0);
+  text-align: left;
+  background: #202035;
+  color: white;
+  padding: 10px 15px;
+  border-radius: 5px;
+}

App.tsx

まず全体。

App.tsx
import React, {useRef} from 'react';
import './App.css';
import { Canvas, useFrame, MeshProps  } from '@react-three/fiber'
import * as THREE from 'three'
-import { OrbitControls, Environment } from '@react-three/drei'
+import { OrbitControls, Environment, Html } from '@react-three/drei'

const Box = (props: MeshProps) => {
  const ref = useRef<THREE.Mesh>(null!)

  useFrame((_, delta) => {
    if( !ref.current) return
    ref.current.rotation.x += 1 * delta
    ref.current.rotation.y += 0.5 * delta
  })

  return (
    <mesh {...props} ref={ref}>
      <boxGeometry />
+     <meshStandardMaterial roughness={0.75} emissive="#404057" />
-     <meshNormalMaterial />
+     <Html distanceFactor={3} position={new THREE.Vector3(1.2, 1.2, 1.2)}>
+       <div className="content">
+         Boxにannotation
+       </div>
+     </Html>
+     <arrowHelper args={[new THREE.Vector3(-1, -1, -1).normalize(), new THREE.Vector3(1.2, 1.2, 1.2), Math.sqrt(1.1), "red", 0.5]} />
    </mesh>
  )
}

const App = () => {
  return (
    <div style={{ width: "75vw", height: "75vh" }}>
      <Canvas camera={{ position: [3, 1, 2] }}>
        <Box position={[1, 1, 1]} name="A" />
        <Environment preset="forest" background />
+       <Html key={112} position={[0.7, 1, 0]} className="annotation" style={{width:180}} transform distanceFactor={3}>
+         空間にアノテーション
+       </Html>
        <OrbitControls />
        <axesHelper args={[5]} />
        <gridHelper />
      </Canvas>
    </div>
  );
}

export default App;

で、実行。


出来た!!

ポイント

  1. Htmlをimportする。
App.tsx
import { Html } from '@react-three/drei'
  1. <Html></Html>タグを埋め込む。
    classNameで、クラス名つけとくと、cssで見た目を設定できる。
App.tsx
    <Html key={112} position={[0.7, 1, 0]} className="annotation" style={{width:180}} transform distanceFactor={3}>
      空間にアノテーション
    </Html>

意外と簡単だった。

React+TypeScriptなWebアプリで、R3Fのtutorial18。(GLTFJSXでモデル制御)

React+TypeScriptなWebアプリで、R3Fのtutorial19。(Custom Hooksで自作イベント)

React+TypeScriptなWebアプリで、R3Fのtutorial20。(Lerpで簡単移動処理) 簡単な移動処理を攻略する。

Discussion