unexpected resizing and changing possition of fbx object

[enable3d]

unexpected resizing and changing possition of fbx object

[yandeu]

I do not know what causes this. But I guess phaser and enable3d are out of sync in some way.

Can you please upload a simple demo scene or can you give me private access to your repo? I guess I will be able to track down the issue if I see the code.

[Trusiak]

I made the same mistake using your example, and your template:
https://github.com/Trusiak/enable3d-test

or this class, if you don't want to clone whole repo: https://addpaste.com/c70cbc1679b9c3ffc5f97139f7477398

remember, that i did not use any scaling mode of canvas element (only const dimensions).
and here again the screenshoots for you:
https://imgur.com/a/q0LuvOV

[yandeu]

I see. You actually have to keep these lines,

// adjust width and height
this.third.renderer.setSize(1280, 720)
// @ts-ignore
this.third.camera.aspect = 1280 / 720
this.third.camera.updateProjectionMatrix()

when you set a fixed width and height to the Phaser.Game config.

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.WEBGL,
  backgroundColor: '#ffffff',
  scale: {
    width: 1280,
    height: 720
  },
  scene: [PreloadScene, MainScene],
  ...Canvas()
}

This way three.js and phaser.js have the same rendering size.

[Trusiak]

Thank you for your answer.
I have a few more questions because you are in the process of writing the documentation. :)

1. How can I give texture to the custom ground?
   I know I can refer to it with scene.third.ground - but unfortunately I can't load the texture into it.

2. How can I enable shadows on new ground? Using this example: https://enable3d.io/examples/load-and-use-textures.html unfortunately, I'm not able to get shadows and I can't find anywhere to turn them on.

3. Is there / will there be a possibility to attach the 3d model with FBX extension to the dice, other models? I mean, situations where I have a 3d warrior and wants to attach a sword under his hand bone.
   Three.js doesn't offer this solution with FBX (or I haven't found it).

Forgive me if I asked trivial questions - but I really looked for a good hour and found nothing. :)

[yandeu]

1. Do not initialize the default ground this.third.warpSpeed('-ground') and add your own ground this.third.ground = this.third.physics.add.ground({ }, { phong: { map: TEXTURE } })

2. There is a small bug. But I have updated the example.

3. In three.js you can add child objects. If you have a arm or hand mesh/bone, you can simply do hand.add(weapon). Take a look at the updated fbx-loader-and-animations example.

[Trusiak]

Ok, but the next problem is, when i try to load another FBX object as child of player, the object (weapon) spawn in cooridates 0,0,0. This problem doesn't exist on "add.box" method (everything is fine like in your example).
Should I give some position to the attached object so that it can appear in the bone or change
this scene.third.add.existing(this); line?

My code:

//this piece of code were from the player class

this.traverse(child => {
                if (child.name === 'Bip01_Spine') {
                  child.add(new Weapon(scene))
                }
              })

//this is a weapon class

export class Weapon extends ExtendedObject3D { 
    constructor(scene){
        super()
         scene.third.load.fbx('/assets/sword_anim.fbx', object => {
            this.add(object)
            this.traverse(child => {
                if (child.isMesh) child.castShadow = child.receiveShadow = true
              }) 
             this.scale.set(0.005, 0.005, 0.005)
             scene.third.add.existing(this);
        }) 
    }
}

PS.
you should also make the paypall available as a form of grant for you :P

[yandeu]

I do not know. Sometimes it can get tricky.

Yes, try to add position and rotation. Maybe you have to multiply the coordinates with your scale?

// get position and rotation
this.traverse(child => {
  if (child.name === 'Bip01_Spine') {
    const { position, rotation } = child
    child.add(new Weapon(scene, position, rotation))
  }
})

You could also always ask in the three.js forum, since this is a very three.js specific question.

---

I do already have patreon :)