Svelteのthrelteをやってみた
238 Views
September 14, 24
スライド概要
2024/9/14 ゆるい勉強会＠食べマルシェにて発表した資料になります
株式会社MIERUNE所属 主にアプリケーションのフロントエンド開発をしています
（ダウンロード不可）
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.1M
各ページのテキスト
Svelteをちゃんと布教する northprint
Svelteをちゃんと布教する northprint
Svelteのthrelteをやってみた northprint
• 本当はSveleteの良さをちゃんと紹介したかった • でもそんなのまとめる余裕はなかった • ということで内容が直前で変わりましたごめんなさい
• Svleteの敬遠されるところの１つに周辺ライブラリーの少なさみた いなのは挙げられることが多い • ただ、そこも徐々に変わりつつあるのではないか • そんなことを思っていたらthrelteっていう楽しそうなライブラリー を知った
• threlteを知ったあとだったのだけれど、MIERUNEのリードエンジ ニアsoramiさんがフロントエンドカンファレンス北海道2024に threlteの件でプロポーザルを出していた • 被ってしまってごめんなさい
さっそくインストールです $ npm create threlte プロジェクト名
対話型CLIで色々便利 今回はtheatreを使いたい ので入れています
develop実行すると・・・ $ npm run dev
コード見て説明の時間
theatreを入れてみる
App.svelteにこんな感じで追加
<script lang="ts">
import { Canvas } from '@threlte/core';
import Scene from './Scene.svelte';
import { Theatre } from ‘@threlte/theatre';
</script>
<Canvas>
<Theatre>
<Scene />
</Theatre>
</Canvas>
import { SheetObject } from ‘@threlte/theatre';
〜
SheetObjectで適用したい
オブジェクトを組み込む
必要がある
<Float floatIntensity={1} floatingRange={[0, 1]}>
<SheetObject key="Box">
<T.Mesh position.y={1.2} position.z={-0.75}>
<T.BoxGeometry />
<T.MeshStandardMaterial color="#0059BA" />
</T.Mesh>
</SheetObject>
</Float>
import { SheetObject } from ‘@threlte/theatre';
〜
パラメーターを変更するには
let:syncの追加、および
Syncコンポーネントを追加
します
<Float floatIntensity={1} floatingRange={[0, 1]}>
<SheetObject key="Box" let:Sync>
<T.Mesh position.y={1.2} position.z={-0.75}>
<T.BoxGeometry />
<T.MeshStandardMaterial color="#0059BA">
<Sync color roughness metalness />
</T.MeshStandardMaterial>
</T.Mesh>
</SheetObject>
</Float>