macOS Mojave で Typescript ファイルの中身を Quick Look で見れるようにする
macOS では Quick Look と呼ばれる機能により、Finder でファイルを選択した状態でスペースキーを押すとファイルによっては中身が表示されます。ですが TypeScript ファイル(拡張子が .ts /...
シーン 3D世界の舞台です。この中に3Dの物体や視点となるカメラを配置します。3Dの物体(メッシュ)を作成したらシーンに追加していきます。最終的にはカメラと一緒にレンダラに渡されて3D世界がブラウザ上に表示されます。
カメラ 3D世界の中の視点を与えます。カメラを動かすと視点が動くので3D世界の中で動き回ることができます。カメラには「透視投影カメラ」と「平行投影カメラ」の2つがあります。このカメラに映っているものが最終的にブラウザ上に表示されます。
平行透視カメラ 平行透視カメラでは近くのものも遠くのものも同じ大きさで映ります。例えば透視投影カメラで正立方体を見ると歪んで見えますが、平行透視カメラだと歪みなく正立方体だと判断できるように映ります。平行透視カメラでは前後左右をどこまで視線に入れるか、手前のどこから、奥はどこまで映すかを設定します。
ジオメトリ 3Dの物体の形状です。どんな形をしているのか、例えば立方体であれば頂点の座標の情報などをジオメトリが担うことになります。
マテリアル 3Dの物体の材質です。物体の表面のことだと思って大丈夫です。その表面の色や材質などなどの情報を担うのがマテリアルです。メッシュには色々あって、中には光源がないと真っ暗になるものもあります。下のコードで使ってるのは光源を必要としないメッシュです。
メッシュ 形状であるジオメトリと材質であるマテリアルが合わさってメッシュになります。これが3Dの物体そのものになります。コードの中を見ると分かりますが、メッシュはジオメトリとマテリアルの2つを渡すことで作られます。作ったメッシュはシーンに追加することで3D世界の中に登場させることができます。
説明はこれくらいにして、なんか表示させてみましょう。下のコードをindex.htmlとかって名前のファイルにコピペして保存してブラウザで開いてみてください。球体が表示されると思います。コードの中に説明が書いてあるので一体何をしているのかは中を読んでもらうのが早いと思います。
camera.position.set
の行と camera.lookAt
の行をmesh.rotation.y = theta;
に書き換えてやるとOKです。
renderer.render( scene, camera );
の後ろ、100行目に貼付けてください。下のような感じで回転すると思います。
three.js wiki – トップページ 日本語wikiです。英語が読めない人はここで我慢してください。
WebGL ベースの Three.js の視覚化 (Windows) MSDN (Microsoft Developer Network)のページです。座標系の話が絵と一緒に書いてあるので、これをキチッと頭に入れておきましょう。
初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> | HTML5Experts.jp
初心者向けに書かれたものの中ではおそらく一番わかりやすいです。基礎知識編というのもありますが、こっちは「そもそもWebGLって?」みたいな話で初心者向けではなくて中級者以上向けです。