[SOLVED] How to update matrices manually?

Questions
, ,
1

ANSWER:

TLDR, I am able to update local matrices easily by just

// create object
const object = new THREE.Object3D
object.matrixAutoUpdate = false // tell Three not to update the matrix based on position, rotation, etc.

// then in the render loop
function render() {

  // manually set the matrix
  object.matrix.set(...)

}

and that’s all, it should work when the calls scene.updateMatrixWorld().

ORIGINAL POST:

I’m manually calculating local and world matrices for each Object3D, but I’m not sure how to make it update.

I tried

            const object3d = new Object3D
            object3d.matrixAutoUpdate = false
            // ...

            object3d.matrix.set( ...arrayOfValues )
            object3d.matrixWorldNeedsUpdate = true
            
            // ...
            renderer.render(scene, camera)

but nothing happens, as if everything is rendered with an identity matrix.

I also tried

            object3d.matrixWorld.set( ...arrayOfWorldValues )

but I realized that doesn’t work because the world matrices are overriden when scene.updateMatrixWorld() is called in the renderer.

I thought that the scene.updateMatrixWorld() call would update all the world matrices after I’ve set the local ones.

What am I missing?

Ideally, I don’t want to set local matrices, I want to set world matrices directly (I already have those calculated myself outside of Three.js), but they get overriden.

2

You could also overwrite the updateMatrixWorld function of Object3D, like declaring a new class of Object3D but with your own updateMatrixWorld method.

3

That’s true, but what’s the prescribed way of doing it?

I’m fine for now with setting local matrices and having Three.js waste time updating the world matrices, but I can’t even get that to work.

Ideally, I’d supply the world matrices since I’m already making those my self externally, but I’d still like to know why I can’t get the local-matrix version working.

I made a fiddle, and it seems to work there: http://jsfiddle.net/ft08jqyv/1/

My actual code is more complicated, maybe I’m doing something wrong

4

This fiddle shows that I only need matrixAutoUpdate to be false, then using object.matrix.set(...) always works: http://jsfiddle.net/ft08jqyv/2, so I must be doing something wrong in mine. I want to post it, but I fear it’s much too complicated to post (this logic spans across multiple classes in multiple files).

5

What’s strage about my case is that each frame I can console.log(object.matrix.elements) and I see that those are changing each frame, just that the visuals aren’t updating. Hmmmm.

6

Ah, yep, it was my mistake, I had some attributes commented out like so when using my Custom Elements:

<i-mesh
  //size="400 400 400"
>
</i-mesh>

but the HTML engine ignores the // so it was setting my mesh to be huge, and therefore outside of the viewing area, so I thought nothing was happening.

TLDR, I am able to update local matrices easily by just

// create object
const object = new THREE.Object3D
object.matrixAutoUpdate = false

// then in the render loop
function render() {
  object.matrix.set(...)
}

and that’s all, it should work when the calls scene.updateMatrixWorld().

[SOLVED]

7

This is no usable way, or incomplete. I need to set position also!!

    stars.matrixAutoUpdate = false;
    stars.matrix.set(...)
    //or
    stars.matrixAutoUpdate = true;
    stars.position.set(campos[0],campos[1],campos[2]);
    //cannot do both


            


            

              
              
              
            


          

          

            

              



              
                  
                  
              8
              
            

            

              
I wish it were solved. let me just show why: see all planet ups and satellites can be corrected and finished.

http://innerbeing.epizy.com/cwebgl/WebGLEarth.html


set matrix and move. lines 102 thru 132 are failed attempts, but holding some less accurate middle-ground. earth3.js

            


            

              
              
              
            


          

          

            

              



              
                  
                  
              9
              
            

            

              
```
    var rotationMatrix = new THREE.Matrix4(m);
    var translation = new THREE.Matrix4().makeTranslation(x,y,z);
    stars.applyMatrix(rotationMatrix.multiply(translation));
```

now solved