ポケカな親子の日常生活

2026.03.31

パソコン関連　ラズパイで3DGS構築

カテゴリ：パソコン関連

この項目は今後更新の予定、現状は日記＆備忘録

自分のサイトで、3DGSファイルを表示して、キー操作に反応するようにしたい。

記述を提供しているのはここ（のはず）
https://github.com/sparkjsdev/spark

０．コピペして動かすのは問題ない

１．npmをインストールして使えるようにする
普通に sudo apt install npm で良かったはず
これを、wwwフォルダで実行する必要があるみたい。
するとWebサイトで記述する時のフォルダ構成が再現される（のではないかと）

２．そのあとで、SparkをBuildする
npmを使ってコマンドを打ち込む

と、思ったのだけれど、GensParkさんに詳しく丁寧に教えててお願いしたら、１．だけやれば良いよ、と言ってきた。２．はSparkをいじって開発したい人だけらしい。

その方法は次の通り。
１．Node.jsとnpmを用意する
node -v
npm -v　でバージョンを確認。node.jsを入れたらnpmも入るらしい。
２．プロジェクトフォルダを作る
wwwのルートでいいんじゃないかな。そこへ移動しておく
３．npmプロジェクトを初期化する
packege.jsonが無ければ次のコマンドを実施
npm init -y
４．SparkJSをインストールする
npm install @sparkjsdev/spark
５．依存ライブラリthreeも入れる
npm install three
６．コードを書く
main.js と index.html に分けて書いている。
---

import * as THREE from "three";

import { SplatMesh } from "@sparkjsdev/spark";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const splatURL = "https://sparkjs.dev/assets/splats/butterfly.spz";

const butterfly = new SplatMesh({ url: splatURL });

butterfly.quaternion.set(1, 0, 0, 0);

butterfly.position.set(0, 0, -3);

scene.add(butterfly);

renderer.setAnimationLoop(() => {

renderer.render(scene, camera);

butterfly.rotation.y += 0.01;

});

ーーー

<!DOCTYPE html>

<head>

<title>SparkJS Test</title>

<style>

body { margin: 0; }

</style>

</head>

<body>

</body>

</html>

キー入力を受け付けるなら、こんな感じ

const controls = new SparkControls({

canvas: renderer.domElement

});

renderer.setAnimationLoop(() => {

renderer.render(scene, camera);

controls.update(camera);

});

なんかすごく進歩した気がする
ちゃっぴーｎ

お気に入りの記事を「いいね！」で応援しよう

最終更新日 2026.03.31 13:49:02
コメント(0) | コメントを書く

ポケカな親子の日常生活

パソコン関連　ラズパイで3DGS構築

家庭内LANを楽しむためのページ

ポケカな親子（Closed)

2006

2005

2004

2003

2002

2001

2000

1999

1998