React CreateAndApplyTexture

[adrianposteuca]

Hi all,

I am building a react app with ModelViwer, But ai want to access model materials and use CreateAndApplytexture , but I Can not access Modelviwer functions like CreateTexture or Model.materials

Any help is much appreciated!

I added the Modelviwer core

</div> <model-viewer className ="modelViewer" id ="modelViewer" alt="Shirt" scr = {${modelGLB}} //src="https://cdn.glitch.global/6430467c-091d-4527-99e0-5d9c034eac15/tshirt_test.glb?v=1669301875394app\src\Assets\tshirt_test.glb" shadow-intensity="1" camera-controls touch-action="pan-y" ref= {modelRef} ></model-viewer>

But I can not access materials " const material = modelRef.current.materials[0];"

How can I create this exemple

const createAndApplyTexture = async (channel, event) => { const texture = await modelViewer.createTexture(event); if (channel.includes("base") || channel.includes("metallic")) { material.pbrMetallicRoughness[channel].setTexture(texture); } else { material[channel].setTexture(texture); } }; createAndApplyTexture("baseColorTexture", myimage)

[elalish]

Did you mean const material = modelRef.current.model.materials[0];?

[akshays-repo]

useEffect(() => {
     
            const checkModelReady = () => {
                return new Promise(resolve => {
                    const check = () => {
                        if (modelRef.current.loaded) {
                            resolve();
                        } else {
                            setTimeout(check, 100);
                        }
                    };
                    check();
                });
            };

            await checkModelReady();
            
            // rest of the code goes here

        
    }, []);

I did something similar and it's working for me

[elalish]

A simpler approach:

modelRef.current.addEventListener('load', () => {// rest of the code goes here});

[akshays-repo]

Hi, thanks for the support. I'm exploring this package for my side project. So, my idea is to display a list of paintings. When a user clicks on one, we can view it on the wall. This is the concept. For this, I'm using a single GLB model frame file and adding an image as the texture. I saw the texture change example on the site, and those are working fine. However, in my case, it's not working at all. I'm getting a frame model without the photo. Also, while exploring the texture example on the website, it opens in the browser itself. However, my code is opening it in the Google app since I'm using Android

import React, { useEffect, useRef, useState } from 'react'
import '@google/model-viewer/';

const TextureModel = () => {
    const modelRef = useRef()

    useEffect(() => {
        const applyTextures = async () => {
            const imageTextureUrl = "/phtotframe/Textures/Image.JPG";
            modelRef?.current?.addEventListener('load', async() => {
            const imageTexture = await modelRef.current.createTexture(imageTextureUrl);
            imageTexture.name = "image_texture";
            const model = modelRef.current.model;
            const material2 = modelRef.current.model.materials[3];
            material2.pbrMetallicRoughness.baseColorTexture.setTexture(imageTexture);
            })
        };

        applyTextures();
    }, []);


    return (
        <div>
            <model-viewer 
                id="frame"
                camera-controls 
                touch-action="pan-y" 
                ref={modelRef}
                src={'/phtotframe/model/frame1.glb'}
                ar-placement="wall"
                tone-mapping="commerce" 
                ar 
                alt="A 3D model of a Shoe">
            </model-viewer>
        </div>
    )
}

export default TextureModel;

[akshays-repo]

check this output is I missing anything ?? or doing something anti-practice

[elalish]

Try ar-modes="webxr quick-look" - scene-viewer won't work for modified GLBs. If WebXR isn't working, you'll need to check your console to see why. Make sure you're serving over HTTPS. If you're still having trouble, see if it's this #4582 which appears to be device-specific.