meta quest
This commit is contained in:
+109
-12
@@ -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){
|
||||
|
||||
Reference in New Issue
Block a user