(Model preview) should support transparency

[freder]

three.js demo vs. this library

[freder]

my assumption is that this is due to an old version of three.js being used here. so I tried using GLTFLoader and DRACOLoader from three.js directly:

import View3D, {
    // GLTFLoader,
    // THREE,
    SceneViewerSession,
    QuickLookSession,
    Pose,
    AutoDirectionalLight,
    OrbitControl
} from '@egjs/view3d';
import { DRACOLoader } from '../node_modules/three/examples/jsm/loaders/DRACOLoader.js';
import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/gltf/');
// dracoLoader.setDecoderConfig({ type: 'js' });

// [...]

• with 0.116.x I get the same still
• from 0.120.x on I get: THREE.MeshPhysicalMaterial: .transparency has been renamed to .transmission.
• and for more current versions: TypeError: decoder.GetAttributeDataArrayForAllPoints is not a function

[freder]

for a workaround (not showing a model preview at all) – what would be the recommended way to use this library without having to initialize a <canvas>?

[WoodNeck]

Hello @freder! Like you've suggested, I also think that cause is the old three.js version, as it didn't support KHR_materials_transmission extension of glTF.

Unfortunately, I think the only solution is updating the three.js version. If that was just a tedious job, I would love to do it but as Three's interface is quite changed it can take a while to update.

But, we're about to release a new version within a month! I've just tested that model using the same envmap (royal_esplanade_1k), and it works fine. It can show a bit different color as I'm using LinearToneMapping here, while the Three's demo is using ACESFilmicToneMapping, but I'll make an option for this :)

[WoodNeck]

ACESFilmicToneMapping

[freder]

cool 👍 for now I simply built a basic model viewer in three.js directly.

[...] what would be the recommended way to use this library without having to initialize a <canvas>?

that was easy enough. in case it's useful to someone else:

import { SceneViewerSession, QuickLookSession } from '@egjs/view3d';
import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
const sessions = [];

function addSession(session) {
    sessions.push(session);
}

async function enter() {
    for (let i = 0; i < sessions.length; i++) {
        const sess = sessions[i];
        const isAvailable = await sess.isAvailable();
        if (isAvailable) {
            return await sess.enter();
        }
    }
    throw new Error('Session not available');
}

loader.load(modelPathGltf, (model) => {
    // ...
});

// android
addSession(new SceneViewerSession({
    file: new URL(modelPathGltf, location.href).href,
    title: modelTitle,
    link: modelPathGltf,
    resizable: false,
    mode: 'ar_only'
}));

// ios
addSession(new QuickLookSession({
    file: new URL(modelPathUsdz, location.href).href,
}));

[WoodNeck]

@freder Hello! I've just released a preview of the next version with the tag next.

You can install it like this:

npm i @egjs/view3d@next

Check the document & demo on here:

• https://woodneck.github.io/egjs-view3d/

That model is also tested :)

[freder]

[...] what would be the recommended way to use this library without having to initialize a ?

currently looking into the same thing again, but with the latest version of this library...

[WoodNeck]

@freder Hi, what is the feature you are looking for? Is it possible to solve it with autoInit?