VRの視点を操作してVR空間を自由に動き回りたい時は、カメラに「常に直進」属性ブロックを設定します。 カメラを常に直進する スマートフォンVRでは、コントローラーやタッチなどで操作できない場合が多いため、スマートフォンの向きを変えることでスマート…
VR空間では、カメラという物体でユーザの視点を決めます。 カメラはシーンに1つだけ登録できます。 [公式]カメラ このプログラムでは、カメラブロックを表示してYの位置を10にセットしています。 これによって上空に視点が移動して空を飛んでいるような表現…
「動きのある物体」で重力の影響を受ける物体を作ることができます。 また「動きのある物体」に「クリックした時〜のチカラでなぐる」ブロックを設定することで、注視点カーソルでクリックした時に力を発生させることができるようになります。 土台ブロック…
クリックした時に反応する処理を作るには、「ブロック〜をパラメータ〜を受け付けるように定義」のブロックでクリックされた時に行うべき処理を先に定義しておいて、「クリックした時に〜を処理する」ブロックに、その名前を記述します。 物体を注目点カーソ…
物体をアニメーションさせるためには、「アニメーション用のコマ送り」ブロックと、「〜づつ〜する」というブロックを組み合わせます。 このサンプルは、物体を回転させます。 [公式]アニメーションループ アニメーション用のコマ送りブロックは、「繰り返し…
Aframe が先日2019年12月16日に晴れてVersion1.0リリースとなりました。 早速BLOCKVROCKもAframe Version1.0に対応しています。 チェックポイントによる移動という機能によって、「常に直進」とは異なるやり方でカメラを移動させることができます。 以下のプ…
BLOCKVROCKには、コードモードという機能があります。 コードモードでは、JavaScriptを使ったプログラミングが可能です。 BLOCKVROCKで作った物体や世界は、Webで使われるHTMLとJavaScriptで出来上がっているためJavaScriptを使うことで自由に操作することが…
RDS のCA証明書が2019になるとアナウンスがあって、最終警告っぽいメールがきてたので慌てて対応。 そのメールのタイトルはこちら。 重要なお知らせ：2020年2月5日までにお客様のAmazon RDS SSL/TLS証明書の更新を行ってください | Important Reminder: Upda…
物体の位置は、3つの軸で決定します（X軸、Y軸、Z軸） Xは左右（プラスになるほど 右） Yは上下（プラスになるほど 上） Zは奥行き（プラスになるほど 手前） を表します。 以下のサンプルプログラムでは 赤い物体を左右に 青い物体を上下に 黄色い物体は、…
動きのあるブロックは、重力を受けるようになるのでそのままでは落下していきます。 「静止した物体」属性をつけたブロックは、動きのある物体に対して衝突判定があります。 静止した物体の大きさのXとZ方向を広くすれば、重力のある物体を受け止める土台と…
BLOCKVROCKでは、物理法則をコンピュータで計算再現して、物体に重さや衝突の判定を設定することができます。 ブロックに「動きのある物体」の属性を繋げましょう。 Y座標を少し上にセットしておくと分かりやすいです。 物理エンジンで重力をつける 実行する…
Z軸は奥行きを表しますので、物体の中心を手前から奥に向かって通る軸を中心に回転します。 Z軸による回転は、カメラの目線が回転軸と平行になるため、時計回りであることがわかりやすいですね。 物体の回転（Z軸） [公式]z軸60,90,135回転
Y軸での回転は、物体の中心に縦の軸を通してそれを中心に回転するということです。 やはり＋になるほど時計回りに回転し、マイナスになるほど反時計回りに回ります。 今回は、マイナスの回転もやってみます。 y軸90,45,-45回転 [公式]y軸90,45,-45回転
物体を回転させる回転属性については、初期段階で最も混乱するポイントのようです。 軸を中心にして＋であれば時計回りに回転するというルールさえ理解できれば、あとはトライアンドエラーで作りたい角度を確認しながら進めていくのが良いです。 このサンプ…
配列は、データを複数まとめて扱う仕組みであり「繰り返し」という構造をとても相性がいいのですが、繰り返しのためだけのデータ構造ではありません。 データが順番に並んでいるので、番号を指定して配列のデータを使うこともできます。 この時注意が必要な…
繰り返しは大変便利なのですが、数字を規則的にカウンターとして取り出しながら繰り返すことが中心です。 規則的でない繰り返しや、微妙な微調整をするには配列を使った繰り返しを使うと良いでしょう。 配列とは変数とよく似た要素で「違いは複数のデータを…
繰り返しブロックの内側にも物体などを組み合わせて配置することができます。 繰り返しブロックの内側を１回の仕事として実行して、次の繰り返しに移るという動作のしかたをします。 「= counter」が入っている箇所をよく確認してみてください。 繰り返しブ…
繰り返しのブロックには、「変数 xを カウントして」という記載があります。 繰り返しブロックを作ると、同時に変数xが作られて0(min)から10(max)までの繰り返しの数字が入る状態になります。 繰り返しブロックの内側で、この変数xを使うことができます。 繰…
だれでも簡単にVRやARが作れるサービスBLOCKVROCKについてリファレンスを書いていっています。記事を投稿したら、この目次を更新していきます。 【紹介】1−1 BLOCKVROCKというWebVRサービスhttps://daiyamamoto.hatenablog.com/entry/2019/11/26/144231 【BL…
コンピューターが得意なことの1つは、同じ作業を苦もなく繰り返すことです。 プログラミングはコンピューターへの命令なので、やはり繰り返し同じことを実行してもらう命令が重要です。 BLOCKVROCKでは、こういった繰り返しに使える「変数xをカウントして0か…
四則演算と呼ばれる演算には、足し算（加算）引き算（減算）掛け算（乗算）割り算（除算）があります。 特に掛け算は、数学で使う記号（x）とは異なり、アスタリスク（*）を使うので注意が必要です。乗算に*を使うのはBLOCKVROCKだけではなく、ほとんどの言…
変数を使うのと同じように入力項目を＝から書き始めることで、計算式を作ることができます。 「= 1 + 1」のように数値だけで計算もできますし、「= x - 2」のようにあらかじめデータをいれた変数を使った式にすることもできます。 以下のプログラムは、「段…
変数には数値やデータに対する名前づけの効果もあります。 10や-4という数字は味気ないですし、プログラムが巨大になってくるとどの数字が何を指しているかわかりにくくなります。 以下のプログラムでは、変数名に「高さ」という名称をつけました。 参照する…
BLOCKVROCKで変数（へんすう）を使います。変数はプログラミングのとても基礎的ながら重要な要素です。 プログラムで変数を使うメリットはいくつかあります。 同じ値を使っている場所にセットしておくと、変更するときに１箇所変更するだけですむ 値に名前を…
BLOCKVROCK入門編 様々な言語で、初めの１歩といえばHelloWorldとコンソールに出すことですが、BLOCKVROCKでもやってみます。 [公式]BLOCKVROCKでHelloWorld 半角英数文字を浮かせるコードです。 BLOCKVROCKでHelloWorld 位置のX Y Zの感覚が少し迷いがちで…
勢いに乗って早速の連投をしていきます。 BLOCKVROCKは、入門編の話もできていないのに、いきなり新機能の話をしていきます。 ブログを書くテンションをキープするためです。 円形に配置というブロックは、Aframe-Layout-Componentというコンポーネントを使…
昨年より、BLOCKVROCKというサービスをやっています。 https://blockvrock.com/ WebVR/ARを、誰でも作れるようにするサービスで、例えば下に載せたようなのが５ステップぐらいで簡単に作れます。 プログラミングに興味のある高校生などを対象に、プログラミ…
設計力は、課題解決力の一部です。 プログラミングを使って「設計」がうまくできるようにすることを目的にすると、結果として「課題解決力」が身につき、課題解決力が測定しやすくなると思います。 例えば、「おばあちゃんの安否を見守りたい」という課題を…
若い人（特に子供）たちにプログラミングやコンピューティングを教えることの意義について、あれこれ行ったり来たりと考えた結果、その意義は「設計の力」を鍛えることを目的にするということで良いんじゃないかと現時点で思っています。プログラムはそもそ…
<html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </head> <body> <div>host:<input id="req_host" type="text" value="http://localhost:8080"></div></body></html>
