CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト０
esm.shでお手軽に（手抜きして？）React Three Fiberを使用してみるテスト、をしてみました。
作業用コードfork元 兼 調査対象にさせていただいた３コード
最初はCodePenにあった比較的シンプルなコードと思われる以下の３つのコードからfork（コードのコピペのようなもの）をさせてもらい作業をはじめました。 ３つのコードは、importを使用してReact Three Fiberを動かしているコードから選ばせてもらいました。 最終的には、fork元コードにて import で skypack が使用されているものを esm.sh へ変更していく目標ではじめました。 esm.sh のほうがimport対象のバージョンを細かく設定できるようだったので、skypackとの入れ替えを目指しました。
■fork元コードその１■
R3F No Build Tools
こちらのコード上でimportして使用しているものは以下のようなものでした。
import ReactDOM from 'https://cdn.skypack.dev/react-dom@17.0.1'
import React, { useRef, useState } from 'https://cdn.skypack.dev/react@17.0.1'
import { Canvas, useFrame } from 'https://cdn.skypack.dev/@react-three/fiber@6.0.14'
import htm from 'https://cdn.skypack.dev/htm@3.0.4'
こちらのコードは、基本的にはReact Three Fiber本家のサンプルを使用されているようでした。 回転しているCubeが２つ表示されます。
参考：その本家サイトへのリンク Without build tools
■fork元コードその２■
Untitled
こちらのコード上でimportして使用しているものは以下のようなものでした。
import htm from 'https://cdn.skypack.dev/htm@3.0.4'
import React, { useRef } from 'https://cdn.skypack.dev/react@17.0.1'
import { render } from 'https://cdn.skypack.dev/react-dom@17.0.1'
import { Canvas, useFrame } from 'https://cdn.skypack.dev/react-three-fiber@5.3.10'
上記のコードの作成者と同じ方が作成されたコードでしょうか？ よりシンプルに、回転しているCubeが１つだけ表示されるものです。
■fork元コードその３■
r3f Example 1
こちらのコード上でimportして使用しているものは以下のようなものでした。
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import { Canvas } from "https://cdn.skypack.dev/react-three-fiber@5.3.1";
さらにシンプルに赤Cube表示を行っているコードです。 Cubeは回転もしないようです。 ただ、赤Cubeを表示している状態です。
上記の３コードをforkさせてもらって生成した最初のコードは以下のようになります。 ホントにそのままコピペした状態のコードで、名前も含めてfork元のコードと内容は全く同じです。
R3F No Build Tools
https://codepen.io/siouxcitizen/pen/QWPOBJa
Untitled
https://codepen.io/siouxcitizen/pen/NWmwBew
r3f Example 1
https://codepen.io/siouxcitizen/pen/wvZPxYe
次に、手本にさせてもらった３つのfork元のコードのうち、fork先のコードでskypackをesm.shに変更して使用してもコードが動作した以下のコードをforkしながらさらに作業を進めていきます。 CodePenではいくつかesm.shを使用する動かないコードを見かけたので、何かのきっかけでここ以降のesm.sh使用コードも同じように今後動かなく可能性もありそうですが。 fork先コードでは、esm.shを使用してもう少しReactやReact Three Fiberのバージョンを細かく指定できるか試してみることから作業を始めてみました。
最初のfork元コードから作業用にforkしていったコードの流れは以下のようになっています。
（fork元コード）R3F No Build Tools
→ fork →
（fork先の自分のコードその１ そのままコピペ）R3F No Build Tools
→ fork →
（fork先の自分のコードその２ esm.sh使用開始）R3F No Build Tools test
R3F No Build Tools test
上記の説明にある「fork先の自分のコードその２ esm.sh使用開始」となります。 最初に作成した（最初に自分でコード内容を編集した）コードです。
このコードではimortでの機能呼び出しを、fork元のskypackによるものから、esm.shによるものに変えました。 esm.shに変えたあと、何も指定しない場合に自動で呼び出される（最新版の？）バージョンを@であえて指定するようにも変更しました。 そうして、バージョンが細かく指定できるかの実験を行っています。
import部分は以下になります。
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import htm from 'https://esm.sh/htm@3.1.1'
短いので全コードも載せてみます。
HTML
<div id="root"></div>CSS
html, body {
margin: 0;
overflow: hidden;
}
#root {
height: 100vh;
}JS（JavaScript）
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import htm from 'https://esm.sh/htm@3.1.1'
const html = htm.bind(React.createElement)
function Box(props) {
const mesh = useRef()
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
return html`
<mesh
...${props}
ref=${mesh}
scale=${active ? 1.5 : 1}
onClick=${() => setActive(!active)}
onPointerOver=${() => setHover(true)}
onPointerOut=${() => setHover(false)}
>
<boxGeometry args=${[1, 1, 1]} />
<meshStandardMaterial color=${hovered ? 'hotpink' : 'orange'} />
</mesh>
`
}
ReactDOM.render(html`
<${Canvas}>
<ambientLight />
<pointLight position=${[10, 10, 10]} />
<${Box} position=${[-1.2, 0, 0]} />
<${Box} position=${[1.2, 0, 0]} />
<//>`,
document.getElementById('root')
)R3F No Build Tools test02
R3F No Build Tools test でesm.shを使用するようにして、ReactやReact Three Fiberのバージョンを設定するだけだと、なぜか表示されているCubeの陰影？のようなものが見えなくなってしまったので、
<spotLight position=${[10, 10, 10]} angle=${0.15} penumbra=${1} decay=${0} intensity=${Math.PI} />
をコードに追加してみたものです。 コード内容は3Dの光源の追加で、記号「$」では何をやっているのかよくわかっていませんが、これでCubeの陰影？が復活したように見えます。
ほぼ内容変わっていませんが、やはり短いので全コードを載せます。
HTML
<div id="root"></div>CSS
html, body {
margin: 0;
overflow: hidden;
}
#root {
height: 100vh;
}JS（JavaScript）
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import htm from 'https://esm.sh/htm@3.1.1'
const html = htm.bind(React.createElement)
function Box(props) {
const mesh = useRef()
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
return html`
<mesh
...${props}
ref=${mesh}
scale=${active ? 1.5 : 1}
onClick=${() => setActive(!active)}
onPointerOver=${() => setHover(true)}
onPointerOut=${() => setHover(false)}
>
<boxGeometry args=${[1, 1, 1]} />
<meshStandardMaterial color=${hovered ? 'hotpink' : 'orange'} />
</mesh>
`
}
ReactDOM.render(html`
<${Canvas}>
<ambientLight />
<spotLight position=${[10, 10, 10]} angle=${0.15} penumbra=${1} decay=${0} intensity=${Math.PI} />
<pointLight position=${[10, 10, 10]} />
<${Box} position=${[-1.2, 0, 0]} />
<${Box} position=${[1.2, 0, 0]} />
<//>`,
document.getElementById('root')
)R3F No Build Tools test03
最後に、20240403現在、本家サイトにあるコードのパッケージのバージョンと揃えてみました。 といってもReact Three Fiberのバージョンを揃えるだけでしたが。
最後も全コードを載せてみます。
HTML
<div id="root"></div>CSS
html, body {
margin: 0;
overflow: hidden;
}
#root {
height: 100vh;
}JS（JavaScript）
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.15.12'
import htm from 'https://esm.sh/htm@3.1.1'
const html = htm.bind(React.createElement)
function Box(props) {
const mesh = useRef()
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
return html`
<mesh
...${props}
ref=${mesh}
scale=${active ? 1.5 : 1}
onClick=${() => setActive(!active)}
onPointerOver=${() => setHover(true)}
onPointerOut=${() => setHover(false)}
>
<boxGeometry args=${[1, 1, 1]} />
<meshStandardMaterial color=${hovered ? 'hotpink' : 'orange'} />
</mesh>
`
}
ReactDOM.render(html`
<${Canvas}>
<ambientLight />
<spotLight position=${[10, 10, 10]} angle=${0.15} penumbra=${1} decay=${0} intensity=${Math.PI} />
<pointLight position=${[10, 10, 10]} />
<${Box} position=${[-1.2, 0, 0]} />
<${Box} position=${[1.2, 0, 0]} />
<//>`,
document.getElementById('root')
) 延々と使えるimport文の設定調査といった作業でしたが、このあたりと、次回noteの最初でやっている、コードの見た目をネットで見かけるReact Three Fiberのサンプルに寄せていく作業が一番手間がかかりました。 その先からのコード作成は、これまでに自分の作成したコードをコピペしていくぐらいの感じでわりとすんなり進みました。
なので、一番手間が掛かったこのあたりの作業をいつか必要ができたときに見返えせるようにその過程を記録しておきました。 CodePenでReact Three Fiberを使用するための環境設定を調べる過程といった感じでしょうか。
このあたりと、この後同じようにesm.shによりCodePenでReact Routerを最初に使えるようにする作業、そのReact RouterとReact Three Fiberを連携させる作業が最も時間をとられた作業となりました。
なんか愚痴まとめみたいになってきましたｗ。 うん、やはり環境設定はツライｗ。 これぐらいにしておきますｗ。
次回
参考サイト
esm.shを使うにあたって、以下のサイトを参考にさせていただきました。
本家サイト？
・https://esm.sh/
・https://github.com/esm-dev/esm.sh
使用前の概要をつかむために参考にさせていただきました
・esm.sh
・esm.sh
・ikasoba/esm-sh.md
・インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
・【Deno】esm.shによるnpmパッケージ管理に便利なCLIスクリプトについて
こんなの作れたらいいな～、の目標に（React Router使用の参考にも）
・React - ポケモン名前当てゲーム (Name guessing game)
・Vue3 - ポケモン名前当てゲーム (Name guessing game)
ガッツリ理解したいと思ったときのために アトデヨム
・esm.shを理解したい
この記事が気に入ったらサポートをしてみませんか？