ボクセルアートを作ろう 3
https://hukurouo-voxel.netlify.app/spctr_room/
作った！
めちゃくちゃハマっている。たのしい。今作りたいものは、鳩羽つぐさんと少女終末旅行のチトユーリ......。
あと部長。githubアカウントのアイコンにしてるけどそれをvoxelにしたい感がある
技術的なところのメモ
- 読み込んだオブジェクトに影つけるのに結構迷った。
- objとmtlどっちにもshadow属性を付与する必要があったっぽい。
const mtlLoader = new MTLLoader( manager );
mtlLoader.setPath('../models/');
mtlLoader.load('spctr_room.mtl', (materials) => {
materials.preload();
const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('../models/');
objLoader.load('spctr_room.obj', (object) => {
object.receiveShadow = true;
object.castShadow = true;
const mesh = object;
scene.add(mesh);
mesh.traverse(function (child) {
console.log(child)
child.castShadow = true
child.receiveShadow = true
});
});
- 簡易なloading...表示機能を追加
- https://threejs.org/docs/#api/en/loaders/managers/LoadingManager
- 公式のドキュメントそのまま使えたので楽だった
- ローディングバーみたいなのも作ろうかな
- zenn に記事を書いた
- https://zenn.dev/hukurouo/articles/three-js-article-1
- ユーザビリティが高い。three.js関連でちょこちょこ書いていこうと思う。
- 展示サイトも良い感じに作ってみたいなーと思っていて、爆速表示できると噂の React + Next + Vercel あたりをそろそろやってみようかなという機運がある
- もちろんtypescriptで。ポートフォリオサイトとかも作りたい。