質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

Q&A

0回答

510閲覧

three.jsを用いてobj、mtlファイルを読み込みwebXRを利用してVR上に表示する

abu1234

総合スコア1

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

0グッド

0クリップ

投稿2022/11/25 08:48

編集2022/11/25 09:07

前提

three.jsでobj,mtlファイルを読み込んでwebXRを用いることでVRデバイスに映し出すシステムを作ってます

実現したいこと

現在、obj、mtlファイルを読み込んでVR(HTC VIVE)に映し出すところまではうまくいっています
コントローラーもVR上に表示し、後のアクション設定のためにVRコントローラーから線を出しています。
webXRコントローラーのアクションの設定がうまくいかないです
コントローラーのパッドを動かしたときに表示しているオブジェクトが動くようにしたいです

現状でうまくいっているもの

///////////////////////コントローラー表示までうまくいっているもの <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>橋のモデル</title> <style> *{margin:0px} </style> </head> <body> <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.146.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.146.0/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; import { MTLLoader } from 'three/addons/loaders/MTLLoader.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; import { VRButton } from 'three/addons/webxr/VRButton.js'; import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js'; let camera, scene, renderer; let mouseX = 0, mouseY = 0; var group = new THREE.Group(); var objmodel,obj let windowHalfX = window.innerWidth / 2; let windowHalfY = window.innerHeight / 2; let controller1, controller2; let controllerGrip1, controllerGrip2; init(); animate(); function init() { const container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 1000000 ); camera.position.x=2000 // scene scene = new THREE.Scene(); scene.background = new THREE.Color( 0xffffff ); const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 ); scene.add( ambientLight ); const pointLight = new THREE.PointLight( 0xffffff, 0.8 ); camera.add( pointLight ); scene.add( camera ); // model const onProgress = function ( xhr ) { if ( xhr.lengthComputable ) { const percentComplete = xhr.loaded / xhr.total * 100; console.log( Math.round( percentComplete, 2 ) + '% downloaded' ); } }; new MTLLoader() .load( 'models/obj/male02/wakamiya.mtl', function ( materials ) { materials.preload(); new OBJLoader() .setMaterials( materials ) .load( 'models/obj/male02/wakamiya_Pier1.obj', function ( object ) { objmodel = object.clone(); objmodel.scale.set(1,1,1); obj = new THREE.Object3D(); obj.add(objmodel); group.add(obj); }, onProgress ); new OBJLoader() .setMaterials( materials ) .load( 'models/obj/male02/wakamiya_Pier2.obj', function ( object ) { objmodel = object.clone(); objmodel.scale.set(1,1,1); obj = new THREE.Object3D(); obj.add(objmodel); group.add(obj); }, onProgress ); new OBJLoader() .setMaterials( materials ) .load( 'models/obj/male02/wakamiya_Span1.obj', function ( object ) { objmodel = object.clone(); objmodel.scale.set(1,1,1); obj = new THREE.Object3D(); obj.add(objmodel); group.add(obj); }, onProgress ); new OBJLoader() .setMaterials( materials ) .load( 'models/obj/male02/wakamiya_Span2.obj', function ( object ) { objmodel = object.clone(); objmodel.scale.set(1,1,1); obj = new THREE.Object3D(); obj.add(objmodel); group.add(obj); }, onProgress ); new OBJLoader() .setMaterials( materials ) .load( 'models/obj/male02/wakamiya_Span3.obj', function ( object ) { objmodel = object.clone(); objmodel.scale.set(1,1,1); obj = new THREE.Object3D(); obj.add(objmodel); group.add(obj); }, onProgress ); new OBJLoader() .setMaterials( materials ) .load( 'models/obj/male02/wakamiya_Pier2.obj', function ( object ) { objmodel = object.clone(); objmodel.scale.set(1,1,1); obj = new THREE.Object3D(); obj.add(objmodel); group.add(obj); }, onProgress ); } ); group.position.set(-20000,0,-20000); group.rotation.set(-Math.PI/2,0,Math.PI/2); scene.add( group ); // renderer = new THREE.WebGLRenderer(); renderer.outputEncoding = THREE.sRGBEncoding; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.xr.enabled = true; container.appendChild( renderer.domElement ); document.body.appendChild( VRButton.createButton( renderer ) ); // controllers // コントローラの追加 controller1 = renderer.xr.getController( 0 ); scene.add( controller1 ); controller2 = renderer.xr.getController( 1 ); scene.add( controller2 ); // コントローラモデルの表示(XRControllerModelFactoryで勝手に種類を認識してくれる) const controllerModelFactory = new XRControllerModelFactory(); controllerGrip1 = renderer.xr.getControllerGrip( 0 ); controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) ); scene.add( controllerGrip1 ); controllerGrip2 = renderer.xr.getControllerGrip( 1 ); controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) ); scene.add( controllerGrip2 ); //コントローラーから出る線の追加 const geometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -1), ]); //線の色を青色に変更 const material = new THREE.LineBasicMaterial({color: 0x0000ff}); const line = new THREE.Line(geometry,material); line.name = "line"; line.scale.z = 10000000; controller1.add( line.clone() ); window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } // function animate() { renderer.setAnimationLoop( render ); } function render() { camera.lookAt( scene.position ); renderer.render( scene, camera ); } </script> </body>

試したこと

controller1 = renderer.xr.getController( 0 );の後に
controller1.addEventListener('axischanged', move);でmoveイベント追加

function move(event){ if(this.getButtonState('thumbpad') && this.getButtonState('trigger') === false){ var z = event.axes[0]; var x = event.axes[1]; group.position.x = group.position.x + 100 * x; group.position.z = group.position.z + 100* z; } if(this.getButtonState('thumbpad') && this.getButtonState('trigger')){ var y = -event.axes[1]; group.position.y = group.position.y + 100* y; } }

でオブジェクトを動かすmove関数を追加しました

エラーメッセージは表示されないのにパッドを動かしてもオブジェクトが動かないです
group.position.x + 100 * x;の100の値はもっと大きい値にしてみたりもしました

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問