[Vue vs Reactシリーズ] Three.js編 without Data fetch

import type { MeshProps } from "@react-three/fiber";
type Props = MeshProps & {
	position: [number, number, number];
	rotation: [number, number, number];
	color?: string;
};

export const Key = (props: Props) => {
	return (
		<mesh>
			<boxGeometry args={[1, 1, 1]} />
			<meshStandardMaterial color={"orange"} />
		</mesh>
	);
};

こう？

なぜかコンソール側にエラーが出て使えん・・・

Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

なんかOrbitControlsみたいなのをcanvasで使うにはextendに食わせる必要がある？

こう？

import { OrbitControls } from "@react-three/drei";
import { extend } from "@react-three/fiber";
import { Canvas } from "@react-three/fiber";
extend({ OrbitControls });

import type { Output } from "../../common/types/output";
import Col from "./Col";

type Props = {
	output: Output;
};

export const Preview: React.FC<Props> = ({ output }) => {
	return (
		<Canvas style={{ width: "100vw", height: "100vh" }}>
			<OrbitControls />
			<ambientLight intensity={Math.PI / 2} />

これだとだめっぽいぞ・・・？

こう？

だめだわ、そもそもOrbitControlをコメントアウトしても解決しない

こう？

export const Preview: React.FC<Props> = ({ output }) => {
	return (
		<Canvas style={{ width: "100vw", height: "100vh" }}>
			<OrbitControls />
			<ambientLight intensity={Math.PI / 2} />
			<spotLight
				position={[10, 10, 10]}
				angle={0.15}
				penumbra={1}
				decay={0}
				intensity={Math.PI}
			/>
			<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
			<Col col={output.left.subIndex} />
			<Col col={output.left.index} />
			<Col col={output.left.middle} />
			<Col col={output.left.ring} />
			<Col col={output.left.little} />
			<Col col={output.left.subLittle} />
		</Canvas>
	);
};

コメントアウトして試したけどこのColがダメみたい

こう？

extend({ Col });

これを追加したけどダメみたい

こう？

canvasの中でdivを描画しようとしたのがいけなかったみたい

こう？

export default ({ col, ...props }: Props) => (
	<div>
		<Key...略
	<div/>
);

<></>ってdivタグになるからっつってなんも考えないでdivにしてたけど、こういう時に挙動が変わるの良いのか悪いのかわからない。

正解はこう

export default ({ col, ...props }: Props) => (
	<>
		<Key...略
	</>
);

こう？

viteにresolve書かないとpath aliasが通らない
tsconfigPathsはTypescript+swcだと使えないみたい

swc単体は認識してくれるみたいだけど、Vite+swcがだめみたい？
余計なことすんじゃなかった…

こう？

reactの方でもまぁまぁimportしなくても使える系があるけどこっちはtemplateと違って補完が効く

こう？

名前なしdefault exportできるの.vueのいいところ

こう？

default exportアンチだったけど、ファイル名を認識してauto importしてくれるからdefault exportでいい気がしてきた

こう？

でもこれVSCodeでぱっと参照されている場所一覧出せないんだよなぁ
どこクリックすればいいかわからない

こう？

ファイル名に基づいてあーだこーだあたりとかライブラリというよりフレームワークって感じがすごい

こう？

.vueファイルはHoge/index.vueがあってもindex.vueまで指定しないといけない感じ？

こう？

vueくんの場合はtemplate内で特定のプロパティだけコメントアウトとかできないのが辛いかも