サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
gupuru.hatenablog.jp
以前、はてなブログの記事内でJavascriptを書いてみて、ちゃんと表示されるのかを試しました。 で、改めて、はてなブログの記事内でJavascriptを書く方法をブログにまとめます。 やり方は、このようなソースコードを記事内に書くだけです。 <script type="text/javascript"></script> これだけです(笑) こんな感じにかけば、Javascriptが書けます。 試してみます。 このコードを記事内に書きました。 <script type="text/javascript">document.write("test");</script> 実行例: 「test」と表示されているはずです。 HTML5のcanvasやjqueryなども使えるようです。 これで終わりです。 ご不明な点などがありましたら、遠慮なくご質問ください。 ありがとうございました!
今回は、Three.jsの「物体の回転のやり方」を書きます。 物体を回転させるには、rotationを使います。 オブジェクト名.rotation.set( x軸の回転角, y軸の回転角, z軸の回転角 ); 「x軸の回転角」などの単位は、「ラジアン」です。(ラジアンって何??) また、こういう書き方もできます。 オブジェクト名.rotation.x = x軸の回転角; オブジェクト名.rotation.y = y軸の回転角; オブジェクト名.rotation.z = z軸の回転角; では、実際にやってみます。 こちらの実行例は、中心にトーラス(ドーナツ状の物体)を配置したものです。 ソースコードは、こんな感じです。 //トーラスの生成 var torus = new THREE.Mesh( // 芯円半径500、断面円半径100、断面円分割8、芯円分割16 new THREE.Torus
今回は、Three.jsの「Fog(フォグ)」についてまとめます。 「フォグ」というのは、遠くに行くほど物体が白く霞んでいく処理のことです。 これを使いますと、リアルな情景を表現できたり、遠くの景色をぼかすことができます。 (※こちらのサイトに詳しく書かれています。フォグ) Three.jsのフォグには「Fog」と「FogExp2」の2種類あります。 違いを簡単にまとめますと、 ①Fog・・・効果の出始めと終わりを明確に指定できる。制御が簡単。 ②FogExp2・・・現実に近い効果ができる。制御が難しい。 「Fog」と「FogExp2」のコンストラクタはこれです。 //①Fog Fog( color, near, far); //②FogExp2 FogExp2( color, density); ①Fog color・・・色(16進数),距離が離れるに従って物体の色がここで指定した色に近
今回は、Three.jsの「OrbitControls.js」について書きます。 OrbitControls.jsは、マウスドラッグによる視点移動と、マウスホイールによるズームが可能になるクラスです。簡単に言いますと、マウスで視点がグルグル回せるということです。 以前に、「TrackballControls.js」というやつを書きましたが、それと少し似ています。 今回は、実際にやってみたほうが、分かりやすいと思います。 OrbitControlsは、Three.jsに記述されている標準クラスではなく、「OrbitControls.js」に書かれています。 ファイルの場所は、Three.jsダウンロードフォルダ内の examples/js/controls/OrbitControls.js にあります。 では、OrbitControlsの読み込み方を書きます。基本的にTrackballCon
今回は、Three.jsの「三角形オブジェクト」について書きます。 こんな形の三角形の作り方を書いていきます。 横から見ると、 こんなんです。 最初は、コードから書いていきます。 コチラです。 //ジオメトリ(形状)の宣言と生成 var geometry = new THREE.Geometry(); //頂点座標データを追加 geometry.vertices[0] = new THREE.Vector3(150,0,0); geometry.vertices[1] = new THREE.Vector3(0,150,0); geometry.vertices[2] = new THREE.Vector3(0,0,150); //面指定用頂点インデックスを追加 geometry.faces[0] = new THREE.Face3(0,1,2); //マテリアル(材質)の宣言と生成 va
今回は、Three.jsの「LatheGeometry」について、書きます。 LatheGeometryは、Three.jsのジオメトリ (形状)の一つです。 こちらは、Z軸を中心とした回転体を作るジオメトリです。 例えば、こんな形が作れます。 ワイヤーフレームで表示したもの。 LatheGeo…
今回は、jQueryの「remove()」と「empty() 」について書きます。 両方とも、要素を削除するメソッドです。 1.「remove()」 removeは、マッチしている自身の要素も含めて、子要素も全て削除します。 基本的にこのように使います。 例1 $('div').remove(); 例2 <body> <div class="main"> <div class="hey">HEY!</div> <div class="foo">Foooooo!</div> </div> <script> $(function(){ $('div').remove(); }); </script> </body> こちらを実行すると、div要素が削除され、何も表示されません。 引数は、こんな感じです。 .remove([ selector ]); selectorを指定すると、指定した条件に
今回は、SwiftでLineのURLスキームを使う方法を書きます。 URLスキームって、何?という人は、こちらを見てください^^ ①画像 画像をURLスキームを使って、Lineに送る方法を書きます。 この場合のURLスキームは「line://msg/image/」です。 コードはこちらです↓ var pasteboard: UIPasteboard = UIPasteboard.generalPasteboard() pasteboard.image = UIImage(named: "img.png") var imageURL: NSURL! = NSURL( string:"line://msg/image/" + pasteboard.name) if UIApplication.sharedApplication().canOpenURL(imageURL) { UIApplic
今回は、Three.jsの「クォータニオン(Quaternion)」について書きます。 クォータニオン(Quaternion)は、簡単に言いますと、物体を回転させる方法です。 以前にも、物体を回転させる方法について書きましたが、それとは別のやり方です。 以前のやり方は、オイラー角による回転で、今回は、クォータニオン(Quaternion)による回転です。 クォータニオンについて、専門的に知りたい人は、コチラを見てください。 その10 クォータニオンを学んでみよう! 四元数 - Wikipedia まずは、コードから~ クォータニオンはオイラー角より、複雑なコードを書きます。 実際のコードはコチラです。 //cubeは直方体(CubeGeometry)のジオメトリです。 //クォータニオン利用の宣言(必須) cube.useQuaternion = true; //回転軸ベクトルの宣言・規格
Three.jsの物体へのテクスチャの貼り方を書いていきます。 テクスチャを貼り付けた、実行例がこちらです。 上のやつには、これらのテクスチャを使いました。 ① ② ペイントで、さくっと作りました(笑) ①のテクスチャはキューブ(立方体)に貼り、②のテクスチャは円に貼り付けました。 xyz軸は、THREE.AxisHelperのものです。軸にはテクスチャは貼っていません(笑) では、テクスチャの貼り方を解説していきます! テクスチャの読み込み方はこちらです。 THREE.ImageUtils.loadTexture('ファイル名'); 有名な拡張子(png,jpg)は、ほとんど使えるようです。 THREE.ImageUtils.loadTextureだけでは、読み込んだだけです。 物体にテクスチャを貼り付けるには、マテリアルのプロパティの一つ「map」を使います。 こんな感じです。 var
今回は、Three.jsで「2画面表示させる方法」を書きます。 2画面表示とは、こんな感じの事です。 左と右、別々の事を表示させています。 ちなみに、左が立方体を上から見た画面で、右が真横からみたものです。 2画面表示させる方法は、簡単に説明しますと、カメラを2つ作り、シーンオブジェクトに追加するというものです。 やり方を書いていきます。 ① レンダラーオブジェクトを生成した後に、こちらを追加してください。 //rendererはレンダラーオブジェクト renderer.autoClear = false これを追加しないと、描画されません。 autoClearはWebGLRendererのプロパティの一つです。 ② カメラオブジェクトを2つ作ります。 //カメラオブジェクトを2つ作る。cameraLは左画面,cameraRは右画面です。 //position,lookAtは任意で追加して
今回は、Unityの「3Dモデルに衝突判定をつける」方法を書きます。 UnityのAsset Storeで、こんな感じ↓の3Dモデルをダウンロードしました。 で、こいつにRigidBodyをつけて、衝突判定するようにした所、衝突判定しませんでした! 調べると、こちらに解決方法がありました↓↓ [Unity]外部オブジェクトに形状に添ったコライダーを付ける方法~Mesh Collider~ | つくりんぐ 3Dモデルは、コライダーをつけないと、衝突判定しないようです。 ここから、3Dモデルに衝突判定させるやり方を書いていきます。 とりあえず、3Dモデルを配置します。 次に、「Component」の「Physics」を選びます。 色々、あるなかから「Mesh Collider」を選びます。 すると、こんな感じのやつが追加されているはずです。 で、この中の「Mesh」に3Dモデルの形をいれます。
今回は、Three.jsのLight(ライト,光源)について、やりまーす。 「introduction.html」では、この部分が光源の処理をしている所です。 /*----------------ライト(光源)関数の定義④--------------*/ var light, light2; //グローバル変数の宣言 function initLight() { //平行光源オブジェクト(light)の設定 light = new THREE.DirectionalLight(0xcccccc,1.6); //平行光源オブジェクト(light)の位置 light.position = new THREE.Vector3(0.577, 0.577, 0.577); //影をつける light.castShadow = true; //sceneに平行光源オブジェクト(light)を追加 sc
今回は、Three.jsの「STLLoader」について書きます。 STLLoaderは、stl(3DCGファイルの方)をThree.jsに読み込む事ができる関数です。 ちなみに、stlは、三次元形状を表現するデータを保存するファイルフォーマットのひとつです。 詳しくは、ウィキペディアを見てください(笑) STLLoaderを使って、3Dモデルを読み込むと、こんな感じに表示されます。 横です。 STLLoaderを使うには、「STLLoader.js」を読み込む必要があります。 STLLoader.jsのファイルは、Three.jsダウンロードフォルダ内の examples/js//loaders/STLLoader.js にあります。 実際のコードを書きます。 まずはじめに、Three.jsのファイル読み込み後に、 <script src="STLLoader.js"></script>
今回は、jQueryプラグインの「fullPage.js」について書きます。 「fullPage.js」を使うと、フルページスクロールするサイトを簡単に作れます。 簡単に言うと、iPhone5sのプロダクトサイトみたいなものが作れます。(スクロールのみ) 縦スクロールだけでなく、横スクロールも作れます。 タブレットなどにも対応しています。 あと、比較的、導入も簡単です。 まず、導入方法から書いていきます。 ① こちらの公式サイトから「fullPage.js」をダウンロードします↓ http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/ githubはコチラ ダウンロードしたフォルダを解凍すると、中身はこんな感じです。 使うのは、「jquery.fullPage.css」、「j
今回は、androidで、EditTextの入力内容をリアルタイムで取得する方法を書きます。 リアルタイムで取得するには、TextWatcherというものを使います。 導入も簡単です。 このような形で、書きます↓ java public class MainActivity extends Activity implements TextWatcher { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText edittext = (EditText)findViewById(R.id.edittext); edittext.addTextChangedLi
今回は、Three.jsの「TextGeometry 」について書きます。 こちらは、3Dのテキストを表示させることができるジオメトリ (形状)です。 こんなのが表示できます。 横から見ると、 こんな感じです。 TextGeometryを使用するには、気をつけることが、一つあります。 TextGeometryを使うには、typeface.js形式のフォントファイルを読み込む必要があります! typeface.js形式のフォントファイルは、Three.jsダウンロードフォルダ内の examples/fonts/〜typeface.js にあります。 6,7種類あると思います。 で、Three.jsのファイル読み込み後に、 <script src="helvetiker_bold.typeface.js"></script> を追加してください。今回は、helvetiker_bold.type
今回は、Three.jsのGeometry(ジオメトリ )をやります。 Geometryは、球や立方体などの実際に表示する物体の事です。形状と言ったほうがいいのかな(笑) ざっくりというと、今回は、物体の生成から位置や色の設定を中心にやっていきます(笑) 「introduction.html」では、この部分が物体を表示している所です。 /*------------Geometry処理(物体表示)⑤-------------*/ var sphere,plane,axis; //グローバル変数 function initObject(){ //球体を表示する部分 sphere = new THREE.Mesh( //球のジオメトリ (半径:200) new THREE.SphereGeometry(200), //マテリアル (材質) new THREE.MeshPhongMaterial(
今回も、Three.jsの解説やりまーす(笑) ちなみに、前回は、レンダラーや画面サイズ指定などをやりましが、今回は、カメラについてやります。 introduction.htmlの②カメラ処理の部分です。 var camera; var controls; function initCamera() { camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 ); camera.up.x = 0; camera.up.y = 0; camera.up.z = 1; camera.position.set(1394, 1416, 854); controls = new THREE.OrbitControls(camera,renderer.domElement); } まずは、ここから。 camera =
3Dプリンター楽しすぎです(笑) 「3Dプリンターで印刷できる3Dモデルを無料でダウンロード出来るサイト」って、ないのかな?? 無いなら、つくろうかな・・・あると、便利な気がする。 今回は、「Three.jsの3Dモデル」をマウスでクリックする方法を書きます。 専門的には、「ピッキング処理」と言うのかな?? ちなみに、これはThree.jsの標準機能の一つです。 まずは、実際のソースコードから~ ・クリック判定の部分(ピッキング処理) var projector = new THREE.Projector(); //マウスのグローバル変数 var mouse = { x: 0, y: 0 }; //オブジェクト格納グローバル変数 var targetList = []; //マウスが押された時 window.onmousedown = function (ev){ if (ev.targe
このページを最初にブックマークしてみませんか?
『Three.jsを使って、作ってみた』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く