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

ThreeJSのプラグインを利用。マウスで視点が動きます。Gridヘルパ、Axesヘルパ、Orbitコントロールを利用。

文法命令一覧

エディタ

プログラム

!「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]へ画像描画
ここまで

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

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ