Comments (12)
After checking https://github.com/mrdoob/three.js/blob/dev/examples/webxr_vr_rollercoaster.html, I was surprised that nothing extra needs to be done after the XR session starts and it just works. The VR camera can move with the parent exactly like the PerspectiveCamera...
After I turned every stone, finally I found all I need to do is
--- a/src/core/World.js
+++ b/src/core/World.js
@@ -1,5 +1,5 @@
import { EntityManager, Time, MeshGeometry, Vector3, CellSpacePartitioning } from 'yuka';
-import { WebGLRenderer, Scene, PerspectiveCamera, Color, AnimationMixer, Object3D, SkeletonHelper } from 'three';
+import { * } from 'three';
shenzhuxi@a0454a2#diff-be186b562ece83ee35ab7b4c4e3ccf11
from dive.
Did I miss anything specific settings in dive?
The current used version of three.js
is R110
. WebXR
was improved over the last releases so you might have to upgrade to the latest version.
Another small issue, skeletonHelpers can't be seen in VR. Maybe I should create an issue in three.js.
Yes. AFAIC, SkeletonHelper
was never tested in VR so far. If you do so, please ensure to share a simple test case that allows use to easily debug the issue. Dive is too complex for this.
Can you let me know what's the best practice to do it, please?
I've never implemented this before but I would start with a similar approach like the official three.js
example webxr_vr_rollercoaster. The idea is to add the camera to a dolly object (in the demo's case the train). In Dive, this would be the bot.
from dive.
The current used version of three.js is R110. WebXR was improved over the last releases so you might have to upgrade to the latest version.
Forget it, I've done it right now: 56217e5
from dive.
I used the latest three.js "three": "0.115.0" https://github.com/shenzhuxi/dive/blob/master/package.json. With the same version, I can control the depthNear/depthFar in
https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_ballshooter.html but not in https://github.com/shenzhuxi/dive/blob/master/src/core/World.js. When the XR session starts in
dive the camera settings seems just different from the default values and can't be updated.
from dive.
Dive applies the camera to the player's head when FPS mode is active:
Lines 596 to 600 in 56217e5
I assume that this bit does not work if WebXR is active at the same time. The VR camera should be controlled automatically by the event data of the user's headset (or in other words THREE.WebXRManager
) and not by the mouse movement.
from dive.
Thanks!
shenzhuxi@87eec64
I found out what's wrong. I should change the camera in this.renderer.render().
this.camera = this.renderer.xr.getCamera(this.camera);
Now updateRenderState() is working and skeletonHelpers also display correctly.
After following the bot for a while, I found sometimes two of them just end up keeping aiming each other and not shot (the player was not active). BTW, I updated dependencies "yuka": "0.3.6".
from dive.
After following the bot for a while, I found sometimes two of them just end up keeping aiming each other and not shot (the player was not active).
Depending on your game state, they were probably out-of-ammo^^.
from dive.
After I turned every stone, finally I found all I need to do is
--- a/src/core/World.js +++ b/src/core/World.js @@ -1,5 +1,5 @@ import { EntityManager, Time, MeshGeometry, Vector3, CellSpacePartitioning } from 'yuka'; -import { WebGLRenderer, Scene, PerspectiveCamera, Color, AnimationMixer, Object3D, SkeletonHelper } from 'three'; +import { * } from 'three';
I'm sorry... I didn't fix it. I broke rollup... :(
src/core/World.js (2:9)
1: import { EntityManager, Time, MeshGeometry, Vector3, CellSpacePartitioning } from 'yuka';
2: import { * } from 'three';
^
from dive.
import { * } from 'three';
This syntax is incorrect. You have to use named imports or:
import * as THREE from 'three';
from dive.
Thanks @Mugen87 ...
If I got it right this time, it's this.uiManager.update( delta ). As soon as it starts, xrCamera.far will become 10. Probably because uiManager also has this.camera in it and OrthographicCamera's far/near will pass to xrCamera.
from dive.
The entire logic of UIManager
is not valid for VR. The UI elements are in screen-space which can't be used when rendering to a headset.
I suggest you disable the usage of UIManager
when XR is active.
from dive.
I think this can be closed. Please use the forum if you have more WebXR/three.js related questions.
from dive.
Related Issues (3)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dive.