【制作物共有】3D Room2
見出し画像

【制作物共有】3D Room2

KaitoTakase

制作日

2021年11月12日


使用しているプラグインなど

・webpack
・Typescript
・gsap
・three.js
・GLTFLoader


制作について

今回の制作の目的は「サイトを参考にデモサイトを作成すること」です。

こちらのサイトは弊社デザイナーのTKS(https://twitter.com/tks_signal)さんから教えていただきました。



まずは部屋の3Dを作成していきます。

スクリーンショット 2021-11-15 10.40.27


スクリーンショット 2021-11-15 11.01.22


椅子

スクリーンショット 2021-11-15 11.36.03


ライト

スクリーンショット 2021-11-15 11.45.23


キーボード
こういう細かいのを作るのは結構好きです。

スクリーンショット 2021-11-15 14.14.04

キーボード完成

スクリーンショット 2021-11-15 14.28.27


ディスプレイ

スクリーンショット 2021-11-15 14.37.23


観葉植物を作成します。
まずは葉っぱから。

スクリーンショット 2021-11-15 15.06.53


ベジエ曲線を使って複製します。

スクリーンショット 2021-11-15 15.12.39


茎もつけます。

スクリーンショット 2021-11-15 15.22.32


鉢と土をつけて完成です。

スクリーンショット 2021-11-15 15.39.48


部屋が少しずつ埋まってきました。

スクリーンショット 2021-11-15 15.40.06


卓上ライト

スクリーンショット 2021-11-15 16.18.49

スクリーンショット 2021-11-15 16.24.50


本棚

スクリーンショット 2021-11-15 16.46.50


本を設置

スクリーンショット 2021-11-15 16.56.41


ソファ

スクリーンショット 2021-11-15 17.32.05

スクリーンショット 2021-11-15 17.36.08


ローテーブルと絨毯を設置

スクリーンショット 2021-11-15 18.39.18


フルーツバスケットを作成し、バナナとりんごを入れました。
(バナナとりんごは前に作成していたもの)

スクリーンショット 2021-11-15 18.52.40


参考サイトに電飾があったので意識しました。

スクリーンショット 2021-11-16 9.30.21


マテリアルをつけて完成です。

スクリーンショット 2021-11-16 9.29.17


Three.jsで読み込みます。

スクリーンショット 2021-11-16 9.40.37


背景の棒ライトを追加します。

スクリーンショット 2021-11-17 8.22.54


ここで下記のエラーが出ました。

Program Info Log: Varyings over maximum register limit

少し調べた感じ、ライトや影が多すぎるとこのエラーが出てしまうようです。
今回Blenderの方からライトを10個以上持ってきているので、その影響がでてしまったのかと思われます。


エラーを修正し、テキストを入れました。

これで完成です。

スクリーンショット 2021-11-17 8.26.49


three.jsで読み込むと動作が重くなってしまいました。

原因はBlenderでつけたライトが原因でした。
three.jsでライトをつければ軽い動作ができるのですが、より雰囲気を出したいとなるとBlenderの方のライトを使いたいなあと思った次第です。

今回は一旦このままサイトにあげていますが、近いうちに修正するか、
同じようなサイトでリベンジができればと思います。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
KaitoTakase
社会人4年目。BlenderとThree.js、WebGLが好きです。作成した3Dモデルでウェブサイトをよく作っています。