Q&A
前提
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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー
