akella/ExplodingObjects

Parsing GLB file return only Mesh

Closed this issue · 5 comments

croustibat commented

Hello,

I'm trying to load glb file using src file, but when the gltf.scene.traverse return only Mesh (i can't get the Group)

Object3D
castShadow: false
children: (206) [Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, …]
frustumCulled: true
layers: Layers {mask: 1}
matrix: Matrix4 {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: Matrix4 {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: "Voronoi_Fracture"
parent: Object3D {uuid: "49CDA510-F10F-4716-BD63-BA994DE881A8", name: "RootNode", type: "Object3D", parent: Scene, children: Array(2), …}

My imports :

import * as THREE from 'three-full'
import fragment from './exploding/shader/fragment.glsl'
import vertex from './exploding/shader/vertexIco.glsl'

I'm using three-full to load threejs with all feature like GLTFLoader and DRACOLoader

Am i missing something when importing libs ?

akella commented

Never used three-full, might be something with it specifically. usually gltf contains groups and all the stuff. Hard to help you with that =(

croustibat commented

ok i'll keeping trying to figure out what's going on ;)
thank you for reading

croustibat commented

ok so finally i manage to make it works \o/
for others :

I used NextJs as React Framework

Webpack : use glslify-loader module

config.module.rules.push(
 {
        test: /\.(glsl|vs|fs|vert|frag)$/,
        exclude: /node_modules/,
        use: ['raw-loader', 'glslify-loader']
      },
      ....
   )

then imports package in your source file :

import * as THREE from 'three'
import GLTFLoader from 'three-gltf-loader'

and in draco.js, i remove THREE prefix and load it as a module

module.exports = DRACOLoader

same for BufferGeometryUtils

Thank you @akella for your awesome work !

dada1smo commented

Hey @croustibat I'm trying to implement this demo in a Gatsby project, it's also React-based. Since you managed to successfully do it with React, would you mind sharing with me more of your final results? I would really appreciate it.