ThreeJSによる3Dサンプル-基本形状(球と板)の表示

ソース

プログラム

!「https://n3s.nadesi.com/plain/plugin_weykthree.js」を取り込む
WEBGLキャンバスはNULL
レンダラは空
ココは空
カメラは空

開始する

●ライブラリ準備とは
　TJSライブラリ読み込み後には
　　プラグイン準備
　ここまで
ここまで

●プラグイン準備とは
　["controls/OrbitControls.js"]をTJSプラグイン読み込み後には
　　準備完了
　ここまで
ここまで

●準備完了とは
　WEBGLキャンバス要素準備
　描画準備
　アニメート
ここまで

●WEBGLキャンバス要素準備とは
　　WEBGLキャンバスは"#three_cv"のDOM要素取得
　　もし、WEBGLキャンバスでなければ、
　　　　Pは描画中キャンバス["parentNode"]
　　　　WEBGLキャンバスは"CANVAS"のDOM要素作成
　　　　WEBGLキャンバス["id"]は"three_cv"
　　　　WEBGLキャンバス["width"]は描画中キャンバス["width"]
　　　　WEBGLキャンバス["height"]は描画中キャンバス["height"]
　　　　WEBGLキャンバス["style"]["display"]は「none」
　　　　PにWEBGLキャンバスをDOM子要素追加
　　ここまで
ここまで

●描画準備とは
　ココは、TJSシーン作成
　ココに0x004400をTJS背景設定

　カメラは、[60,WEBGLキャンバス["width"]/WEBGLキャンバス["height"],0.1,200]のTJS透視投影カメラ作成
　カメラを[20,30,-150]にTJS位置設定
　カメラを[0,0,0]にTJS視点設定
　ココにカメラをTJS登場
　カメラのTJS投影マトリクス更新

  球体は{半径:10,横分割数:32,縦分割数:16}のTJS球体作成
　素材は{ color: 0x00f0ff }のTJS拡散反射材質作成
　球は球体と素材のTJSメッシュ作成
　球を[0,10,0]にTJS位置設定
　ココに球をTJS登場

　平面は{"幅":20,"高さ":20}のTJS板作成
　板素材は{color: 0xffff00, side:THREE["DoubleSide"]}のTJS拡散反射材質作成
　板は平面と板素材のTJSメッシュ作成
　板をココにTJS登場

　軸は1000のTJS軸線ヘルパ作成
　軸をTJS表示
　軸をココにTJS登場

　グリッドは{サイズ:200, 分割数:20}のTJSグリッドヘルパ作成
　グリッドをTJS表示
　グリッドをココにTJS登場

　＃光は0xffffffのTJS環境光源作成
　＃ココに光をTJS登場
　ランタンは[0xffffff, 2, 500, 1]のTJS点光源作成
　ランタンを[50,50,-20]にTJS位置設定
　ココにランタンをTJS登場

　レンダラは'three_cv'にTJS描画準備
　レンダラに[WEBGLキャンバス["width"],WEBGLキャンバス["height"]]をTJSサイズ設定
　レンダラに0x000000をTJSクリア色設定

　コントローラはカメラに描画中キャンバスのTJS衛星軌道コントローラ作成
ここまで

●アニメートとは
　画面更新時実行には
　　アニメート
　ここまで
　ワンフレーム
ここまで

●ワンフレームとは
　レンダラにココをカメラでTJS描画
　WEBGLキャンバスを[0,0]へ画像描画
ここまで

●開始とは
　ライブラリ準備
ここまで

作品について

作品情報

作品を編集

てぃふと@うぇいく作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: -
利用バージョン: 3.7.3
アクセス数(累計): 13
アクセス数(今月): 13
更新日時: 2021/04/29 14:02 編集: 2025/04/19 22:49

⭐⭐⭐⭐⭐...👍6

作品公開情報

交流

ThreeJSによる3Dサンプル-基本形状(球と板)の表示

プログラム

作品情報

コメント