jnsmalm / pixi3d Goto Github PK
View Code? Open in Web Editor NEWThe 3D renderer for PixiJS. Seamless integration with 2D applications.
Home Page: https://pixi3d.org
License: MIT License
The 3D renderer for PixiJS. Seamless integration with 2D applications.
Home Page: https://pixi3d.org
License: MIT License
Hi there!
I want to implement deterministic dice rolling with a physics engine and I wonder, how I can identify the side of the dice, which is on top. Ideally, I would have some named normals, to compare this with the up vector. But I have no idea, if this is possible with GLTF.
EDIT: I want this not only for six sides dies, but also for dice with 8, 10, 12 and 20 sides.
Do you have any ideas, how I could identify the sides of a loaded model?
Regards
Jonas
I see you have play and stop methods, but how does one increment animation time with this?
trying some rigged example gltf meshes from here
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0
all static, cant get them to play
Here's an example of a skinned model that works in three.js but not in pixi3D (on iOS < 14):
https://threejs.org/examples/#webgl_animation_skinning_blending
Shaders couldn't compile, reporting too many uniforms...
Looks like three.js automatically reduces number of skinning weights:
https://discourse.threejs.org/t/is-the-limit-of-4-skinning-weights-per-vertex-a-hard-limit-of-webgl
Here's an issue reported on three.js: mrdoob/three.js#7807
How to build 3D grid ? How to add rack inside grid?
Hi,
I stumbled upon an issue (not sure If it's actually an issue)
Here is the reproducible repo,
https://github.com/goldenratio/pixi3d-poc-72
Setting, PIXI.settings.RESOLUTION = 2;
breaks the model, but when setting it to 1, it works fine.
https://github.com/goldenratio/pixi3d-poc-72/blob/main/src/index.ts#L12
is it possible to use pointerdown
and pointerup
so it's touch screen friendly?
https://github.com/jnsmalm/pixi3d/blob/develop/src/camera/camera-orbit-control.ts#L42
Subj.
I'm looking at your progress, and maybe i'll try to merge something with my architecture at pixi-projection. My project lacks glTF and actual 3d model support, but my ideas with containers and architecture surely can help.
For example, I know by experience that swapping 2d position to 3d in the same field can lead to many problems.
Hi there, it's me again. I was wondering is the a way to use particles in 3d space. Example: the particles goes around a cylinder.
Thanks in advance.
First off good work. But is there a way to do height maps w/ this library? Looking to procedurally generate some terrain...
Using PostProcessingSprite
pixi throws a deprecation Warning:
Renderer#render arguments changed, use options instead.Deprecated since v6.0.0
Looks liks in this file: https://github.com/jnsmalm/pixi3d/blob/develop/src/sprite/post-processing-sprite.ts on line 85
this.renderer.render(object, this._renderTexture)
the second argument needs to change to an options object.
pixi3d: 1.2.0
I got this error when loading the model:
RangeError: Invalid typed array length: 20
at new Float32Array (<anonymous>)
at Function.e.from (pixi3d.min.js:17:212373)
at e.parseBuffer (pixi3d.min.js:17:199160)
at e.parsePrimitive (pixi3d.min.js:17:204392)
at pixi3d.min.js:17:203825
at Array.map (<anonymous>)
at e.parseMesh (pixi3d.min.js:17:203785)
at c (pixi3d.min.js:17:206008)
at c (pixi3d.min.js:17:206399)
at e.parseModel (pixi3d.min.js:17:206588)
glTF version 2.0
Generator: Created using the official Cinema 4D glTF Exporter 1.000x284978
I found that if the device can't support WebGL2, it can't be displayed.
Is it right? This library is only run in WebGL2?
PIXI3D objects don't have filterArea/bounds calculated so adding filters to them doesn't work.
First of all: really great addOn !!! I am amazed how well it works. I tried the demo. i recognized, the drone-object doesnt cast shadows on it self and on the floor. Is it possible to implement shadows ?
import { Mesh3D, Light, LightingEnvironment } from "pixi3d";
app.desdory(); // error.
โ
AbstractRenderer.prototype.destroy = function (removeView) {
for (var o in this.plugins) {
this.plugins[o].destroy(); // Here! this.plugins['lighting'].destroy is undefined. and this.plugins['picking'].destroy
.
this.plugins[o] = null;
}
.
.
.
}
Unable to load these models, getting runtime error as described below.
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Lantern/glTF-Binary
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/BarramundiFish/glTF-Binary
pixi3d version: 1.1.1
Please note:
I was able to load these models in v0.9.8. Any help is appreciated.
pixi3d.js:10145 Uncaught TypeError: Cannot read properties of undefined (reading 'baseTexture')
at glTFParser../src/gltf/gltf-parser.ts.glTFParser.parseTexture (pixi3d.js:10145)
at new glTFParser (pixi3d.js:9965)
at Function../src/gltf/gltf-parser.ts.glTFParser.createModel (pixi3d.js:9974)
at Function../src/model.ts.Model.from (pixi3d.js:13325)
at PixiGLTFManager.getModel (pixi-gltf-manager.ts:67)
at showGTLFModel (index.ts:68)
at index.ts:261
at SafeSubscriber._next (pixi-gltf-manager.ts:41)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
at SafeSubscriber.next (Subscriber.js:130)
Hi, I Have an existing 2D pixi.js project.
There are many 2D Sprites in the project using spine animation.
Can 2D sprite node auto transform to Sprite3D?
How to combine pixi3d with pixi-spine node ?
eg in this demo
https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/sprites-3d
Can I add a 2d sprite(pixi-spine sprite) to a bunny with right position and view?
Hi,
First of all; great work! This is a very nice piece of tool to be able to use 3d inside pixi! Thanks a lot for this!
At the moment I'm learning all features of it. I'm stumbling on one thing though I can't find the answer to so far:
When adding the Model as a child of a pixi-viewport
Container (which does scaling, dragging and all kind of cool stuff to navigate a 2d scene), the Model isn't moving with it. This does work with other display objects, but unfortunately not with a pixi3d model. At least I can't get it to work here.
How can we make the Model move and scale with the viewport (preferrably by not changing anything in the 3d object/scene nor the camera, so only its 2d 'render' output)
Thank you for this great library. I am using it in the context of a Single Page Application (SPA), in which I need to create and destroy several PIXI apps within the lifecycle of the SPA. I noticed that the handler added by a PostProcessingSprite instance on this line is an anonymous function, which makes it pretty much impossible to remove from the PIXI shared ticker. This causes an error when destroying PIXI apps with PostProcessingSprite instances and creating other PIXI apps within the SPA.
When I encountered the error the first time I initially expected that by destroying the PostProcessingSprite instance the handler would be removed. Perhaps this could be a good solution without introducing breaking changes? That is, having the anonymous function to be a named function, which on destroying the sprite could now be removed from the shared ticker. Or perhaps there is another solution?
Thanks in advance!
It looks like lights can't be added after app has started rendering loop.
This can be easily replicated in 'lighting' example if you delay creation of lights a bit:
let app = new PIXI.Application({
backgroundColor: 0xdddddd, resizeTo: window, antialias: true
})
document.body.appendChild(app.view)
let mesh = app.stage.addChild(PIXI3D.Mesh3D.createCube())
mesh.rotationQuaternion.setEulerAngles(0, 30, 0)
setTimeout(function() {
let pointLight = Object.assign(new PIXI3D.Light(), {
x: 1.1, y: 0.2, z: 2.0, color: [1, 0, 0], intensity: 10, type: PIXI3D.LightType.point,
})
PIXI3D.LightingEnvironment.main.lights.push(pointLight)
}, 10);
I've tried to add ambient light to my scene, but there is always no effect. Is it currently working?
Hello @jnsmalm
AWESOME project of yours... One of my biggest dreams and challenges of 3D has always been to build a 3D user interface that combines the power of pixi.js, the beauty of 3D (like this library of yours) and combining HTML5 elements that can be brought to life and animated under these set of tools.
Is there a way to achieve this as of today?
Can you make this happen or recommend additional libraries that can allow me to put this all together?
Thanks and Congrats on your project!
Is there text node in pixi3d like Sprite3D๏ผ
Maybe writing the joint matrices to a texture should be default?
Hello!
I am trying to load the drone demo, but no luck so far. I am using pixi 5.3.9 and this code does not seem to work.
Unfortunately I can't update pixi to v6, because the project is huge and this will take days and days.
`app.loader.add("assets/buster_drone/scene.gltf")
app.loader.load((loader, resources) => {
let model = app.stage.addChild(
PIXI3D.Model.from(resources["assets/buster_drone/scene.gltf"].gltf))
})`
the property gltf
is always undefined (it is even missing, because the resource is of type Resource).
I noticed that there is a static method for loading gltf from array, but I did not try this yet. I guess I should load the bin or the model file there?
Thanks for your time.
Edit. I just tried the 3d cube code. It does not work for me too. Idk what's wrong since Mesh3D extends DisplayObject.
Maybe I am missing some npm package?
Edit2: The cube works with a hack. I cast the cube to any, then to DisplayObject and the code compiles and runs.
Hey again.
I have been having fun experimenting with Pixi3D.
I succeeded in getting the world mouse position of a 3d ground plane with this code:
var normal = new PIXI3D.Vec3.fromValues(0, 1, 0)
var plane = new PIXI3D.Plane(normal, 0.01)
var ray = PIXI3D.Camera.main.screenToRay(MouseX, MouseY)
var raycast = plane.rayCast(ray);
var point = ray.getPoint(raycast)
But it doesn't seem to work in orthographic mode. Only in perspective.
Is there anything I have to change for it to work in orthographic mode?
Please let me know if you need a working example or more code.
Thanks!
Hey, thank you for this extremely cool api. After 5 days head banging, I found that I need to take into account the pixi's renderer resolution in order to make the camera coord conversion to work as it should.
Here are the wrapped methods (I am not sure 100% about the z values, because I do not need z at all in my app).
public static toWorld(
container: Container,
anchor: Point,
model: Model
): ObservablePoint3D {
let bounds = container.getBounds();
let x = bounds.x + anchor.x * bounds.width;
let y = bounds.y + anchor.y * bounds.height;
return this.screenToWorld(x, y, model);
}
public static screenToWorld(
x: number,
y: number,
model: Model
): ObservablePoint3D {
let worldCoordinates = Camera.main.screenToWorld(
x,
y,
Camera.main.z - model.z,
undefined,
{
width:
App.instance.renderer.width /
App.instance.renderer.resolution,
height:
App.instance.renderer.height /
App.instance.renderer.resolution,
}
);
return worldCoordinates;
}
public static worldToScreen(
x: number,
y: number,
z: number = Camera.main.z
): Point {
let worldCoordinates = Camera.main.worldToScreen(x, y, z, undefined, {
width:
App.instance.renderer.width / App.instance.renderer.resolution,
height:
App.instance.renderer.height / App.instance.renderer.resolution,
});
return worldCoordinates;
}
I hope this helps and it will save time to someone using your api.
Thanks,
Ivan
Hi,
I am trying to optimize meshes in .glb files using gltfpack,
gltfpack -i Soldier.glb -o Soldier-opt.glb -c
Pixi3D doesn't seem to render optimized 3d file. Further googling noticed three.js and playcanvas handles KHR_mesh_quantization and EXT_meshopt_compression
Minimal reproducible repo is here, https://github.com/goldenratio/pixi3d-poc-72
Any help is appreciated.
attaching models
as titile
If the webgl context is lost, the texture for skyboxes becomes non-renderable and throws a multitude of webgl errors. This does not happen for normal meshes. As far as I can tell, this may be an issue with the pixi.js CubeResource, but given your overrides, I wasn't sure if this is necessarily the case. It seems that the textures don't properly upload the second time, because they aren't marked dirty on a context loss?
I wanted to test this out but it seems the .js file is missing in the examples folder.
Index.html:
<script src="example.js"></script>
Hello I have a problems with the model textures. If the texture comes from a spritesheet, the model displays the whole spritesheet instead of the proper texture. Here is the code, which I am using. Note that everything works perfectly fine, if I pass a 'standalone' texture.
public setTexture(meshIndex: number, texture: Texture) {
let mat = this.model.meshes[meshIndex].material as StandardMaterial;
mat.baseColorTexture = texture;
}
Hello,
Thanks for providing this library, we're trying to migrate our game prototype from 2D to 3D and your library seems great for this purpose!
I was able to show some objects but I don't understand how I should do collision detection. With 2D we would use the object's position with its texture's width
and height
properties, but there is no texture in a Model object (I have limited knowledge in game dev so this might be an obvious thing).
const drone = stage.addChild(Model.from(resources["drone"]!.gltf));
drone.animations[0]?.play();
console.log(drone.width, drone.height) // => 0 0
console.log(drone.texture) // => undefined
What do you recommend to implement collision detection?
First of all, great work! Let's say there are three cubes stacked on top of each other or some more complex geometry. How is it possible to group them into one single mesh (to later rotate the mesh)? There is not much to be found about combining 3d meshes in the examples. Thanks
const c1 = app.stage.addChild(Mesh3D.createCube());
const c2 = app.stage.addChild(Mesh3D.createCube());
const c3 = app.stage.addChild(Mesh3D.createCube());
// ..? Combine & rotate c1,c2,c3 as one mesh?
Using PostProcessingSprite()
sometimes the sprite just doesn't get rendered. It's than throwing these kinde of errors:
I'm not using any textures on the 3d model, so it seems like it's talking about the PostProcessingSprite itself as being a texture.
I believe I've seen other people with the same error message on the pixi github, but I can't find it nowhere anymore and even then to me and I believe also to them it was completely unclear what was causing this and how this could even be worked around. I'm trying to debug this at the moment.
Any clue on what could cause this issue to happen? Could it be related to using the PostProcessingSprite's resolution
, width
or height
settings? Does this even have anything to do with textures? Or could it even be something else completely?
Hi!
I am loading a GLTF with six dice models as separate meshes inside. That works well. But I need those 6 meshes as separate Models, because they must be animated independently.
Simply setting the transforms on the children of the model works somehow, but the lighting on the material is not updated while animating, besides other transformation issues ....
I tried something like
const subModel = new PIXI3D.Model();
subModel.meshes.push(mesh.children[0].children[0]);
const dob = pixiApp.app.stage.addChild(subModel)
This does simply nothing. Is there a way to create a Model from a "sub"mesh?
This is error from an old android 7.0 device (Infinix Hot 5 Lite). I solved this issue by setting 'mediump' precision for fragment shaders - you should probably use PIXI.settings.PRECISION_FRAGMENT value (its 'mediump' by default but I think they determine its value at runtime ??). Pixi also has PRECISION_VERTEX (https://pixijs.download/dev/docs/PIXI.settings.html#PRECISION_VERTEX).
Then another problem happened as 3D models were not visible with this warning in console:
unsupported index buffer type: uint32
Provided WebGL context does not support 32 index buffer, complex graphics may not render correctly
This was also solved by using Uint16Array (in only 2 places, I've done both of these changes in generated js file).
So check for Uint32Array support would be good too.
Can you please advice on how to resolve this?
Versions:
"pixi.js-legacy": "5.3.7",
"pixi3d": "^0.9.8",
node_modules/pixi3d/types/camera/camera-orbit-control.d.ts:15:19 - error TS2315: Type 'ObservablePoint' is not generic.
15 get angles(): PIXI.ObservablePoint<undefined>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/pixi3d/types/camera/camera.d.ts:26:38 - error TS2694: Namespace 'PIXI' has no exported member 'IDestroyOptions'.
26 destroy(options?: boolean | PIXI.IDestroyOptions): void;
~~~~~~~~~~~~~~~
node_modules/pixi3d/types/container.d.ts:9:5 - error TS2416: Property 'transform' in type 'Container3D' is not assignable to the same property in base type 'Container'.
Type 'Transform3D' is not assignable to type 'Transform'.
Types of property 'worldTransform' are incompatible.
Type 'TransformMatrix' is not assignable to type 'Matrix'.
9 transform: Transform3D;
~~~~~~~~~
node_modules/pixi3d/types/container.d.ts:10:9 - error TS2611: 'position' is defined as a property in class 'Container', but is overridden here in 'Container3D' as an accessor.
10 set position(value: ObservablePoint3D);
~~~~~~~~
node_modules/pixi3d/types/container.d.ts:12:9 - error TS2611: 'scale' is defined as a property in class 'Container', but is overridden here in 'Container3D' as an accessor.
12 set scale(value: ObservablePoint3D);
~~~~~
node_modules/pixi3d/types/container.d.ts:21:9 - error TS2416: Property 'localTransform' in type 'Container3D' is not assignable to the same property in base type 'Container'.
Type 'TransformMatrix' is not assignable to type 'Matrix'.
21 get localTransform(): import(".").TransformMatrix;
~~~~~~~~~~~~~~
node_modules/pixi3d/types/container.d.ts:21:9 - error TS2611: 'localTransform' is defined as a property in class 'Container', but is overridden here in 'Container3D' as an accessor.
21 get localTransform(): import(".").TransformMatrix;
~~~~~~~~~~~~~~
node_modules/pixi3d/types/container.d.ts:22:9 - error TS2416: Property 'worldTransform' in type 'Container3D' is not assignable to the same property in base type 'Container'.
Type 'TransformMatrix' is not assignable to type 'Matrix'.
22 get worldTransform(): import(".").TransformMatrix;
~~~~~~~~~~~~~~
node_modules/pixi3d/types/container.d.ts:22:9 - error TS2611: 'worldTransform' is defined as a property in class 'Container', but is overridden here in 'Container3D' as an accessor.
22 get worldTransform(): import(".").TransformMatrix;
~~~~~~~~~~~~~~
node_modules/pixi3d/types/cubemap/cubemap.d.ts:8:38 - error TS2315: Type 'BaseTexture' is not generic.
8 export declare class Cubemap extends PIXI.BaseTexture<CubemapResource> {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/pixi3d/types/gltf/gltf-asset.d.ts:48:51 - error TS2724: 'PIXI' has no exported member named 'ILoaderResource'. Did you mean 'LoaderResource'?
48 load(uri: string, onComplete: (resource: PIXI.ILoaderResource) => void): void;
~~~~~~~~~~~~~~~
node_modules/pixi3d/types/instanced-model.d.ts:8:37 - error TS2694: Namespace 'PIXI' has no exported member 'DestroyOptions'.
8 destroy(options: boolean | PIXI.DestroyOptions | undefined): void;
~~~~~~~~~~~~~~
node_modules/pixi3d/types/lighting/image-based-lighting.d.ts:13:17 - error TS2315: Type 'Texture' is not generic.
13 get brdf(): PIXI.Texture<PIXI.Resource>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/pixi3d/types/lighting/image-based-lighting.d.ts:13:35 - error TS2724: 'PIXI' has no exported member named 'Resource'. Did you mean 'resources'?
13 get brdf(): PIXI.Texture<PIXI.Resource>;
~~~~~~~~
node_modules/pixi3d/types/lighting/lighting-environment.d.ts:8:58 - error TS2694: Namespace 'PIXI' has no exported member 'IRendererPlugin'.
8 export declare class LightingEnvironment implements PIXI.IRendererPlugin {
~~~~~~~~~~~~~~~
node_modules/pixi3d/types/loader/gltf-binary-loader.d.ts:3:26 - error TS2724: 'PIXI' has no exported member named 'ILoaderResource'. Did you mean 'LoaderResource'?
3 use: (resource: PIXI.ILoaderResource, next: () => void) => void;
~~~~~~~~~~~~~~~
node_modules/pixi3d/types/loader/gltf-loader.d.ts:3:26 - error TS2724: 'PIXI' has no exported member named 'ILoaderResource'. Did you mean 'LoaderResource'?
3 use: (resource: PIXI.ILoaderResource, next: () => void) => void;
~~~~~~~~~~~~~~~
node_modules/pixi3d/types/mesh/instanced-mesh.d.ts:8:37 - error TS2694: Namespace 'PIXI' has no exported member 'IDestroyOptions'.
8 destroy(options: boolean | PIXI.IDestroyOptions | undefined): void;
~~~~~~~~~~~~~~~
node_modules/pixi3d/types/picking/picking-manager.d.ts:9:53 - error TS2694: Namespace 'PIXI' has no exported member 'IRendererPlugin'.
9 export declare class PickingManager implements PIXI.IRendererPlugin {
~~~~~~~~~~~~~~~
node_modules/pixi3d/types/pipeline/standard-pipeline.d.ts:49:5 - error TS2416: Property 'render' in type 'StandardPipeline' is not assignable to the same property in base type 'ObjectRenderer'.
Type '(mesh: Mesh3D) => void' is not assignable to type '(object: DisplayObject) => void'.
Types of parameters 'mesh' and 'object' are incompatible.
Type 'DisplayObject' is missing the following properties from type 'Mesh3D': geometry, pluginName, enabledRenderPasses, _instances, and 34 more.
49 render(mesh: Mesh3D): void;
~~~~~~
node_modules/pixi3d/types/pixi/array-resource.d.ts:2:49 - error TS2339: Property 'ArrayResource' does not exist on type 'typeof PIXI'.
2 export declare const ArrayResource: typeof PIXI.ArrayResource;
~~~~~~~~~~~~~
node_modules/pixi3d/types/pixi/cube-resource.d.ts:2:48 - error TS2339: Property 'CubeResource' does not exist on type 'typeof PIXI'.
2 export declare const CubeResource: typeof PIXI.CubeResource;
~~~~~~~~~~~~
node_modules/pixi3d/types/sprite/post-processing-sprite.d.ts:27:25 - error TS2315: Type 'BaseTexture' is not generic.
27 get depthTexture(): PIXI.BaseTexture<PIXI.Resource, PIXI.IAutoDetectOptions> | undefined;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/pixi3d/types/sprite/post-processing-sprite.d.ts:27:47 - error TS2724: 'PIXI' has no exported member named 'Resource'. Did you mean 'resources'?
27 get depthTexture(): PIXI.BaseTexture<PIXI.Resource, PIXI.IAutoDetectOptions> | undefined;
~~~~~~~~
node_modules/pixi3d/types/sprite/post-processing-sprite.d.ts:27:62 - error TS2694: Namespace 'PIXI' has no exported member 'IAutoDetectOptions'.
27 get depthTexture(): PIXI.BaseTexture<PIXI.Resource, PIXI.IAutoDetectOptions> | undefined;
~~~~~~~~~~~~~~~~~~
node_modules/pixi3d/types/transform/observable-point.d.ts:22:9 - error TS2611: 'x' is defined as a property in class 'ObservablePoint', but is overridden here in 'ObservablePoint3D' as an accessor.
22 get x(): number;
~
node_modules/pixi3d/types/transform/observable-point.d.ts:27:9 - error TS2611: 'y' is defined as a property in class 'ObservablePoint', but is overridden here in 'ObservablePoint3D' as an accessor.
27 get y(): number;
~
node_modules/pixi3d/types/transform/observable-quaternion.d.ts:21:9 - error TS2611: 'x' is defined as a property in class 'ObservablePoint', but is overridden here in 'ObservableQuaternion' as an accessor.
21 get x(): number;
~
node_modules/pixi3d/types/transform/observable-quaternion.d.ts:24:9 - error TS2611: 'y' is defined as a property in class 'ObservablePoint', but is overridden here in 'ObservableQuaternion' as an accessor.
24 get y(): number;
~
node_modules/pixi3d/types/transform/transform-matrix.d.ts:28:5 - error TS2416: Property 'toArray' in type 'TransformMatrix' is not assignable to the same property in base type 'Matrix'.
Type '(transpose: boolean, out?: Float32Array | undefined) => Float32Array' is not assignable to type '(transpose: boolean, out?: Float32Array | undefined) => number[]'.
Type 'Float32Array' is missing the following properties from type 'number[]': pop, push, concat, shift, and 5 more.
28 toArray(transpose: boolean, out?: Float32Array): Float32Array;
~~~~~~~
node_modules/pixi3d/types/transform/transform-matrix.d.ts:47:5 - error TS2416: Property 'copyFrom' in type 'TransformMatrix' is not assignable to the same property in base type 'Matrix'.
Type '(matrix: TransformMatrix) => this' is not assignable to type '(matrix: Matrix) => Matrix'.
Types of parameters 'matrix' and 'matrix' are incompatible.
Type 'Matrix' is missing the following properties from type 'TransformMatrix': _transformId, transformId, array, position, and 10 more.
47 copyFrom(matrix: TransformMatrix): this;
~~~~~~~~
node_modules/pixi3d/types/transform/transform.d.ts:16:5 - error TS2416: Property 'worldTransform' in type 'Transform3D' is not assignable to the same property in base type 'Transform'.
Type 'TransformMatrix' is not assignable to type 'Matrix'.
Types of property 'toArray' are incompatible.
Type '(transpose: boolean, out?: Float32Array | undefined) => Float32Array' is not assignable to type '(transpose: boolean, out?: Float32Array | undefined) => number[]'.
16 worldTransform: TransformMatrix;
~~~~~~~~~~~~~~
node_modules/pixi3d/types/transform/transform.d.ts:18:5 - error TS2416: Property 'localTransform' in type 'Transform3D' is not assignable to the same property in base type 'Transform'.
Type 'TransformMatrix' is not assignable to type 'Matrix'.
18 localTransform: TransformMatrix;
~~~~~~~~~~~~~~
node_modules/pixi3d/types/transform/transform.d.ts:31:5 - error TS2416: Property 'setFromMatrix' in type 'Transform3D' is not assignable to the same property in base type 'Transform'.
Type '(matrix: TransformMatrix) => void' is not assignable to type '(matrix: Matrix) => void'.
Types of parameters 'matrix' and 'matrix' are incompatible.
Type 'Matrix' is not assignable to type 'TransformMatrix'.
31 setFromMatrix(matrix: TransformMatrix): void;
~~~~~~~~~~~~~
Found 34 errors.
We're building a project with Webpack we use Terser (newer uglyjs lib) to compress all javascript. Terser extracts all copyright info and put it nicely in a copyright file so the copyright info doesn't get lost and is for willingly to read.
This works fine for all libs we use as they all have their copyright information behind comments starting with /*!
.
However, pixi3d is using the same prefix for a whole bunch of comments in the javascript, resulting all kinds of junk being included in the copyright file now, so users see this in the copyright file, coming from pixi3d, which is obviouly not copyright information:
You might understand we don't like this and want to ask you if you could replace these 'copyright'-prefixes with normal comment prefixes, like /
or /*
. On the other hand you could also add your copyright information in there WITH the given 'copyright' (/*!
) prefix so it gets included in there.
For you this would probably mean 5 minutes of work, but for us it's basically impossible to strip it out as it's all being done automatically by terser on each webpack build.
Could you please change these comment prefixes?
Thanks in advance!
Could you please explain in few words how Pixi3D is different from Pixi Projection plugin https://github.com/pixijs/pixi-projection?
I needed ambient light for a project so I've quickly implemented one: https://github.com/vujadin/pixi3d/tree/ambient-light
Here's the result: http://babylonhx.com/pixiambient/
Couldn't get the right result with other types of light and wasn't able to use image lighting because of a project size limit...
Would be nice to have something like this in the "official" Pixi3D.
Hi, I'm working on fake 3D and sprite stacks with GDevelop (Game engine with pixi as core)
I'm trying put some 3D object on canvas, just a cube to follow a 2D cube
I create a cube and put as child of 2D, but when I move a scene, the 3D camera stucks
I try create a new Camera() for renderer but when I update positions nothing happens
this is possible?
To reproduce, open the teapot example with Firefox 99. Dragging to change the camera angle works, but scrolling does not. This works fine in Chrome.
This seems to be caused by the fact that Firefox does not implement the non-standard mousewheel
event which is used here to implement zooming.
Try changing the version in the example to v0.9.5, where the model is rendered correctly.
Hi Guys
This is not really an issue but I have trouble understanding the documentation so I am asking 3 three questions.
I am writing a game with Pixi.js this week and I am enjoying it.
Now I'd like to add a little bit of 3D.
On the photo below, I'd like the entire floor to be skewed to a trapeze while the tree, the characters and various fences stay upward.
I installed pixi3D and managed to display some 3D elements:
I can see a blank cube extracted from your getting started page.
It got me started. Thanks cube.
Then I can see a plane with a grass texture and a quad with a tree texture.
I use a StandardMaterial and set the baseColorTexture to my tree Pixi (classic) texture.
The texture was created from a basetexture that contains multiple images.
It looks like the Standard Material and quad is showing the entire texture and not the small portion of it.
So my first question is :
(1) How can I make the quad only display the top left quarter of the texture.
My second question is:
My floors are composed of 1 to 5 semi transparent textures on top of each other. Sometimes they are animated (the water is).
(2) how I can create a quad to show 4 or 5 textures.
Third and last question.
(3) I expect to display up to 2000 tiles on the screen adding more and deleting others as the player moves and the camera with it.
Does it seem realistic to you?
Do you think Pixi3D is a good match for what I am trying to do?
I am not sure you'll have the time to reply, in any case thank you for your good work.
It would be great to have possibility to pass 'loop' parameter to animation.play() method (like anim.play(false) so it plays only once) and even better to be able to get noticed when animation has ended.
Thanks for making this! Just digging in now and have some questions:::
Is it possible to add 3d objects as children to 2d objects?
I tried adding an object to a container, but was unable to get position transformations applied to the container to affect the 3d object.
https://codesandbox.io/s/damp-haze-gdy0k?file=/src/index.js
Hi,
I need to listen to DOM Events in each model that i created (model creation on code below)
async renderTerrain() {
for (let line = 0; line < this.#lines; line++) {
for (let column = 0; column < this.#columns; column++) {
const tile = new GameTile();
await tile.loadAsset();
tile.renderAsset();
tile.mesh.position.x = line * 1.9;
tile.mesh.position.z = column * 2;
tile.mesh.meshes[1].alpha = 1;
tile.mesh.interactive = true;
tile.mesh.on('mouseover', (event) => {
console.log('ok');
});
}
}
}
I tried to folow the following documentation (https://api.pixi3d.org/classes/model.html#interactivechildren) but without any success.
My goal is hide one mesh with alpha setted as 0 and when mouse hover this specific model, this mesh that was previously hide show again (only when hovering)
I'm also with some dificultes with the creation of custom cameras, for now i'm using the default internal camera created in CameraOrbitControl method. But i need create some cameras with specific world positions and angles and i couldn't create following the documentation
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.