TroisJS

Models

TroisJS contains loaders for .gltf/.glb and .fbx files.

<GltfModel
    src="/path/to/your/model.gltf"
    @load="onReady"
    @progress="onProgress"
    @error="onError"
/>

<!-- FBX Model has the same props and events but loads FBX files -->
<FbxModel
    src="/path/to/your/model.fbx"
    @load="onReady"
    @progress="onProgress"
    @error="onError"
/>

Props

NameTypeNotes
srcStringPath to .gltf, .glb, or .fbx file

Events

EventParametersNotes
errorerror: ErrorEventOn load error
loadmodel: Object3DOn load complete
progressprogress: ProgressEventOn load progress

Notes/FAQs

Why aren't ambient lights affecting the model?

Occasionally, models will have their materials' metalness set to 0 and look unaffected by AmbientLights. To fix (see here for explanation):

<template>
    <!-- ... -->
        <GltfModel src="..." @load="onReady"/>
    <!-- ... -->
</template>

<script>
export default {
    methods: {
        onReady(model){
            model.traverse(o => {
                if (o.isMesh){
                    // handle both multiple and single materials
                    const asArray = Array.isArray(o.material) ? o.material : [o.material]
                    // 0 works for matte materials - change as needed
                    asArray.forEach(mat => mat.metalness = 0)
                }
            })
        }
    }
}
</script>