Hello, I am using phaser extension,

When I add mesh rigidbody with .gltf file rendered at blender, The rigidbody become weird.

this.third.load.gltf('models/body.gltf').then( (gltf) => { this.third.scene.add(gltf.scene); this.third.physics.add.existing(gltf.scene, {shape:'mesh'}));

hello, i'm using Phaser Extension

the problem is that the phaser.JS processes the cache differently than three.JS - mean loading assets.
F.E:

When using the load method, the phaser will first check in the cache memory if the object exists. If so, it will not execute the request to the server for the file again.
The opposite is true for THREE.js, because trying to load an object results in the request being executed anyway, wasting the time and resources.

Is it possible to unify it somehow to make THREE load also work this way? or should I just use external libraries and do it on my own?

Hi @yandeu ! So i would like to beta test an RGBA splatmapped terrain. http://wiki.polycount.com/wiki/Splat this is an RGBA splatmap. and terrain slope physics is where the character slowly slides down to a stop when trying to climb very steep parts of the terrain.

Once again, please give yourself a huge pat on the back for doing this amazing work!

Hello, im using phaser3-extension

I rewrote a lot of code for the new version of the library using examples (as you mentioned), but I can't handle the light (and I didn't find an example either).

it has worked so far:

this.light_test = this.third.add.pointLight({
           color: 0xF77C3F,
           intensity: 5.5
       }); 
this.light_test.position.set(...pos)

what should i change now?

PS. you should add some examples about light into your collection ^^

https://i.imgur.com/A6EBtX2.png

Pictured here is a character model and two boxes with the camera sitting at y=0 in a room made of plane geometries. While the boxes sit flush with eachother, neither the boxes nor the character sit flush on the ground.

Below are the settings each for the floor, box and character.

Floor
this.physics.add.existing(this.floor, {shape:'plane', collisionFlags:1, mass:0})

Box
this.physics.add.existing(this.box, {shape:'box', collisionFlags:0, mass:1})

Character

this.collider = this.physics.add.existing(this.group, {
   shape: 'box',
   width: 0.6,
   depth: 0.4,
   height: this.modelHeight,
   offset: { x : 0, y: -this.modelHeight / 2, z:0},
   autoCenter: false,
   mass: 1
})
this.group.body.setCollisionFlags(0);
this.group.body.setFriction(0.8)
this.group.body.setBounciness(0)
this.group.body.setAngularFactor(0, 0, 0)
this.group.body.setLinearFactor(1, 1, 1)

env: ThreeJS with Vue2 in JavaScript,
I installed "@enable3d/ammo-physics": "^0.19.1", but when I initialize AmmoPhyisics as the example shows, it gave me this error.
My code of this initialization:

this.$nextTick(() => { init3D(this.htmlContext) })

export function init3D(htmlContext) { hc = htmlContext initRenderer() initScene() initCamera() initPhysics() animate() }

function initPhysics() { const physics = new AmmoPhysics(c.scene, {usePhysics: false, useGravity: false}) physics.debug.enable() c.physics = physics }

Hi, this project looks very interesting for me, I'm experienced Phaser 3 developer, and I've some questions about this project, and I think many people would be interested, so everybody can ask questions here. Of course if you'll have a time to answer them.
So let's start.

1. I haven't read your code, but need to ask, what was the reason to attach this project to Phaser 3. In other words, I want to understand how Phaser 3 helps you in rendering.
2. I've saw just one example and there you've created MainScene from Scene3D. Does Scene3D extends from Phaser.Scene and is this logic true for other 3D game objects ?
3. I'm understanding that it's a mix of Phaser 3 (2D framework) and Three JS (3D framework), but why it's better than main Three JS. What makes need of creating this kind project.

P.S. I'm just trying to understand how and when I can use this tool.
P.S.S. I think answers of these questions can be very interesting for everyone. I'm using TypeScript as main development language, so maybe I can help you later with this project, but I want to be sure, that it costs for that, of course if you need for help.)

Thank you for your work.

Adding water to my scene

      waterTextures = await Promise.all([
        this.third.load.texture('/dev_assets/Water_1_M_Normal.jpg'),
        this.third.load.texture('/dev_assets/Water_2_M_Normal.jpg')
        ])

      water = this.third.misc.water({
        y: 1,

        normalMap0: waterTextures[0],
        normalMap1: waterTextures[1]
      })

Causes all other game objects (sprites, texts) the become a rendertarget forr the entire sceene...

This may be related to rendering optimizations made in phaser 3.25-beta

I am a phaser developer and your work is very helpful to me.
I am from a non-English speaking country.
so..................sry.

Hi,

I am trying to make wheel on track but its not working. Can you please check my following code on your end and provide me with a solution?

`

    var scene;
    var camera;
    var renderer;
    var clock;
    var cloud;
    var physics;
    const { AmmoPhysics, PhysicsLoader } = ENABLE3D
    function initScene() {
        scene = new THREE.Scene();
        clock = new THREE.Clock();
        var scene_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var scene_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        camera = new THREE.PerspectiveCamera(50, scene_width / scene_height, 0.1, 30000);
        scene.add(new THREE.AmbientLight(0xffffff))
        camera.position.set(50, 10,0);
        renderer = new THREE.WebGLRenderer({ antialias: true });
        const DPR = window.devicePixelRatio
        renderer.setPixelRatio(Math.min(2, DPR))
        renderer.setSize(scene_width, scene_height);
        document.body.appendChild(renderer.domElement);
        control = new THREE.OrbitControls(camera, renderer.domElement);
        var clock = new THREE.Clock();
        function animate() {
            requestAnimationFrame(animate);
            control.update();
            if(physics)
            {
                physics.update(clock.getDelta() * 1000)
                physics.updateDebugger()
            }
            renderer.clear();
            renderer.render(scene, camera);
        }
        requestAnimationFrame(animate);
    }
    function initPhysics(){
        physics = new AmmoPhysics(scene,{ gravity: { x:0,y:-10,z:0 }, maxSubSteps: 1, fixedTimeStep: 1 / 60 });
        physics.debug.enable();
    }
    function addBox()
    {
        var geometry = new THREE.BoxGeometry(4,4,4);
        var material = new THREE.MeshStandardMaterial({ color:0xff0000 });
        var box = new THREE.Mesh(geometry, material);
        scene.add(box);
        box.position.y = 2;
    }
    function addPlane()
    {
        var geometry = new THREE.PlaneGeometry(100,100);
        var material = new THREE.MeshStandardMaterial({ color:0x00ff00 });
        var plane = new THREE.Mesh(geometry, material);
        scene.add(plane);
        plane.rotation.x=-Math.PI/2;
        physics.add.existing(plane,{ mass: 2000, collisionFlags:1 });
    }
    function addWheel(){
        var wheel = new THREE.Group();
        var leftwheelgeometry = new THREE.CylinderGeometry(4, 4, 2, 64);
        var leftwheelmaterial = new THREE.MeshStandardMaterial({ color:0x00ffff });
        var leftwheel = new THREE.Mesh(leftwheelgeometry, leftwheelmaterial);
        var leftwheelrimgeometry = new THREE.CylinderGeometry(5, 5, .3, 64);
        var leftwheelrimmaterial = new THREE.MeshStandardMaterial({ color:0x0ff0ff });
        var leftwheelrim = new THREE.Mesh(leftwheelrimgeometry, leftwheelrimmaterial);
        leftwheelrim.position.y=-9;
        wheel.add(leftwheelrim);
        leftwheel.position.y= 10;
        wheel.add(leftwheel);
        var rightwheelgeometry = new THREE.CylinderGeometry(4, 4, 2, 64);
        var rightwheelmaterial = new THREE.MeshStandardMaterial({ color:0x00ffff });
        var rightwheel = new THREE.Mesh(rightwheelgeometry, rightwheelmaterial);
        var rightwheelrimgeometry = new THREE.CylinderGeometry(5, 5, .3, 64);
        var rightwheelrimmaterial = new THREE.MeshStandardMaterial({ color:0x0ff0ff });
        var rightwheelrim = new THREE.Mesh(rightwheelrimgeometry, rightwheelrimmaterial);
        rightwheelrim.position.y=9;
        wheel.add(rightwheelrim);
        rightwheel.position.y= -10;
        wheel.add(rightwheel);
        var axelgeometry = new THREE.CylinderGeometry(1, 1, 20, 64);
        var axelmaterial = new THREE.MeshStandardMaterial({ color:0x0ff0ff });
        var axel = new THREE.Mesh(axelgeometry, axelmaterial);
        wheel.add(axel);
        wheel.rotation.x = Math.PI/2;
        wheel.position.y = 7;
        scene.add(wheel);
        const compound = [
            { shape: 'cylinder', radiusTop: 4, radiusBottom: 4, height:2, z: 0, y: 10, z:0 },
            { shape: 'cylinder', radiusTop: 4, radiusBottom: 4, height:2, z: 0, y: -10, z:0 },
            { shape: 'cylinder', radiusTop: 5, radiusBottom: 5, height:.3, z: 0, y: 9, z:0 },
            { shape: 'cylinder', radiusTop: 5, radiusBottom: 5, height:.3, z: 0, y: -9, z:0 },
            { shape: 'cylinder', radiusTop: 1, radiusBottom: 1, height:20, z: 0, y: 0, z:0 },
        ]
        physics.add.existing( wheel, { compound },{ mass: 2, collisionFlags:0 });
        wheel.body.setCcdMotionThreshold(1e-7)
        wheel.body.setCcdSweptSphereRadius(0.25)
    }
    function addTrack()
    {
        var lefttrackgeometry = new THREE.BoxGeometry(100,2,2);
        var lefttrackmaterial = new THREE.MeshStandardMaterial({ color:0x0000ff });
        var lefttrack = new THREE.Mesh(lefttrackgeometry, lefttrackmaterial);
        //scene.add(lefttrack);
        lefttrack.position.y = 1;
        lefttrack.position.z=-10.5;
        var righttrackgeometry = new THREE.BoxGeometry(100,2,2);
        var righttrackmaterial = new THREE.MeshStandardMaterial({ color:0x0000ff });
        var righttrack = new THREE.Mesh(righttrackgeometry, righttrackmaterial);
        //scene.add(righttrack);
        righttrack.position.y = 1;
        righttrack.position.z=10.5;
        var track = new THREE.Group();
        track.add(lefttrack);
        track.add(righttrack);
        scene.add(track);
        const compound = [
            { shape: 'box', width: 100, height: 2, depth:2, z: 0, y: 1, z:-10.5 },
            { shape: 'box', width: 100, height: 2, depth:2, z: 0, y: 1, z:10.5 }
        ]
        physics.add.existing(track,{ mass: 200, collisionFlags:1 });
        track.body.setCcdMotionThreshold(1e-7)
        track.body.setCcdSweptSphereRadius(0.25)
    }
    window.onresize = function () {
        var scene_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var scene_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        camera.aspect = scene_width / scene_height;
        camera.updateProjectionMatrix();
        renderer.setSize(scene_width, scene_height);
        const DPR = window.devicePixelRatio
        renderer.setPixelRatio(Math.min(2, DPR))
    }
    PhysicsLoader('/js',()=>{
        initScene();
        initPhysics();
        addPlane();
        addWheel();
        addTrack();
    });`

Affected are these examples:

• https://enable3d.io/examples/enemy-patrols-on-platform.html
• https://enable3d.io/examples/switch-camera-between-2d-and-3d.html
• https://enable3d.io/examples/first-phaser-game-3d-version.html

ver. 0.18.0-alpha.0

How to update physics body size after scaling? Works fine only with three meshes.

• gltf model
  from examples

  const suzanne = gltf.scene.children[0]
  suzanne.scale.set(0.5, 0.5, 0.5)

result:

• Enalbe3d mesh:

let torus = physics.add.torus({
    x: 7,
    y: 5,
    shape: 'hacd',
    mass: 0
},{
    basic: {color: 0xff0000, transparent: true, opacity: 0.5}
})
torus.scale.set(3, 3, 3)

result

• THREE Mesh:

var torus = new THREE.Mesh(geo, mat);
torus.scale.set(3, 3, 3)
scene.add(torus);
physics.add.existing(torus, {
    shape: 'hacd',
    mass: 0
});

result

As a performance improvement, it would be great to have support for OffscreenCanvas (where supported).

See example here: https://threejs.org/examples/webgl_worker_offscreencanvas.html

Hello, im using phaser3 extension.

Since you introduced the model cache, there have been problems with displaying objects, that is:

I can't use the same 3d model more than once.
If I create a new object that reads the same model to other object, it will not be displayed.

If I have a character which I attach a sword and armor, if this sword has already been used by another object (player), it will not be displayed on the next one.

Hi good day.
I have recently tried to add collisions to maps that I feel in Blender3D but the result is the following:
VIdeo

As you can see only the floor has a collision and the walls do not.

this is the code that i use:

  this.third.load.gltf('/assets/glb/simplemap.glb').then(object => {
            const scene = object.scenes[0]

            const map = new ExtendedObject3D()
            map.name = 'scene'
            map.add(scene)
            this.third.add.existing(map)

            map.traverse(child => {
              if (child.isMesh) {
                //child.castShadow = child.receiveShadow = false
                //child.material.metalness = 0
                //child.material.roughness = 1

                if (child.name) {
                  //child.position.set(-18.8, 4.35, -15.55)
                  this.third.physics.add.existing(child, {
                    shape: 'concave',
                    mass: 0,
                    collisionFlags: 1,
                    autoCenter: false,
                    //offset: { x: 18.8, y: -4.35, z: 15.55 }
                  })
                  child.body.setAngularFactor(0, 0, 0)
                  child.body.setLinearFactor(0, 0, 0)
                }
              }
            })
          })

Asset glb

siemplemap.glb

I want to add cloth physical properties to GLB, but I don't know how to do it. Can you give me some suggestions？

Hello, i know that actually you're busy by another project, but i've got a little question:

i added POSTPROCESSING like in this tutorial:
https://redstapler.co/threejs-postprocessing-effect-tutorial/

in three.js we've got:
renderer.render(scene,camera)

and i have to change this for
composer.render();

but here in enable 3d, we don't have control on renderer, such as in THREE.js - i mean, we have this.third.renderer, but how can i enforce this main renderer to use

composer.render();

Hi,

Really like the project.

We were playing with enable3d but found that applyTorque hasn't been included from AmmoJS. Any reason why? And any thoughts to include it?

Thanks!

Hi,

Could you open up the custom canvas properties? Currently I believe only antialias is available to modify, the rest are swallowed up by defaults:

Unless I'm misunderstanding how you pass these values in?

Thanks again!

I see the library expects geometry to be in meters. Is there a way to set that to mm for example?
the debugger objects are too small and they seem to be telling me the colliders are too small too because my meshes are scaled up.

can I make multiplayer games with enable3djs?

I have tried to do the following example together with socket.io, but I don't know how to communicate when a user leaves, or when a user moves. "I really don't know if the little I've written is right."

So I wonder if anyone has been able to make any multitplayer games with enable3djs? If so, can you help me?

` const { enable3d, Scene3D, Canvas, THREE } = ENABLE3D

class MainScene extends Scene3D {
  constructor() {
    super({ key: 'MainScene' })
  }

  init() {
    this.requestThirdDimension()
  }

  create() {
    this.accessThirdDimension()
    this.third.warpSpeed()
    this.myio()
  }

  myio() {
    let socket = io();
    let groupPlayer = new THREE.Group()
    //this.otherPlayers = this.physics.add.group();
    socket.on('currentPlayers', (players) => {
      Object.keys(players).forEach((id) => {
        if (players[id].playerId === socket.id) {
          addOnePlayer(players[id])
        } else {
          addOtherPlayers(players[id])
        }
      });
    });

    socket.on('newPlayer', (playerInfo) => {
      addOtherPlayers(playerInfo);
    });

    socket.on('disconnect', (playerId) => {
      // i don't know how to do this step
    });


    const addOnePlayer = (playerInfo) => {
      console.log(playerInfo)
      let body
      let head
      if (playerInfo.team === 'blue') {
        body = this.third.add.box({ height: 0.8, y: 1, width: 0.4, depth: 0.4 }, { lambert: { color: 0x0000ff } })
        head = this.third.add.sphere({ radius: 0.25, y: 1.7, z: 0.05 }, { lambert: { color: 0x0000ff } })
        //otherPlayer.setTint(0x0000ff);
      } else {
        body = this.third.add.box({ height: 0.8, y: 1, width: 0.4, depth: 0.4 }, { lambert: { color: 0xff0000 } })
        head = this.third.add.sphere({ radius: 0.25, y: 1.7, z: 0.05 }, { lambert: { color: 0xff0000 } })
        //otherPlayer.setTint(0xff0000);
      }
      groupPlayer.add(body, head)
      groupPlayer.position.setX(3)
      this.third.add.existing(groupPlayer)
      this.third.physics.add.existing(groupPlayer)
    }


    const addOtherPlayers = (playerInfo) => {
      console.log(playerInfo)
      let group = new THREE.Group()
      let body
      let head
      if (playerInfo.team === 'blue') {
        body = this.third.add.box({ height: 0.8, y: 1, width: 0.4, depth: 0.4 }, { lambert: { color: 0x0000ff } })
        head = this.third.add.sphere({ radius: 0.25, y: 1.7, z: 0.05 }, { lambert: { color: 0x0000ff } })
        //otherPlayer.setTint(0x0000ff);
      } else {
        body = this.third.add.box({ height: 0.8, y: 1, width: 0.4, depth: 0.4 }, { lambert: { color: 0xff0000 } })
        head = this.third.add.sphere({ radius: 0.25, y: 1.7, z: 0.05 }, { lambert: { color: 0xff0000 } })
        //otherPlayer.setTint(0xff0000);
      }
      group.add(body, head)
      group.position.setX(3)
      this.third.add.existing(group)
      this.third.physics.add.existing(group)
    }
  }
}

const config = {
  type: Phaser.WEBGL,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth * Math.max(1, window.devicePixelRatio / 2),
    height: window.innerHeight * Math.max(1, window.devicePixelRatio / 2)
  },
  scene: [MainScene],
  ...Canvas()
}

window.addEventListener('load', () => {
  enable3d(() => new Phaser.Game(config)).withPhysics('/lib')
})`

I've just updated enable3d to check the new cache system and such:
https://i.imgur.com/suWgZTd.png

I didn't touch anything except for the update, everything was going without errors.

ps. i didn't use any 'water module' or similar in my project.

Where supported, it would be a real performance improvement to include a webworker for the Ammo JS calculations.

See example here: https://playground.babylonjs.com/#N7PGG3#2

Hello,

I am having troubles working with THREE.Group and compound bodies.

Not sure if it's a bug.

  const robotBody = new THREE.Group();

  // I add multiple THREE mesh to robotBody

  const compound = [
        { shape: 'box', y:-0.0155, height:0.03, width:0.9, depth:1.5 },
       { shape: 'box',y:-0.2155, height:0.03, width:0.45, depth:1.5 },
        { shape: 'cylinder',radiusTop:0.025, height:0.2, radiusBottom: 0.025, radiusSegments: 7},
      ]

  //@ts-ignore
  physics.add.existing(robotBody, {compound:compound,collisionFlags:2, mass:1});
      

1. How can I set the collision flag of the body? and mass? nothing is changing. even when I set the mass to 0.

2. I need to "teleport" the body.
   with normal shape I set the collision flag to 2, change the position, then call update once. Like the example.
   But I am not able to change the collision flag.

So I tried removing the full body and then adding it.

        //@ts-ignore
        physics.destroy(robotBody.body);

This does not work.

Hello,

Is there any way to enable anti-aliasing? This method has been completely removed from the renderer method, I don't know if it's intentional on your part. ^^

Is it possible to make portal in mesh?
I have a wall with a doorway. If add physic to the wall as "hacd", collide event fired few times on a wall, if add as "plane", event fire once, but plane cover all wall include a doorway.
Or how to fire collide event on “hacd” mesh once?

Hey @yandeu ,

I've uploaded a video of the syncing issue. I've re-enabled phaser, which means that the mesh no longer "snaps" into place when the body realigns with the mesh, but as you can see there's still some odd syncing problems.

https://youtu.be/Wugs0axGZ0w

I've used your examples to build this - just applying setVelocity and setAngularVelocity for movement. But otherwise it's a standard scene. Found that removing Vue doesn't change the behaviour, so definitely something in how the scene is updating that's causing the problem.

Any help gratefully received!

Hello, im using phaser3 extension.

Is there any way to integrate sprites with 3d dimenstion (like in three.js)?

https://threejs.org/examples/?q=sprite#webgl_sprites_nodes

i know, that theoretically we could use THREE.js native code, but phaser / enable3D API is more comfortable, and provides new possibilities ^^

Am I loading something wrong or is this repository broken?
Here's the error:
[email protected]:105 Uncaught Error: failed to load /lib/ammo.wasm.js at HTMLScriptElement.QM.n.onerror

QM.n.onerror @ [email protected]:105
error (async)
QM @ [email protected]:105
$M @ [email protected]:105
(anonymous) @ [email protected]:105
setTimeout (async)
aT @ [email protected]:105
(anonymous) @ index.js:363
load (async)
window.addEventListener @ cordova.js:140
(anonymous) @ index.js:362

Greetings.

Im trying this library to implement physics on my current three.js

After running "npm i enable3d" and trying to run my page, the console mark errors in "@enable3d/ammo-physics" about not finding Ammo.

i dont know how to work arround this or if i miss something.

Hello,
For some reason I am not able to apply torque to a cylinder.

My goal is to rotate the cylinder.

  physics.add.ground({ width: 200, height: 200 })

  const tire = new THREE.Mesh(new THREE.CylinderGeometry(), new THREE.MeshLambertMaterial({color: "#1a1a1a"}));
  tire.rotation.set(Math.PI/2, 0, 0);
  tire.position.set(0,3,0);
  scene.add(tire);
  physics.add.existing(tire, {shape:'concaveMesh', mass:10, collisionFlags:0});

I can apply force to it and it moves. And I can set the angular velocity and it rotates. But I am not able to apply torque.
When I do, nothing happens.

The error:
https://cdn.discordapp.com/attachments/416623653741133837/677758803193626637/Annotation_2020-02-13_231055.png

I'm following this error:
https://www.youtube.com/watch?v=AHQEWontFfU&feature=youtu.be

Hi,
First of thank you for the amazing library. Its very easy to integrate. Only problem I am seeing is when object is in high speed it misses collision, I have seen CCD parameters in document. But is there any rule of thumb to calculate the parameters for different shapes? Moreover I have observed that same parameters sometime works and sometime doesn't.

So can you please help me to figure out the general formula to handle this kind of situation for any shapes?

Hey @yandeu, thanks for building and sharing this cool and promising library!

I am trying to do a quick physics proof-of-concept on an existing 3D app written in vanilla javascript and threejs.

I'm finding it hard to understand what scripts need to be loaded and when from your examples.

I tried loading ammo.js and enable3d.ammoPhysics.0.0.15.min.js but when I try to run the code it seems to be looking for ammo.wasm.js not ammo.js. Do I need to use include the ammo webassembly version?

Also, do I need to have all the packages and ammoPhysics files on the server or are they included inside enable3d.ammoPhysics.0.0.15.min.js ?

Hello, I've recently picked up enable3d for my own project, and hope I can continue to use it going forward.

It would be fantastic to add support for css element renderers, they are rather powerful and I am finding myself needing them for my project. Three's CSS renderers allow you to take html elements and put them into the 3d 'world' interactively.

Some links that may be useful
https://threejs.org/examples/?q=you#css3d_youtube
https://threejs.org/examples/?q=css#css3d_periodictable
https://stackoverflow.com/questions/24681170/three-js-properly-blending-css3d-and-webgl
https://stackoverflow.com/questions/37446746/threejs-how-to-use-css3renderer-and-webglrenderer-to-render-2-objects-on-the-sa

I have a lot of questions and some other suggestions, though this is the most pressing. Is there somewhere I can reach you directly? Thanks, Josh.

Hello, im using phaser3 extension.

1. How can i trigger 'finished' event on animation mixer in new library version?
   The last time, we could did the following:

this.mixer = this.scene.third.animationMixers.create(this)
        this.mixer.timeScale = 1;
        this.mixer.addEventListener('finished', () => {
            this.setAction('Idle')
        });

now we have:

this.third.animationMixers.add(robot.animation.mixer)

and trigger like this:

this.animation.mixer.addEventListener('finished', () => { console.log("it's working!") });

does not working.

2. How we now can setLoop of the animation? ^^

Hello, im using phaser3 extension.

The problem is, when i try to pre-compile shaders like this:
this.third.renderer.compile(this, this.third.camera)

console throws me an error:

index.js?b8a3:1 Uncaught TypeError: n.addEventListener is not a function
    at Object.get (index.js?b8a3:1)
    at Ns.compile (index.js?b8a3:1)
    at SpaceScene.create (SpaceScene.js?429e:67)
    at SceneManager.create (SceneManager.js?cec0:614)
    at SceneManager.bootScene (SceneManager.js?cec0:500)
    at SceneManager.start (SceneManager.js?cec0:1200)
    at SceneManager.processQueue (SceneManager.js?cec0:291)
    at SceneManager.update (SceneManager.js?cec0:554)
    at Game.step (Game.js?22d5:475)
    at TimeStep.step (TimeStep.js?fdd3:599)

my whole class scene:

export default class SpaceScene extends Scene3D {
    constructor() {
        super('SpaceScene');
    }

    init(){
        this.accessThirdDimension()
    }

    create() {
        this.createBackgroundAnimation()

        this.third.warpSpeed('-sky', '-ground', '-light', 'orbitControls')
        this.third.renderer.gammaFactor = 1.65
        this.third.renderer.toneMapping = THREE.LinearToneMapping
        this.third.renderer.toneMappingExposure = 2.1; 
       
        this.cameras.main.setViewport(0, 0, GAME_CONFIG.scale.width, GAME_CONFIG.scale.height);
        this.third.renderer.setSize(GAME_CONFIG.scale.width, GAME_CONFIG.scale.height)
        this.third.camera.aspect = GAME_CONFIG.scale.width / GAME_CONFIG.scale.height 
        this.third.camera.updateProjectionMatrix()
        this.third.camera.position.set(...this.SCENE_CONFIG.CAMERA_POSITION)
        this.third.camera.lookAt(...this.SCENE_CONFIG.CAMERA_LOOK_AT)

        this.third.renderer.compile(this,  this.third.camera)
    }

Hello,

I am loading a model using GLTFLoader

loader.load( 'assets/ArduinoUno.glb', function ( gltf ) {
  console.log(gltf);
  const mesh = gltf.scene;
  mesh.position.set(0,100,0);
  scene.add( mesh);
  
  //@ts-ignore
  physics.add.existing(mesh, {shape: 'concaveMesh'});

}, undefined, function ( error ) {

  console.error( error );

} );

the result is

How can I centre the mesh with the body?

Thanks.

It would be great to extend the Object3D .toJSON() and JSON parser for threejs (THREE.ObjectLoader) to work with the extended objects. If there is a way to save and load to json already I apologise, I did spend some time looking. Thanks.

It's not triggering Collision related events if existing mesh is added to the Physic and its body is set to trigger the event. It reacts on collision correctly but it does not trigger the event. Also some issue with destroying the physics body for existing objects.

First off, congratulations, this looks great and is really easy to use.

Haven't been able to find documentation yet on this - is it possible to map a texture the heightmap?

Hello Again.

I’m trying to load an object into a scene. based on the code that is used for the example of the medieval book i manage to load it

Code:

let model = this.load.preload('model', '/assets/sceneseria.glb');
    let object = await this.load.gltf('model');
    object.scenes[0].scale.set(100, 100, 100);
    const modddl = new ExtendedObject3D()
    modddl.name = 'scene'
    modddl.add(object.scenes[0])
    this.add.existing(modddl);

Result (is a boring and generic office 🙁):

Now I’m trying to add physics but if i try to use the code like the one of the example, i got compilation error.

Using this:

modddl.traverse(child => {
      this.physics.add.existing(child, {
        autoCenter: false,
        collisionFlags: 1,
        offset:{x:0,y:0,z:0}
      })
    })

i got this:

if i ignore that compliation error, the model is loaded but the browser (firefox) throws this error:

im testing the collisions with a generic sphere

this.player = this.physics.add.sphere({ y: 200, x: 4, z:30, radius: 1 })
    this.player.body.setAngularFactor(0, 1, 0)
    this.player.body.setFriction(0); 

the collision is detected only in the test area provided by enable3d but not in the model.
i dont know what to do to fix

It looks awasome. But you know can not be used Phaser in React Native easily. I would want to ask you if you could create an example repo for adjusted to use in React Native project.

After canceling 'this.third.warpSpeed()' statement, customize the scene light, background, etc., if use the 'THREE.OrbitControls' statement, you cannot place the cursor in the dynamically added , that is, you cannot enter information in the newly created .

//this.third.warpSpeed('-ground')
new THREE.OrbitControls(this.third.camera, this.scale.parent)

let show_con = document.createElement( 'div' );
show_con.setAttribute( 'onblur', 'showinput()' );
	
let input_con = document.createElement( 'input' );
input_con.setAttribute( 'type', 'text' );
input_con.setAttribute( 'id', 'input' + new_name );
	
let button_con = document.createElement( 'input' );
button_con.setAttribute( 'type', 'button' );
button_con.setAttribute( 'onclick', 'showinput()' );
button_con.setAttribute( 'value', '添加' );

show_con.append( input_con );
show_con.append( button_con );
document.body.appendChild(show_con);

Hello, im using Enable3d as a 3d objects for phaser.

I tried to add normal maps to the substrate texture and if the mesh actually takes this parameter correctly, it doesn't fire at all.

I did it in three ways:

1:

const grass_normal = this.third.load.cache.texture('grass_normal')
        const grass = this.third.load.cache.texture('grass')
        this.grass = this.third.add.ground({
            width: 10,
            height: 6,
            y: -0.5
        }, {
            phong: {
                map: grass,
                transparent: true
            }
        })
        this.grass.material.needsUpdate = true;
        this.grass.material.normalMap = grass_normal;
        this.third.renderer.render(this, this.third.camera);

2. using THREE methods
3. loading normal map with main texture using array during loading assets:
   this.load.image('grass', ['assets/grass.png', 'assets/grass_normal.png'])

Unfortunately, none of these attempts add up to a normal map.

How to make the scene adapt to the screen? Currently when I change the screen size, the scene will not change with the screen.

Hi @yandeu : First off I would like to say : PLEASE KEEP UP THE GREAT WORK & GIVE YOURSELF A PAT ON THE BACK! You deserve it for this AWESOME piece of software!

Second, I'd like to ask if you could please fix the frame rate on your 3D water demo. I would really like it to work on my NVidia GeForce GTX 960M graphics card. I am on a gaming MSI laptop.

Thank you & once again please do keep up the GREAT work! <3

Hello,

im using enable3d as phaser extension

Some parts of Three.JS elements doesn't not work - or are not described in the documentation.
im trying to add a simple fog into scene, and nothing happened.
"this" in bellow context means scene:

    this.fog = new THREE.Fog( 0x6B4D3F, 5, 30 );
    this.fog2 = new THREE.FogExp2( 0xefd1b5, 0.0025 );`

Hello,

First I want to say THANK YOU for your amazing job!

I successfully loaded an avatar in gltf. I added physics with shape concaveMesh, which was the best. It is a little heavy, but I tested other shapes without success. The avatar is attracted by gravity as expected. The problem that I am facing now is that I want to rotate the legs of the avatar (which I can do it without problems) but physics don't act on him. I can see physics shape is not updated to the new rotation of the bones. I do it by becoming the avatar to a kinematic object, followed by rotating the bones, and then becoming back the avatar to dynamic. If I rotate both legs at front, I hope that avatar falls to the floor over his buttocks, but the avatar keeps floating after I do that. Which is the correct way to do it?

Thank you :)

Issue preloading assets

This example here works and lets you load textures. However, reloading the scene, or going to a scene that also uses this texture will throw an error:
[object%20HTMLImageElement]:1 GET http://localhost:8000/[object%20HTMLImageElement] 404 (File not found)

I believe this is because it is trying to load the same file twice.

I tried using the method of preloading shown in this example here but I wasn't able to get it to work. Project is undefined and this.load.preload says it doesn't exist.

Also, the same error happens for this.third.warpSpeed("ground"); when you load it for the second time.

Thanks in advance.