Three.jsで作るWebVRの操作面について考える【注視点カーソル】 | CardboardClub - スマホで楽しむwebVR！
Three.jsで作ったVRコンテンツに注視点カーソルを実装 Three.jsでwebVRコンテンツを作るお勉強中です。 前回は、用意したThree.jsコンテンツをCardboardに対応したVRコンテンツにしてみました。 今回は操作についても少し考えてみようと思います。 そういえば触れてませんでしたが、基本的にiPhone確認です。 Androidで動かないとかあったら教えてください。 スマホVRの主な操作は下記な感じ。 ・GoogleCardboardのスイッチを使う(磁気センサーか画面タッチ) ・ハコスコなどのHMD本体下部に空いた穴から指を入れて直接画面タッチ ・視線を向けた中心にあるオブジェクトが反応する注視点カーソル ・ジャイロや加速度などのセンサーを使い、頭を振ったりジャンプするなどで操作する ・milboxタッチのインターフェース などなど。 今回は3つめ「注視点カーソル
JSだけでVRできる！『WebVR』ことはじめ
今年はVR元年と呼ばれています。 実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。 ですが、今年はいよいよそれが本格的になりそうな状況になってきました。 そこで今回は、「今からWebVRに備えよう！」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。 VR元年 本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift（詳細は後述）に代表される、いくつかのヘッドマウントディスプレイ（以下、HMD）が比較的安価に家庭で利用できるようになったことです。 今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。 またこれらが注目される理由として、現在
three.js を使った3Dモデル表示 part1 - Qiita
今回はJava3Dの学習として、three.jsを使って3Dの描画に挑戦しました。 Javascript three.js を使って表示するだけ↓ var scene, // レンダリングするオブジェクトを入れる objmodel, // モデルデータを入れる obj, // モデルデータの角度などを変更するために重ねる camera, // カメラのオブジェクト light, // 太陽光のような光源のオブジェクト ambient, // 自然光のような光源のオブジェクト axis, // 補助線のオブジェクト renderer; // 画面表示するためのオブジェクト init(); animate(); function init (){ var width = 1000, // 表示サイズ 横 height = 600; // 表示サイズ 縦 Radius = 500; // カメラ
three.js で obj 形式モデルの使用 – LLC DigiFie
前回の記事 では json 形式のモデルを読み込んでマテリアルを設定する方法のデモでしたが、今回は こちら から入手させていただいた Wavefront(obj) 形式のモデルを使用して同様のデモを作成してみました。 three.js の基本的な部分とマテリアルを作成してモデルに適用する部分は前回とほぼ同じですが、3Dモデル読み込みとモデルからの Mesh および マテリアルの選択部分が異なっています。 では、手順です。 obj形式のモデルの読み込み。 OBJMTLLoader で .obj と .mtl をロードする。 var loader = new THREE.OBJMTLLoader(); loader.load( "obj/Robot_BI.obj", "obj/Robot_BI.mtl", onLoad ); 環境マップ用のテクスチャを読み込んでキューブ用テクスチャを作成。 v
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML three.js 3D Model - @//メモ