6.1 Element to create or load 3D models

<Model /> is used for the following two tasks. One is to load a 3D model, and the other is to create a 3D model. The following code is an example of a loading operation. It shows that when you enter the URL of the 3D model you want to load, the onLoad function is called when loading is completed.

const onLoad = ( model ) => console.log( model )

<Model url={'models/file.glb'} onLoad={onLoad} />

The following example shows the details of creating a 3D model. The first and second codes show examples of creating a mesh using object, geometry, and material properties, and the third code shows an example of creating multiple models simultaneously.

// 1st example
<Model
    object   = {{ type: 'Mesh', name: 'box', ... }}
    geometry = {{ type: 'BoxGeometry', parameters: [ w, h, d ] }}
    material = {{ type: 'MeshBasicMaterial', color: 0xffffff, ... }}
/>

// 2nd example
<Model
    object   = {{ type: 'Mesh', position: [px, py, pz], ... }}
    geometry = {{ type: 'BufferGeometry', attributes: { position, color } }}
    material = {{ type: 'MeshStandardMaterial', map: 'images/diffuse.jpg', ... }}
/>

// 3rd example
const model1 = {
    object: {
        type: 'Mesh',
        position: [px, py, pz],
        rotation: [rx, ry, rz],
        scale: [sx, sy, sz],
        name: 'testModel',
        castShadow: true,
        receiveShadow: true,
        frustumCulled: false,
    },
    geometry: {
        type: 'BoxGeometry',
        parameters: [width, height, depth]
    },
    material: {
        type: 'MeshStandardMaterial',
        color: 0xffffff,
        metalness: 0.5,
        roughness: 0.5,
        map:          'images/diffuse.jpg',
        normalMap:    'images/normal.jpg',
        metalnessMap: 'images/metalness.jpg',
        roughnessMap: 'images/roughness.jpg',
    }
};
const model2 = {
    object: { type: 'Sprite', position: [px,py,pz], scale: [sx,sy,sz] },
    material: {
        type: 'SpriteMaterial',
        map: 'images/diffuse2.jpg',
        transparent: true,
        opacity: 0.5
    }
}
const model3 = {
    object: { type: 'Mesh', name: 'bufferMesh' },
    geometry: {
        type: 'BufferGeometry',
        attributes: {
            position: [px,py,pz,...],
            normal: [nx,ny,nz,...],
            color: [r,g,b,...]
        },
        index: [i,...]
    },
    material: {
        type: 'MeshPhongMaterial',
        side: THREE.DoubleSide,
        vertexColors: THREE.VertexColors
    }
};
<Model models={[ model1, model2, model3 ]} />