Comments (4)
hi! one solution to changing reference point of the camera that I can think of is attaching camera to some group and then setting position of that group to desired initial position. something like this:
const {camera} = useThree()
<group position={[1,2,3]}>
<primitive object={camera} />
</group>
you can check out working example here https://codesandbox.io/s/react-xr-simple-ar-demo-forked-5iff9?file=/src/App.tsx
from react-xr.
Hi! Sorry for the late response. Positioning the camera in a group worked and move to the location on AR load!
Thank you!
from react-xr.
I'm presently writing something to move the camera and all stuff in VR or not. It a React component and as far I am in this project this is my code ... somewhere in this code, I move the camera ;)
In non vr (or anytime you have access to keyboard, use asdw to move qe to turn and rf to fly.
In vr (on a quest) use left thumb to move and right thump to turn.
Hope it will help you, Soon I will release it on github or ask for a pull here.
`
import React , { useRef,useEffect,useState} from 'react'
import { useThree, useFrame } from 'react-three-fiber'
import { useXR ,useXREvent, useController } from 'react-xr'
import * as THREE from 'three';
import { Box } from 'drei'
export default function Locomotion({position, angle})
{
const meshbody = useRef()
var speedposition = 0.05;
var speedrotation = Math.PI/180;
var WalkInViewDirection = false;
var displayboxgloves = false;
var ghostmode = false;
const { gl, camera } = useThree()
useEffect(() => {
const cam = camera; //gl.xr.isPresenting ? gl.xr.getCamera(camera) : camera;
meshbody.current.position.set(position[0],position[1],position[2]);
meshbody.current.rotation.y = -angle;
if (gl.xr.isPresenting) {
// position[2] -= gl.xr.getCamera().position.y;
}
else {
cam.position.set(0,0,0);
}
if (!ghostmode) {
meshbody.current.add(cam);
}
//return () => meshbody.current.remove(cam)
}, [gl.xr.isPresenting, gl.xr, camera, meshbody,angle,position])
const { controllers } = useXR()
useEffect(() => {
if (controllers) {
if (controllers.length > 0) controllers.forEach((c) => {
meshbody.current.add(c.controller)
meshbody.current.add(c.grip)
});
}
//return () => {if (controllers) controllers.forEach((c) => meshbody.current.remove(c.grip)
}, [controllers, meshbody])
function UpdatePosition(body,speedforward,speedlateral,speedheight)
{
var lookat = 0;
if (WalkInViewDirection && gl.xr.isPresenting) { // Find HMD loogink direction (from body point of view)
var lookAtVector = new THREE.Vector3(0,0, -1);
lookAtVector.applyQuaternion(gl.xr.getCamera(camera).quaternion);
lookAtVector.y = 0;
var HMDlook = lookAtVector.angleTo(new THREE.Vector3(0,0, -1)) * (lookAtVector.x >0 ? 1:-1);
lookat = HMDlook + body.rotation.y;
}
var speedforward2 = Math.cos(lookat) * speedforward + Math.sin(lookat) * speedlateral;
var speedlateral2 = -Math.sin(lookat) * speedforward + Math.cos(lookat) * speedlateral;
body.translateZ (speedforward2);
body.translateX (speedlateral2);
body.translateY (speedheight);
}
function UpdateRotation(body,rotation)
{
body.rotation.y += rotation;
}
const leftController = useController('left');
const rightController = useController('right');
const leftmesh = useRef()
const rightmesh = useRef()
var keysmove = {
speedforward :0,
speedlateral :0,
speedheight:0,
rotation:0
};
useFrame(() => {
if (leftController) {
if (displayboxgloves) {
const tempMatrix = new THREE.Matrix4();
tempMatrix.identity().extractRotation(leftController.grip.matrixWorld);
leftmesh.current.position.setFromMatrixPosition(leftController.grip.matrixWorld)
leftmesh.current.visible=true;
}
UpdatePosition(meshbody.current,
leftController.inputSource.gamepad.axes[3]/10,
leftController.inputSource.gamepad.axes[2]/10,
0
);
} else {
leftmesh.current.visible=false;
}
if (rightController) {
if (displayboxgloves) {
const tempMatrix = new THREE.Matrix4();
tempMatrix.identity().extractRotation(rightController.controller.matrixWorld);
rightmesh.current.position.setFromMatrixPosition(rightController.controller.matrixWorld);
rightmesh.current.visible=true;
}
UpdateRotation(meshbody.current,-rightController.inputSource.gamepad.axes[2]/20);
} else {
rightmesh.current.visible=false;
}
UpdatePosition(meshbody.current,keysmove.speedforward,keysmove.speedlateral,keysmove.speedheight);
UpdateRotation(meshbody.current,keysmove.rotation);
})
document.onkeyup = (e)=>{
if (e.key === "ArrowUp" || e.key === "w") {
keysmove.speedforward = 0;
}
else if (e.key === "ArrowDown" || e.key === "s") {
keysmove.speedforward = 0;
}
else if (e.key === "ArrowLeft" || e.key === "a") {
keysmove.speedlateral = 0;
}
else if (e.key === "ArrowRight" || e.key === "d") {
keysmove.speedlateral = 0;
}
else if (e.key === "r") {
keysmove.speedheight = 0;
}
else if (e.key === "f") {
keysmove.speedheight = 0;
}
else if (e.key === 'q') {
keysmove.rotation = 0;
}
else if (e.key === 'e') {
keysmove.rotation = 0;
}
}
document.onkeydown = (e)=>{
if (e.key === "ArrowUp" || e.key === "w") {
keysmove.speedforward = -speedposition;
}
else if (e.key === "ArrowDown" || e.key === "s") {
keysmove.speedforward = +speedposition;
}
else if (e.key === "ArrowLeft" || e.key === "a") {
keysmove.speedlateral = -speedposition;
}
else if (e.key === "ArrowRight" || e.key === "d") {
keysmove.speedlateral = +speedposition;
}
else if (e.key === "r") {
keysmove.speedheight = speedposition;
}
else if (e.key === "f") {
keysmove.speedheight = -speedposition;
}
else if (e.key === 'q') {
keysmove.rotation = speedrotation;
}
else if (e.key === 'e') {
keysmove.rotation = -speedrotation;
}
}
return (
<>
<Box scale={[0.01,0.01,0.01]} ref={leftmesh}><meshBasicMaterial attach="material" wireframe={true}/></Box>
<Box scale={[0.01,0.01,0.01]} ref={rightmesh}><meshBasicMaterial attach="material" wireframe={true}/></Box>
<Box scale={[0.01,0.01,0.01]} ref={meshbody}><meshBasicMaterial attach="material" wireframe={true} visible={false}/></Box>
</>
);
}
`
from react-xr.
This technique works great for moving the camera, thanks!
Is there any way to bring the controllers to that location as well using this technique?
EDIT: Managed to do it like this:
const { isPresenting, player } = useXR()
useEffect(() => {
if (isPresenting) {
player.position.x = 60
player.position.y = 60
player.position.z = 60
}
}, [isPresenting])
return (
// ...
<DefaultXRControllers />
// ...
)
from react-xr.
Related Issues (20)
- [Question] useHitTest for fixed-axis grabbing.
- Example - avatar poser HOT 1
- ./node_modules/@react-three/xr/dist/Controllers.mjs Can't import the named export 'BufferGeometry' from non EcmaScript module (only default export is available) HOT 3
- XRButton styling HOT 4
- Eye Control
- Encountered two children with the same key when load controllers with <XR/> in Next.js
- Hand tracking resets hand position if tracking lost causing weird visual effects HOT 2
- `<RayGrab />` with blocked axis?
- Improve UX by showing a hint if useHitTest returns negative
- Attempting to add <XR> to an open source proj, but unclear how to debug HOT 1
- Click ARButton on Android and the camera don´t show up. HOT 7
- Player example is broken
- XR Controllers disappear when using conditional rendering HOT 7
- Hand-tracking hardware? HOT 3
- Using `Enter AR` Button Causes Renderering Issues With Markers Resulting In Offset Positions, And AR Markers Move When Headset/Camera Changes Position
- Enabling hands disables rays HOT 2
- Give a better message when not on HTTPS HOT 1
- iOS support? HOT 3
- Set the viewer (camera) startposition in AR/VR HOT 3
- How does the camera get updated when head is moving (HMD motion tracking) HOT 2
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 react-xr.