はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

babylon.js ステップ15 環境設定

ステップ15は環境設定です。今までは無機質な虚無空間でしたが、ここで遂に空が登場します。そうする事で、見栄えのする3D空間が完成します いきましょう!! 背景色の変更 アンビエントカラーの変更 スカイボックス スカイボックスの自動生成方法 スカイボ…

babylon.js ステップ14 パーティクル表現

babylon.js を覚えようシリーズ ステップ14はパーティクル表現です。Three.jsでは自作で頑張るわけですが、babylon.jsではパーティクルシステムが備わっていますので、簡単にパーティクル表現が可能ですいきましょう! パーティクルの作り方 パーティクルシ…

babylon.js ステップ13 スプライト(Sprites)

babylon.js ステップ13はスプライトアニメーションです。2Dではおなじみのこの技術。もちろんbabylon.jsでも使えます いきましょう! 2つのスプライト管理方法 スプライトマネージャー Picking(ピッキング) スプライトパックマネージャー(バージョン4.1から…

babylon.js ステップ12 レイキャスト(Raycasts)

babylon.jsのチュートリアルシリーズ 12回目今回はレイキャストをやっていきますいきましょう! レイキャストとは光線による衝突判定 光線と最初に接したメッシュの取得 Predicate関数を使用したレイキャスト マルチピック Picking Ray デバッグ用のRayHelpe…

babylon.js ステップ11 画面クリックとの衝突判定 (Picking Collisions)

babylon.js チュートリアル ステップ11 は画面クリックとのコリジョンです。コリジョンシリーズの3回目です。いきましょう! 3Dオブジェクトのクリック(hit)を検出 ヒットした情報を用いて銃槍の位置をずらす デモ 3Dオブジェクトのクリック(hit)を検出 壁…

babylon.js ステップ10 メッシュの交差衝突判定 (Intersect Collisions - mesh)

メッシュ同士が、それぞれ衝突を検出する方法をやりますいきましょう!! 説明 2つのメッシュが接触しているときに衝突イベントを発生させる方法 メッシュと1点間の接触を検出する方法 まとめ 説明 衝突検出の2つの方法を紹介します。 2つのメッシュが接触し…

babylon.js ステップ9 カメラとメッシュの衝突判定&重力 (Cameras, Mesh Collisions and Gravity)

babylon.js を覚えようステップ9は衝突判定と重力制御です! いやー、重力とか楽しそうですね。 メッシュだけでなく、カメラにも設定できるようです。 いきましょう!! 説明 1.重力の設定 2.楕円体を定義する 衝突を適用する(Apply collision) メッシュオブ…

babylon.js ステップ8 アニメーション(Animations)

babylon.js でのステップも8個目!!今回はアニメーションです!アニメーションは、メッシュに動きを与えて見栄えがするシーンを作成出来ます。いきましょう! アニメーションの2つの方法 キーフレームアニメーション アニメーションを止める方法 終了を待…

babylon.js ステップ7 ライティング

babylon.js ステップ7 ライティングです。3D表現はライティングが無いと始まりません。ライディングの無い空間はただの暗黒です。暗黒の空間に一条の光として、ライトを設置します。ライトと言っても、太陽のような環境光もあります。いきましょう! ライト…

babylon.js ステップ6 カメラ

babylon.jsにはよく使われる2つのカメラがあります。一つは1人称視点のユニバーサルカメラ(the Universal Camera)、もう一つはアークカメラ(Arc Rotate Camera)です。 まずカメラのコントロールを可能にしましょう camera.attachControl(canvas, true); ユ…

babylon.js ステップ5 マテリアル

マテリアルを使用すると、メッシュを色とテクスチャで覆うことができます。なお、メッシュを表示するには光が必要です。拡散マテリアル(Diffuse)と鏡面マテリアル(Specular)では、光源を作成する必要があります。いきましょう! 色 まずは、StandardMaterial…

babylon.js ステップ4 位置、回転、スケーリング

babylon.js やってみようシリーズのステップ4位置、回転、スケーリングのお話です 位置の話 babylon.jsには2つの座標系があります ワールド座標系 ローカル座標系 ワールド座標系 ワールド座標系の原点は変わりません。通常、メッシュが作成されると、その…

babylon.js ステップ3 線Lineを使ったいろいろな形状を表示

いろいろな形状シリーズです。いきましょう! 線 //Array of points to construct lines var myPoints = [ new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1, 1), new BABYLON.Vector3(0, 1, 0) ]; //Create lines var lines = BABYLON.MeshBuilder.…

babylon.js ステップ2 いろいろなプリミティブを表示

早速いきますBABYLON.MeshBuilderを使っていろいろ作っていきますThree.jsならジオメトリを作って、マテリアルを設定してメッシュを作るのですが、babylonは一行です。 球体 // Add and manipulate meshes in the scene var sphere = BABYLON.MeshBuilder.Cr…

Three.jsに物理法則を導入できるPhysijs を入れてみたいけど、、

前回の記事で、Three.jsはゲームに使えない的なことを言ってしまったのですが。。 実は、物理法則を簡単にいれる方法があったっぽい。それが、外部ライブラリPhysijsだ!! 特徴はこうだ! オブジェクトが重力の影響を受け、お互いに衝突するようになる シー…

babylon.jsで3D表現の初めの一歩

こんにちはどうしても3Dでゲームっぽい物をWeb上で作りたくて、ここ数ヶ月Three.jsを勉強していたのですが、、どうやらゲームを作るにはbabylon.jsの方が良さそうです。なぜ、Three.jsではダメなのか?それは純粋な3D表現ツールだからです。 キャラクターが…

私はサル以下なのか、、、と思ったあなたに。RPGに例えたGitの概念

ヒトにはもっと良い例えがあるはず! そんなわけで、サルには理解できないRPGで、誤解を恐れずに例えてみた。いつも教えるときに例えて説明しているので、自分で整理するためにメモ。 概念だけなので正確には、こっちのGithubが出してるチートシートを確認し…

Nuxt.js × Cordvaでスマホアプリを作ろうとしたメモ

Nuxt.jsでcordovaを利用してiOS,Andoroidアプリが作れたらいいなという 意欲的な事をふと思ったのでやってみたメモです。 Nuxt.jsで作成したWebサイトを簡単にCordovaアプリ化する方法【ホームページを簡単アプリ化】 – こまめ この設定をやってCordova公式…

WSLにRails6環境を構築する方法メモ

Rails6Macでは難なく入ったのですが、、、WindowsのWSLではちょっとてこずったので、現状行ける方法をメモしておきます 【前提】 あらかじめWSLのubuntuが入っているものとします。ない場合はMicrosoftStoreからインスト―ル Ruby: 2.6.3 Rails: 6.0.2.2 Wind…

nginxインストール&起動&停止&設定(ubuntu)

インストール sudo apt-get update sudo apt-get install nginx 起動 sudo nginx 起動後に nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)みたいになるなら、すでに起動しているかも ps aux || grep nginxで起動しているプロセス…

container staton docker ubuntu初期設定メモ

いろいろインストール apt update IP系 apt install apt install iproute2 エディタ /etc/init.d/ssh restart ssh apt install openssh-server locale系 apt install language-pack-ja-base language-pack-ja ibus-mozc echo 'export LANG=ja_JP.UTF-8' >> ~…

PhpStorm(Intellij)でjavaコマンドを実行するとバージョンが違う

別のターミナルを開くしかなさそうです。ここで、Issueが出てますが、みんなイライラしています。 intellij-support.jetbrains.com環境変数(PATH)のJAVA_HOMEが「C:\Program Files\Java\jdk1.8.0_241」になっていてもPhpStormで開くと openjdk 11.0.3 2019-0…

Nuxt.jsでAdobeのTypekitを使う方法

ネットを探しても無かったので載せときます。 サブセットの話 日本語のフォントというのは、アルファベットに比べて文字数が多いため常用漢字だけに絞ってパッケージングし直したりしているんですが。(サブセット化) 最近ではダイナミックサブセットといっ…

プロジェクト・アリストテレス

googleの収益の根源(生産性を高める方法)を分析したけど 結果ほぼなにも関連がなくて すごい人材がいるとかでも無くて 唯一あったのが、社員の安心感「心理的安全性」だった。 ってやつ。 googleのアリストテレス プロジェクト rework.withgoogle.com グー…

新渡戸稲造の「武士道」

「武士道」を読んでいるという話なんだけれどこれが、とても面白くて。令和でこそ生きる知識だと思う。 日本人はなぜ世界から見ると礼儀正しい人種なのか?神を信じていないわけだから蛮族になるはずなのになぜココまで、まごころある芯の通った精神を持って…

はじめてのプログラミング的な 「のすけ式」エンジニアになりたい人向けの講座

最近、プログラミングをやったことない人でも、それなりにプログラミングできるようになる カリキュラム考えて、実際にやってもらっているのですが どうせなので、ここにも公開していきます。 いろいろ内容に異論はあるかもしれませんが「のすけ式」というこ…

Nuxt.jsとかメモ

最近は Nuxt.jsでSPAアプリケーション及び、SSRアプリケーションを 構築したりしています。Vue.jsは以前利用していたknockout.jsに似ていて書きやすい。 cssフレームワークやjQueryも併用できるなど相性がいいので気に入ってます。サイトを作っていく上で、…

canvasで円が動くやつ

Circlesを作ったjsdo.it

そういえば燃料電池作ったよ

重曹で発電した!ものは全て100円均一で揃えました (ブレッドボードと電源コネクタは別) ブレッドボードは前にAliexpressで一個50円くらい?で買ったのと電源コネクタと発光ダイオードは秋葉原のパーツやで300円&30円くらい?で買ったやつです。別になく…

自作キーボードキットHelixPico

のすけです。唐突だけど、キーボード自作します!もう、PC作業で肩こりがしんどくて、持ち運びできる分離型のキーボードが欲しかったんだけど、駅前のビックカメラには売ってないし。。。で、自作キーボードの噂を聞きつけ、遊舎工房さんのHelixPicoを買いま…