WebGLでレイトレしてゲームを作ってみた - SEGA TECH Blog
すべての色をつなげよう WHOLE MATCH PUZZLE 操作方法 マウスのドラッグ（タッチパネルの場合はスライド）で玉を一列横か縦にスライドさせることが出来ます。 ルール 同じ色同士ですべての玉をつなげると一面クリアです。そのとき100点が加算されます。 ひとつの解答例。赤は赤同士、青は青同士、上下左右どこかでつながっていればよい。 クリアするたびに色が増えていき最大で５色まで難易度が上がります。 パズルの完成度（パーセント）がスコアの下２桁になります。 2分の制限時間内で可能な限り玉を消して高得点を狙ってください。 目指せ1000点！ ※最新のfirefoxとchromeで動作を確認しています。 また、一部のスマホでも動作を確認しています。 結果をツイート タイトルに戻る はじめに ドーモ、セガゲームスは開発技術部所属の栃木と申します。 業務ではライブラリの制作や絵周りのことでコー
エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
Three.jsでの回転軸の使い分け
以前Three.jsを触り始めた頃に、２次元ではブロック崩しが定番なように、３次元ならルービックキューブが定番だろと勝手に決めつけてチャレンジしたことがある。 しかし結局ルービックキューブを完成させることはできず、妥協して違うものを作ったという半年ほど前の苦い過去。 そのときどうしても解決できなかったのがブロックの回転。 クォータニオンという概念を初めて知ったのもあって解決策が全く分からなかった。 状況としては、大体以下のような感じ。 ルービックキューブなのだからブロックの回転は常にx,y,zの３軸に対して行いたい。 となればまぁ普通にこんな風な回転用のクォータニオンオブジェクトを作成する。 //操作対象メッシュ var mesh; /* メッシュ等の作成部分省略 */ //３軸 var Axis = { "x" : new THREE.Vector3(1, 0, 0).normalize
WebGL開発に役立つ重要な三角関数の数式・概念まとめ （Three.js編） - ICS MEDIA
3Dコンテンツの制作において「三角関数は必須」とよく聞きます。ウェブサイト制作で三角関数を使う場面はほとんどありませんが、WebGLの勉強をすすめると3Dでは三角関数を使う場面が多いことに気づきます。本記事では3Dコンテンツ制作で使用頻度が多い基本的な数式と概念をまとめました。 今回解説する内容は地味ですが、ゲームやデータビジュアライゼーションを作る上でこの数式が基本となってきます。高校数学で学んだことをベースに、3つのサンプルを通して学習できるようまとめましたので、ぜひ最後までお付き合いください。WebGLの人気ライブラリの1つ「Three.js」を使って解説しています。 三角関数を使ったデモの紹介 まずは、本題に入る前に三角関数を使ったデモを作成したので紹介します。次のリンクをクリックしてご覧ください。 デモを別ウインドウで再生する ソースコードを確認する 地球をモチーフにしたサンプル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to change the zOrder of object with Threejs?
Home
GitHub - borismus/webvr-boilerplate: A starting point for web-based VR experiences that work on all VR headsets.
http://jaanga.github.io/cookbook/cardboard/readme-reader.html