- Modificato
お世話になっております！いつも楽しく Spine を使っております！
さて、Three.js ランタイムについて質問です。
Three.js で表示している Spine データ（SkeletonMesh）に対して下記 3 点を適用したいと考えています。
- SkeletonMesh に光を当てたい
- SkeletonMesh の影を落としたい
- 他の 3D オブジェクトの影を SkeletonMesh に落としたい
実験的にサンプルプロジェクトを用意していますので、併せて確認していただければと存じます。
コントロールパネルを用意していますので、ご確認に活用していただければと存じます。
- リポジトリ: t-tonyo-maru/pub_web_spine2d-threejs_test
- サンプルページ: https://t-tonyo-maru.github.io/pub_web_spine2d-threejs_test/
- TypeScript コード: t-tonyo-maru/pub_web_spine2d-threejs_testblob/main/src/main.ts
また、サンプルプロジェクトのバージョン情報は下記の通りです。
- ランタイム
- Three.js: 0.167.1
- @esotericsoftware/spine-threejs: 4.2.58
- Typescript: 5.5.4
- Spine アプリケーション: v4.2
1.SkeletonMesh に光を当てたい
SkeletonMesh に対して、Three.js の Light の光を当てても影響がない状況です。
どのようすれば、SkeletonMesh に対して Three.js の Light の影響を与えられるのかご教授をお願いいたします。
サンプルページでは SpotLight で SkeletonMesh を照らしており、SkeletonMesh に spineSkeletonMesh.castShadow = true を適用していますが、光が適用されない状況でした。
（下記の画面キャプチャのように SpotLight の色味を変更しても、SkeletonMesh に適用されない状況です。）
2.SkeletonMesh の影を落としたい
SkeletonMesh の形状に沿って、影を落とせるようにしたいと考えています。
理想としては下記の画面キャプチャのようなカタチで影を落とせるようにしたいです。
現状では光と同じく、そもそも影が表示されない状況でした。どのようすれば、SkeletonMesh の影を落とせるのかご教授をお願いいたします。
3.他の 3D オブジェクトの影を SkeletonMesh に落としたい
下記の画面キャプチャのように SkeletonMesh を、他の 3D オブジェクトの影に入れても、影響がない状況です。
どのようすれば、SkeletonMesh に対して、他の 3D オブジェクトの影を適用できるのかご教授をお願いいたします。
確認したい点は以上になります。
お手数をおかけしますが、よろしくお願いいたします！
