three.jsを試す（JavaScriptで3Dグリグリ）

ハピタス登録で1,000円分になるURL

何ができるか

これ

https://ics-creative.github.io/tutorial-three/samples/camera_mouse_x.html

3Dキューブをグリグリ

threejs.org

$ npm install --save three

$ npm install --save-dev vite

$ vim index.html

$ npm view three version

バージョン書き換えたけどうまく動かん…

このサイトの末尾にあるコードまんま貼り付けたら動いた。

https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

専用のWebサーバを立てるための？コマンドnpx serve

$ npx serve

ブラウザからアクセス

http://自分のサーバ:3000

$ vim main.js

$ npx vite build

この npm vite は意味わからん。何をbuildしてるのかさっぱり。

ちなみに自宅サーバのApache経由でこのindex.htmlにアクセスしても3Dは表示されない。

ちゃんと npx serve で立てたサーバ経由でindex.htmlにアクセスしないと3D部分は認識しないらしい。

以下はおまけ。npx serveのときにエラー出てたから入れといた。