Rotating a camera around an object in Three.JS using device movement

Question

Rotating a camera around an object in Three.JS using device movement

I’ve posted a similar question in another forum, but I wanted to provide more clarity on the issue I'm facing.

What's my objective? I am currently using three.js within a WebView on my android device to create a scene that consists of a simple box (intended for use as a bounding box) and a camera. The camera needs to be interactive with the android device, allowing me to dynamically set its position by moving the device. These position vectors are generated by a SLAM algorithm called Direct Sparse Odometry, which calculates the camera's position. I can access these values through JavaScript using the provided WebViewInterface from Android. My goal is to move around the box without having to manually adjust the camera's orientation every time I change the values. The view should dynamically adjust based on the camera's position and rotation relative to the object, akin to an Augmented Reality application. Ultimately, I aim to overlay virtual objects onto real-world objects using three.js for later scanning with DSO by circling the box to detect feature points.

What is DSO? DSO is a library used to track the real environment by identifying points from camera frames captured by Android's Camera 2 API. It provides a 4x4 transformation matrix representing the current pose, which I attempt to apply to the camera's position in three.js. Despite various attempts, including scaling the values, I continue to encounter a problem where the box lacks a fixed absolute position and seems to move in the opposite direction each time it's placed.

What's the issue? Despite my efforts to resolve discrepancies by adjusting the DSO values, I have determined that the problem lies within the implementation of three.js itself. I've experimented with applying matrices to the scene/camera and making the box a child object, yet the box still fails to maintain an absolute position within the scene. Additionally, I've struggled to achieve realistic rotations of the object.

You'll find my code below, though please note that I've substituted dynamic dummy values for the actual DSO data:

<body>
<canvas id="mCanvas">
</canvas>
</body>
<script>
// Code snippet included here
</script>

Link to my Fiddle

Any suggestions or insights would be greatly appreciated. Thank you!

Best regards,

javascript android three.js augmented-reality

Answer 1

Answer №1

Just a heads up, I believe one issue lies in the box not being properly aligned with the camera rotation. To address this, I made adjustments to your fiddle by centering the box at the origin and utilizing spherical coordinates for moving the camera around. This approach maintains a consistent distance between the camera and the box, ensuring that the box remains centered during rotation without appearing to drift across the viewport.

<body>
<canvas id="mCanvas">
</canvas>
</body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// Various Initializations
    var renderer, scene, camera, box, transformControl, orbitControl, geometry, material, poseMatrix;
    var mPoints = [];
    //Box coordinate
    var xBCordinate, yBCordinate, zBCordinate, isScaled, posVec, startPosVec, lookPos, helper;
    var process = false;
    var scanActive = false;
    var pointArr = [];
    
    var cameraSpherical;
    
     init();
    animate();

  function init() {

        // Setting up the renderer
       renderer = new THREE.WebGLRenderer({canvas: document.getElementById("mCanvas"),
            alpha: true});
       renderer.setSize( window.innerWidth, window.innerHeight );
       document.body.appendChild( renderer.domElement );
        renderer.setClearColor(0xffffff, 0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Creating the scene
        scene = new THREE.Scene();

        // Initializing the camera
        camera = new THREE.PerspectiveCamera(
            45,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );

        camera.up.set(0, 0, 1); // Defining coordinate system
        
        // Setting initial camera position 
        camera.position.x = 0;
        camera.position.y = -0.5;
        camera.position.z = 0.15;  
        
        scene.add(camera);
        
        cameraSpherical = new THREE.Spherical( camera.position );
        
        // Setting camera's target position 
        camera.lookAt(0,2.5,-0.2);
        
        // Applying values
        camera.updateMatrix();

        // Adding light source
        var light = new THREE.HemisphereLight( 0xeeeeee, 0x888888, 1 );
        light.position.set( 0, -0.75, 2.5 );
        scene.add(light);


        placeBox();


    }
    function placeBox()
    {
        

        geometry = new THREE.BoxGeometry(0.5, 1, 0.5); //3,5,3
        material = new THREE.MeshLambertMaterial({color: 0xfece46});
        
        box = new THREE.Mesh(geometry, material);
        
        box.position.set(0, 0, 0);
        box.updateMatrix();
        scene.add(box);

    }
    function animate() {
        requestAnimationFrame(animate);
        if(process == false){
        setCurrentPose();
        }

        renderer.render(scene, camera);
    }
    
    function setCurrentPose(){
        process = true;
        
        // Receiving position data from Android here
        // For now, using random numbers within specified range (0.01 - 0.99)
        
        moveRotateCamera();
    }
      function moveRotateCamera(){
       
        cameraSpherical.radius = 5;
        cameraSpherical.phi += getRandomFloat(0.001, 0.015);
        cameraSpherical.theta += getRandomFloat(0.001, 0.015);
        let xyz = new THREE.Vector3().setFromSpherical( cameraSpherical );
        camera.position.x = xyz.x;
        camera.position.y = xyz.y;
        camera.position.z = xyz.z;
        
        camera.lookAt(0,0,0);
        
        camera.updateMatrix();
        
        process = false;
    }
    function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
}   

// Your code for quaternion rotation calculations

I'm not certain if this aligns with your current objectives, but hopefully it brings some clarity.

Answer 2

Just a heads up, I believe one issue lies in the box not being properly aligned with the camera rotation. To address this, I made adjustments to your fiddle by centering the box at the origin and utilizing spherical coordinates for moving the camera around. This approach maintains a consistent distance between the camera and the box, ensuring that the box remains centered during rotation without appearing to drift across the viewport.

<body>
<canvas id="mCanvas">
</canvas>
</body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// Various Initializations
    var renderer, scene, camera, box, transformControl, orbitControl, geometry, material, poseMatrix;
    var mPoints = [];
    //Box coordinate
    var xBCordinate, yBCordinate, zBCordinate, isScaled, posVec, startPosVec, lookPos, helper;
    var process = false;
    var scanActive = false;
    var pointArr = [];
    
    var cameraSpherical;
    
     init();
    animate();

  function init() {

        // Setting up the renderer
       renderer = new THREE.WebGLRenderer({canvas: document.getElementById("mCanvas"),
            alpha: true});
       renderer.setSize( window.innerWidth, window.innerHeight );
       document.body.appendChild( renderer.domElement );
        renderer.setClearColor(0xffffff, 0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Creating the scene
        scene = new THREE.Scene();

        // Initializing the camera
        camera = new THREE.PerspectiveCamera(
            45,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );

        camera.up.set(0, 0, 1); // Defining coordinate system
        
        // Setting initial camera position 
        camera.position.x = 0;
        camera.position.y = -0.5;
        camera.position.z = 0.15;  
        
        scene.add(camera);
        
        cameraSpherical = new THREE.Spherical( camera.position );
        
        // Setting camera's target position 
        camera.lookAt(0,2.5,-0.2);
        
        // Applying values
        camera.updateMatrix();

        // Adding light source
        var light = new THREE.HemisphereLight( 0xeeeeee, 0x888888, 1 );
        light.position.set( 0, -0.75, 2.5 );
        scene.add(light);


        placeBox();


    }
    function placeBox()
    {
        

        geometry = new THREE.BoxGeometry(0.5, 1, 0.5); //3,5,3
        material = new THREE.MeshLambertMaterial({color: 0xfece46});
        
        box = new THREE.Mesh(geometry, material);
        
        box.position.set(0, 0, 0);
        box.updateMatrix();
        scene.add(box);

    }
    function animate() {
        requestAnimationFrame(animate);
        if(process == false){
        setCurrentPose();
        }

        renderer.render(scene, camera);
    }
    
    function setCurrentPose(){
        process = true;
        
        // Receiving position data from Android here
        // For now, using random numbers within specified range (0.01 - 0.99)
        
        moveRotateCamera();
    }
      function moveRotateCamera(){
       
        cameraSpherical.radius = 5;
        cameraSpherical.phi += getRandomFloat(0.001, 0.015);
        cameraSpherical.theta += getRandomFloat(0.001, 0.015);
        let xyz = new THREE.Vector3().setFromSpherical( cameraSpherical );
        camera.position.x = xyz.x;
        camera.position.y = xyz.y;
        camera.position.z = xyz.z;
        
        camera.lookAt(0,0,0);
        
        camera.updateMatrix();
        
        process = false;
    }
    function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
}   

// Your code for quaternion rotation calculations

I'm not certain if this aligns with your current objectives, but hopefully it brings some clarity.

Answer 3

Answer №2

It seems like we might be experiencing a similar issue. I configured the position and rotation of the perspective camera using data from camera.json without setting lookAt, and noticed that the camera is pointing off-screen. It should actually be facing towards my model on the screen, with the correct position. Click here to view an image related to this issue

Answer 4

It seems like we might be experiencing a similar issue. I configured the position and rotation of the perspective camera using data from camera.json without setting lookAt, and noticed that the camera is pointing off-screen. It should actually be facing towards my model on the screen, with the correct position. Click here to view an image related to this issue

Rotating a camera around an object in Three.JS using device movement

Answer №1

Answer №2

Similar questions

Calculator glitch determines how much you need to pass the course

The expected rendering of column headers was not achieved following the refactoring of <Column />

Error in React UseTable: Attempting to read properties of an undefined object (specifically trying to use a forEach loop)

Having trouble parsing JSON with Ajax in Pusher using PHP?

Issues with d3.js transition removal functionality not functioning as expected

Adjust the styling of selected elements when their values are changed

Guide on showcasing subscribers in a list through api (MailChimp) with the help of AsyncTask

The invalid `autoComplete` prop with a type of `boolean` was passed to `ForwardRef(InputBase)` instead of the expected `string`

Building Your Initial HTTP Server using Node.js

An innovative method for extracting data from websites on the Android platform

Upon loading, the IntersectionObserver immediately declares the isIntersecting property true for all elements

Has anybody managed to successfully implement this require or debug NPM module for use in a web browser?

Signing off from GitHub Packages for npm

What is the best way to establish a conditional statement that ensures ajax fetches the correct XML document?

Issues encountered with Angular POST requests

What methods can I use to evaluate the efficiency of my website?

What techniques can I use to generate code dynamically for transferring an object to a different Node process?

Tips for switching out images depending on the time of day

What is the best way to reinitialize a particular input field by using either the entered value or the total sum from buttons?

What is preventing my JavaScript variable from being defined outside of this function?