Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Three.js

Three.js  線(Line)

今回は、Three.jsの「線(Line)」について書きます。 このような線を表示させることが出来ます。 まずは、Lineクラスのコンストラクタから~ Line(geometry, material, type); geometryは形状 materialは材質 typeはラインのとり方。省略可能。 実際のソース…

Three.js AxisHelper

今回は、Three.jsの「AxisHelper」をやります。 AxisHelperは、写真のようなXYZ軸を表示するクラスです。 X軸が赤色、Y軸が緑色、Z軸が青色となっています。 軸の色は、基本的に変えることはできません。AxisHelperコンストラクタ new THREE.AxisHelper(軸の…

Three.js 物体の回転(rotation)

今回は、Three.jsの「物体の回転のやり方」を書きます。 物体を回転させるには、rotationを使います。 オブジェクト名.rotation.set( x軸の回転角, y軸の回転角, z軸の回転角 ); 「x軸の回転角」などの単位は、「ラジアン」です。(ラジアンって何??) ま…

Three.js  テクスチャの貼り方

Three.jsの物体へのテクスチャの貼り方を書いていきます。 テクスチャを貼り付けた、実行例がこちらです。 上のやつには、これらのテクスチャを使いました。① ② ペイントで、さくっと作りました(笑) ①のテクスチャはキューブ(立方体)に貼り、②のテクスチ…

Three.jsの基本⑦

今回は、Three.jsの描画関数の定義をやります! 今までに、カメラ,ライト,物体の設定が終わり、そして、最後に追加する項目です。 こちらを書くと、実行できます。 renderer.render(sceneオブジェクト, cameraオブジェクト)(※rendererはレンダラーオブジェ…

Three.jsって、そもそも何??

今回は、Three.jsについて、紹介したいと思います。 今更感はあるかな(笑)ちなみに、僕は、Three.jsを知ったのは3ヶ月くらい前です(笑) Three.jsは、WebGLをサポートした3D描画ライブラリです。 JavaScriptで3DCGが簡単に動かせます。 こんなのが作れた…

Three.jsの基本⑥

今回は、Three.jsのGeometry(ジオメトリ )をやります。 Geometryは、球や立方体などの実際に表示する物体の事です。形状と言ったほうがいいのかな(笑) ざっくりというと、今回は、物体の生成から位置や色の設定を中心にやっていきます(笑)「introducti…

Three.jsの基本⑤

今回は、Three.jsのLight(ライト,光源)について、やりまーす。「introduction.html」では、この部分が光源の処理をしている所です。 /*----------------ライト(光源)関数の定義④--------------*/ var light, light2; //グローバル変数の宣言 function in…

Three.jsの基本④

今回は、Three.jsのscene(シーン)について、やります。「introduction.html」では、「③scene処理」のここの部分です。 var scene; //シーンオブジェクト function initScene() { scene = new THREE.Scene(); //シーンオブジェクトの生成 } 重要なのは、 sc…

Three.jsの基本③

今回も、Three.jsの解説やりまーす(笑) ちなみに、前回は、レンダラーや画面サイズ指定などをやりましが、今回は、カメラについてやります。 introduction.htmlの②カメラ処理の部分です。 var camera; var controls; function initCamera() { camera = new…

Three.jsの基本②

今回は、前回に書いた「introduction.html」をもっと詳細に解説します(^^)「introduction.html」は、こちらから見えます! Three.jsの基本① - Three.jsを使って、作ってみた最初のhtmlタグとかは、飛ばします(笑) はじめに①の「webGL処理」のところから、…

Three.jsの基本①

今日から、Three.jsを使って、どんな感じにコードを書いているのかをまとめていきます!基本はこんな感じです。あ! Three.jsのバージョンはr58です。 <html> <head> <title>introduction</title> <meta charset="utf-8"> <script src="Three.js"></script> <script src="OrbitControls.js"></script> <link rel="stylesheet" type="text/css" href="screan.css"> </link></meta></head></html>