Compile errors when using @pixi/math-extras

[Giacom]

When depending on and importing @pixi/math-extras, PIXI3D will produce these compile errors:

src/index.ts:43:36 - error TS2345: Argument of type 'Model' is not assignable to parameter of type 'DisplayObject'.
  The types of 'transform.position.normalize(...).magnitude' are incompatible between these types.
    Type 'number' is not assignable to type '() => number'.

43     let model = container.addChild(Model.from(assets.teapot));

src/index.ts:48:29 - error TS2554: Expected 0-2 arguments, but got 3.

48     ground.scale.set(10, 1, 10);
                                      ~~~~~~~~~~~~~~~~~~~~~~~~~

import { Assets } from "@pixi/assets";
import { autoDetectRenderer, Renderer } from "@pixi/core";
import { Container } from "@pixi/display";
import "@pixi/math-extras";
import { CameraOrbitControl, ImageBasedLighting, Light, LightingEnvironment, LightType, Mesh3D, Model, ShadowCastingLight, ShadowQuality } from "pixi3d/pixi7";

let renderer = autoDetectRenderer({
    backgroundColor: 0xdddddd,
    antialias: true,
    width: 1200,
    height: 800,
});
document.body.appendChild(renderer.view as HTMLCanvasElement);

const manifest = {
    bundles: [
        {
            name: "assets",
            assets: [
                {
                    name: "diffuse",
                    srcs: "assets/chromatic/diffuse.cubemap",
                },
                {
                    name: "specular",
                    srcs: "assets/chromatic/specular.cubemap",
                },
                {
                    name: "teapot",
                    srcs: "assets/teapot/teapot.gltf",
                },
            ],
        },
    ],
};

async function start(): Promise<void> {
    await Assets.init({ manifest });
    let assets = await Assets.loadBundle("assets");

    const container = new Container();

    let model = container.addChild(Model.from(assets.teapot));
    model.y = -0.8;

    let ground = container.addChild(Mesh3D.createPlane());
    ground.y = -0.8;
    ground.scale.set(10, 1, 10);

    LightingEnvironment.main.imageBasedLighting = new ImageBasedLighting(assets.diffuse, assets.specular);

    let directionalLight = new Light();
    directionalLight.intensity = 1;
    directionalLight.type = LightType.directional;
    directionalLight.rotationQuaternion.setEulerAngles(25, 120, 0);
    LightingEnvironment.main.lights.push(directionalLight);

    let shadowCastingLight = new ShadowCastingLight(renderer as Renderer, directionalLight, { shadowTextureSize: 1024, quality: ShadowQuality.medium });
    shadowCastingLight.softness = 1;
    shadowCastingLight.shadowArea = 15;

    let pipeline = renderer.plugins.pipeline;
    pipeline.enableShadows(ground, shadowCastingLight);
    pipeline.enableShadows(model, shadowCastingLight);

    let control = new CameraOrbitControl(renderer.view as HTMLCanvasElement);

    function render() {
        renderer.render(container);
        requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
}

start();

Example Project math-extra.zip

[jnsmalm]

Thanks, I'll look into this!

[jnsmalm]

There is a type collision between math-extras and Pixi3D. Not sure what can be done right now. I guess you can do this:

let ground = app.stage.addChild(Mesh3D.createPlane() as unknown as DisplayObject) as unknown as Mesh3D

or

// @ts-ignore
let ground = app.stage.addChild(Mesh3D.createPlane())

[Giacom]

Alright that's good to know! I'll probably just remove the dependency for now since PIXI3D has 3D versions of the functions I'd be using anyway.