help adding textures to cube

[phloud]

Hello, I'd like to chime in here and say thanks for this great program @jnsmalm !
I'm an old pixijs dev but new to playing with 3d... I have a question about adding faces to a simple cube.

I'm creating a cube (Mesh3D.createCube(material)) but I'm stuck when i try to add the texture that I made from UV unwrapping a cube while playing with blender recently.

At the moment in the test I'm adding here, I went back to using a single texture but I've added the UV texture for ref. so you can see what I'm going after. Clicking on the roll button animates through the six faces. (there are issues with resizing the html so you might need to refresh)

As well I was poking around here in discussions and found someone asking about using textures on the faces of a cube but you mentioned something about using the SkyBoxMaterial and I couldnt get that to load in my webpack setup... I'm using pixi3d 1.6.1 and pixijs 6.5.1
import {SkyboxMaterial} from "pixi3d/types/skybox/skybox-material";
"Module not found: Error: Package path ./types/skybox/skybox-material is not exported from package"

As a separate issue as I mentioned I was able to follow a tutorial on blender and made a gltf file that works with the UV texture but I get an error message about missing textures when i try to use it with pixi3d as a model after loading with the threeGLTFLoader.

I'd say I prefer using the pixi3d code to create a cube if I could just get a better handle on how to skin it. It is so quick to integrate into pixijs, I was having problems getting three to play nice with pixi. It's definitely a case of a little knowledge making a big mess ATM.

Thanks in advance for any pointers.

cube_faces.zip

[jnsmalm]

Hello!

When I try loading your attached model it works using Pixi3D 1.6.1, I'm not entirely sure you had issues with that though. If you are having problems with this you can try the create-pixi3d-app which has an example with loading a model and you can try just changing which model it loads.

npx create-pixi3d-app test-app
cd test-app
npm start

If you want to use the Mesh3D.createCube and attach a texture you can do that with:

let mesh = Mesh3D.createCube()
mesh.material.baseColorTexture = Texture.from("...")

The SkyboxMaterial is not exported in the bundle (it's used by the Skybox class) but you can check the source to see how it works. It works differently by using a cubemap (pretty much a texture with 6 faces).

Maybe you can share some source code with the issues you are having, the one you attached seems to be a bundle and impossible to read :-)

[phloud]

Hi again, I'm adding the code here that I've edited from create-pixi3d-app.
I've added my gltf model (commented out adding to stage atm ) and I've added a Mesh3d that works beautifully.
I fooled around with the uv texture in photoshop that I had made for the blender model and by changing the position of the faces in the png it works on the Mesh3d cube now.
So far so good but now I cant figure out how to brighten up my Mesh3d. Lighting seems limited and I have no knowledge what to try next so I'm hoping you might have a magic solution. I've commented out some of the things I've tried in the code for ref.

I forgot to mention in my first post that for my project the entire build has to produce a single html file. (I included that html file originally so that you could just drop it into chrome to see what I was working on, not as code, sorry for any confusion there.)
The problem I'm having making a model from the gltf might be related since I cant load any assets after launch. I can use "require" to get the gltf file into the build but get errors when using Model.from(). I can make an new glTFAsset and log that as well though so that seems a start. I'll look at this again later. It's not necessary since I can use the Mesh3d with the uvtexture if I could just get the lighting sorted ;-)
I think being able to use models directly could be a plus for more complicated objects of course.

Thanks in advance for any pearls of wisdom.

dice-pixi3d-app.zip

[jnsmalm]

You can try changing the properties of the material. The standard material is using PBR (Physically Based Rendering) and depending on the settings of the material it greatly affects how lighting behaves for that material.

diceMaterial.exposure = 1 // Use a higher value to make the object brighter
diceMaterial.roughness = 0.2 // 0 is perfect smooth surface, 1 is max roughness
diceMaterial.metallic = 1 // 0 for non-metallic object, 1 for metallic objects
diceMaterial.unlit = false // Set to try to disable all lighting

Try for example to use the image based lighting in that code (which you commented out) and set metallic = 1 and roughness = 0, it will look like a perfect mirror.

If you want t o load an embedded json you can do that using:

glTFAsset.load(json, undefined, (gltf) => {
   let model = Model.from(gltf)
})

All textures and vertex data needs to be included/embedded in that json.
https://api.pixi3d.org/classes/glTFAsset.html#load

[phloud]

thanks for the quick reply, that was just what I needed with that material code. I have a lot to learn with 3d obviously but it feels great being able to use 3d in pixijs!
as far as Model.from I'm still getting an error but will look at that later.

[jnsmalm]

If you attach the model json, I can check if something is wrong.