Giter Club home page Giter Club logo

Comments (4)

sniok avatar sniok commented on May 21, 2024 3

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.

alexlee22 avatar alexlee22 commented on May 21, 2024 1

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.

checksummaster avatar checksummaster commented on May 21, 2024

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.

verekia avatar verekia commented on May 21, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.