[SOLVED] How to update matrices manually?

matrices
transform-matrix
world-transform

#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]