トップへ(mam-mam.net/)

マテリアルの変更とメッシュの表示非表示制御 ~Webサイトで3Dコンテンツ(Three.js)

マテリアルの変更とメッシュの表示非表示制御(Three.js[r145]を使用)

このサンプルではArcballControls.jsで空間内を移動できるようにし、 OBJLoader.jsでモデリング済みの3つの.objファイル(ソファー、テーブル、椅子)を読んで表示し、Sky.jsで夕日を表現しています。
メッシュのvisibleプロパティにtrue又はfalseを設定するだけで各メッシュの表示非表示が変更でき、
メッシュのmaterialプロパティの値を変更するだけでマテリアル(材質)変更ができます。

マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小、ダブルクリック/タップでフォーカス機能できます。
スワイプで回転、画面に2本指を触れてなぞるとカメラの移動、ピンチイン/アウトで拡大縮小できます。

材質変更ができます。

カーペット

椅子

テーブル

ソファ

ライト

Javascriptで3Dコンテンツ一覧へ