プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
A-Frameで壁に沿って移動する視線カーソルを実装する - VOYAGE GROUP VR室ブログ
こんにちは。買って2週間で壊れたBluetoothイヤホンがメーカー交換となり、新品を送ってもらったもののそれも1週間で壊れた jujunjun110 です。 きっと耳から怪電波が出てるんだと思います。 最近はA-Frameの勉強をしながら、3D空間・VR空間ではどういった表現が使いやすいのか研究する日々です。今回は、壁に沿う視線カーソルを作ってみたので、それについて書いていきます。 目次 目次 壁に沿うカーソルとは raycaster（視線）と他のオブジェクトの交点情報を取得する カーソルの位置と向きを適切な方向に揃える cursorの位置 cursorの向き 実物 イベントのお知らせ 壁に沿うカーソルとは A-Frameのデフォルトの視線カーソルがこんな感じで画面中央に固定されているのに対し、 こんな感じでオブジェクトに沿って動くカーソルのことです。 （ちなみに今回はこちらのフリーのモ
オイラー角
この文書は「よくわかる解析力学」【東京図書】の付録C.2.2節（344ページ）で説明しているオイラー角を動く図を使って説明したものです。 webGLという3Dのライブラリが動かないブラウザ環境では遅くなる場合があります。できるかぎり、webGLの使える環境で動かしてください。 剛体の運動を考えるとき、剛体が今どのような位置関係を持っているかを3つの角度を使って表現するのが「オイラー角」である。3つの角度を表す記号としてφ、θ、ψを使おう。passiveな変換、すなわち座標系の方を回す変換として説明する。図に示したように座標軸の向きを変える。下の図では、その三つの角度を変更して、どういう変換を行っているかをアニメーションで見ることができる。 回転の向きはすべて右ねじが軸の方向に進むときに右ねじが回る向きである。 x軸、y軸、z軸を回転させるパラメータがφ、θ、ψである。 φは、元々のz軸を軸
逆引き風！Three.jsでゲームを作る時に役立ちそうなTips
まずはじめに お前は誰だ Jey-enと申します。業務でC#を、JavaScriptは業務と趣味で合わせて1年という、素人と知ったかぶりの狭間を生きております。 こんなん作った Three.jsでゲームっぽいのが作れるかなと思い、このくらいまでやってみました。 大体ね、「３DぐらふぃっくがWebで出来るようになった！おっしゃゲーム作ったろ！」なんて、脳筋すぎると思いませんかね そのゲームっぽいものを作りながら思いついた、使えそうな小技をお伝えできればと思います。 他の方がやっているように、一つのテーマで完結まで行くという形ではなく、タイトルにもあるように【逆引き辞典風】な何かです。 対象としている人： Three.jsを使って、【何かモデルを表示する】とかできて、次は何をしようかと考えてる人 よせばいいのにUn●tyじゃなくてThree.jsでゲームっぽいのを作ろうとしてる人 せめて「Sc
WebGL開発に役立つベクトルの外積 (Three.js編) - ICS MEDIA
この記事は前回の「WebGL開発に役立つベクトルの内積 (Three.js編)」の続編です。前回はベクトルの内積を勉強しましたが、今回は外積について紹介します。外積は高校までの数学では学んでいないと思いますが、本記事では簡潔に要点だけを解説するので安心してください。外積は衝突判定や、光の表現など、3Dコンテンツ制作において重要なさまざまな場面で活躍します。一緒に外積について学び、外積をThree.jsでどう応用していくかを学んでいきましょう。 外積を使った3Dのデモの紹介 本題に入る前に外積を使ったデモを作成したので紹介します。今回は以下のようなトロッコがレールに沿って走る処理を外積を使って実装しています。サンプルコードもGitHubにアップしているので参考にしてください。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)で作成しています。 外
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introduction – A-Frame
three.js docs
Convert three.js scene rotation to polar coordinates?