meta quest

This commit is contained in:
2025-06-04 19:28:01 +03:00
parent b1de42dcb7
commit 01bf187869
4 changed files with 132 additions and 18 deletions
+109 -12
View File
@@ -10,9 +10,11 @@ import { MapControls } from 'three/addons/controls/MapControls.js';
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js';
import { ARButton } from 'three/addons/webxr/ARButton.js';
import { XRButton } from 'three/addons/webxr/XRButton.js';
import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
class GameEngine {
async init(domNode) {
async init(domNode, opts = {}) {
this.w = domNode.clientWidth || 1200, this.h = domNode.clientHeight || 800;
this.aspect = this.w / this.h
const gameEngine = this;
@@ -83,12 +85,14 @@ class GameEngine {
this.stereo.setSize( this.w, this.h );
const controls = new OrbitControls( this.camera, renderer.domElement );
const gizmo = new ViewportGizmo(this.camera, renderer, {
container:'.renderer-gizmo',
//type:'cube'
});
gizmo.attachControls(controls);
this.gizmo = gizmo;
if (opts.gizmo){
const gizmo = new ViewportGizmo(this.camera, renderer, {
container:'.renderer-gizmo',
//type:'cube'
});
gizmo.attachControls(controls);
this.gizmo = gizmo;
}
this.orbitControls = controls;
//controls.enableZoom = true;
@@ -106,7 +110,7 @@ class GameEngine {
let delta = clock.getDelta();
mixer.update(delta);
gameEngine.render(scene, gameEngine.camera);
gizmo.render();
gameEngine.gizmo?.render();
}
renderer.setAnimationLoop(animate);
@@ -141,7 +145,96 @@ class GameEngine {
controls.rotateSpeed = 1 / gameEngine.camera.zoom;
gameEngine.camera.updateProjectionMatrix();
})
document.body.appendChild( ARButton.createButton( renderer, { } ) );
if (opts.ar){
renderer.xr.enabled = true;
document.body.appendChild( ARButton.createButton( renderer, { } ) );
}
if (opts.xr){
renderer.xr.enabled = true;
document.body.appendChild( XRButton.createButton( renderer, {
'optionalFeatures': [ 'depth-sensing' ]
} ) );
this.initXrControllers();
}
}
initXrControllers(){
let controller1 = this.renderer.xr.getController( 0 );
controller1.addEventListener( 'select', this.onSelect.bind(this) );
controller1.addEventListener( 'selectstart', this.onControllerEvent.bind(this) );
controller1.addEventListener( 'selectend', this.onControllerEvent.bind(this) );
controller1.addEventListener( 'move', this.onControllerEvent.bind(this) );
controller1.userData.active = false;
this.scene.add( controller1 );
let controller2 = this.renderer.xr.getController( 1 );
controller2.addEventListener( 'select', this.onSelect.bind(this) );
controller2.addEventListener( 'selectstart', this.onControllerEvent.bind(this) );
controller2.addEventListener( 'selectend', this.onControllerEvent.bind(this) );
controller2.addEventListener( 'move', this.onControllerEvent.bind(this) );
controller2.userData.active = true;
this.scene.add( controller2 );
const controllerModelFactory = new XRControllerModelFactory();
let controllerGrip1 = this.renderer.xr.getControllerGrip( 0 );
controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
this.scene.add( controllerGrip1 );
let controllerGrip2 = this.renderer.xr.getControllerGrip( 1 );
controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
this.scene.add( controllerGrip2 );
const geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
let line = new THREE.Line( geometry );
line.name = 'line';
line.scale.z = 5;
this.xrController1 = controller1
this.xrController2 = controller2
}
onControllerEvent(event) {
const controller = event.target;
if (controller.userData.active === false) return;
this.raycaster.setFromXRController(controller);
switch (event.type) {
case 'selectstart':
this.transformControls.pointerDown(null);
break;
case 'selectend':
this.transformControls.pointerUp(null);
break;
case 'move':
this.transformControls.pointerHover(null);
this.transformControls.pointerMove(null);
break;
}
}
onSelect(event) {
const controller = event.target;
this.xrController1.userData.active = false;
this.xrController2.userData.active = false;
if (controller === this.xrController1) {
this.xrController1.userData.active = true;
this.xrController1.add(line);
}
if (controller === this.xrController2) {
this.xrController2.userData.active = true;
this.xrController2.add(line);
}
this.raycaster.setFromXRController(controller);
const intersects = this.raycaster.intersectObjects(this.activeObjects.children);
if (intersects.length > 0) {
this.transformControls.attach(intersects[0].object);
}
}
$ = THREE;
@@ -259,7 +352,9 @@ class GameEngine {
this.camera = o;
this.transformControls.camera = o;
this.orbitControls.object = o;
this.gizmo.camera = o;
if (this.gizmo){
this.gizmo.camera = o;
}
}
setCameraPerspective() {
@@ -271,7 +366,9 @@ class GameEngine {
this.camera = o;
this.transformControls.camera = o;
this.orbitControls.object = o;
this.gizmo.camera = o;
if (this.gizmo){
this.gizmo.camera = o;
}
}
resize(w, h){
@@ -288,7 +385,7 @@ class GameEngine {
this.renderer.setViewport( 0, 0, this.w, this.h );
this.anaglyph.setSize( w, h );
this.stereo.setSize( w, h );
this.gizmo.update();
this.gizmo?.update();
}
render(scene, camera){