Three.jsで矩形範囲内の3次元オブジェクトを選択させたい。 どのように実現するか検討していたら、Three.jsのexamplesにboxselectionというサンプルがあった。 Three.js examples misc boxselection 配色が派手でわかりにくいが、ドンピシャである。 早速使ってみたが、これはPerspectiveCamera専用でOrthographicCameraでは使えないと判明。 残念。 しばしググると以下のサイトを発見。 how to set frustum inortographic camera THREEJS boxselectionをOrthographicCameraでも使えるようにしている。 しかも選択色にシェーダを使い、完成度が高い。 Stack Overflowの投稿者の方、有難うございます。 以下を変更すればOrthogra
WebVRでユーザーインターフェースを制作しようとすると、3D空間上のオブジェクトをコントローラーで選択する必要があります。そこで、Three.jsのサンプルを参考に、コントローラーでオブジェクトを選択する方法を調べつつ、draggingを試してみました。 ※Three.jsの仕様が変更になったため内容を修正しました。(2019年12月13日) dragging WebXR Device API シャドウマッピング 3DCGにおいて影はクオリティを決める重要な要素です。そこで、オブジェクトの選択方法を試す前にシャドウマッピングを試しました。 Three.jsで影をつけるには、影を落とすオブジェクトに「castShadow = true」を、影を受けるオブジェクトに「receiveShadow = true」を設定する他、レンダラーと光源の設定を有効化します。 //レンダラーで影を有効化 r
Three.js(R100)で開発をしています。 OrbitControlsを使用していますが、カメラの角度を変更しても、すぐに角度を元に戻ってしまいます。 ボタンをクリックすると、changeCamera関数のcamera.setRotationFromQuqternionで角度が変更されます。 しかしcontroles.update()を実行するとカメラが元の角度に戻ってしまいます。 camera.position.x で位置を変更した場合にはcontroles.updateで位置が反映されているような動きになり、正しく位置が変更されます。 「OrbitControls以外でカメラの角度を変更した場合、OrbitControlsに反映させたい」場合の方法を教えて下さい。 よろしくお願いいたします。 全コードを添付しました。 <html> <head> <meta charset="ut
Three.jsの続きです。前回はジオメトリ設定で色々な形を作りました。今回はカメラの制御です。コードの理解のためには三角関数の理解が必要でした。サイン、コサイン、タンジェントとか聞き覚えはあったけど、それを使う目的はわかっていなかったです。それではいきましょう! 【目次】 camera.positionでカメラを制御(完成品) 星屑の追加(Vector3()メソッド) 関数実行 関数定義(大枠) ジオメトリ マテリアル メッシュ カメラ制御の設定(camera.position()メソッド) ローテーション(回転)の初期値 カメラポジション(前回) アニメーション設定(前回) カメラポジションのアニメーション設定(全体) 三角関数の理解(カメラ制御設定の詳細) ラジアン Math.PIは円周率(π) 円周率とは ラジアンを度数に変換 度数をラジアンに変換 カメラの位置設定にラジアンを使う
Three.jsのバッファーオブジェクトは、シェーダプログラム内で使用する頂点データを直接操作できる形状オブジェクトで、BufferGeometryを使用して生成します。 バッファーオブジェクトは生成時、何も情報を持っていないので頂点データを定義する必要があります。 BufferGeometry - three.js docs //バッファーオブジェクトの生成 const geometry = new THREE.BufferGeometry(); //型付配列で頂点座標を設定 const vertices = new Float32Array([ -1.0,-1.0,1.0, 1.0,-1.0,1.0, 1.0,1.0,1.0, ]); //バッファーオブジェクトのattributeに頂点座標を設定 geometry.setAttribute('position',new THREE.B
デモページ ソースダウンロード 線を使ったアニメーションは、流れ星や紙吹雪、風の動きなど、さまざまなモチーフの表現をより豊かにしてくれます。 今回はTHREE.MeshLineを使い、リボンのように滑らかに線が動くアニメーションを作る方法を、5つのデモとともにご紹介します。オリジナルのアニメーションを作る際は、ぜひ参考にしてみてください。 THREE.MeshLineとは 筆者は2年前から、Jaume Sanchez EliasがThree.js用に作成したライブラリ『THREE.MeshLine』を使用して、WebGLでヌルヌルと動く線を作りはじめました。 THREE.MeshLineの特徴は、Three.jsが長年抱えてきた「線の幅が変更できない」という問題に取り組んでいる点にあります。MeshLineは、幅のパラメーターをサポートしていないGL_LINEメソッドのかわりに、ビルボード
このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く