Mã HTML: 

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Object</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div id="screen"></div>
    <div class="panel"></div>

    <script type="module">

        import * as THREE from './jsm/three.module.js';

        import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
        import { Helper, createClass } from './js/modules/helper.js';
        import App from './js/app.module.js';

        // tạo class 
        // có thể dùng var Damaged = createClass('Damaged', false).extends(App); khi này sẽ không tạo biến trong window
        createClass('Demo').extends(App)({
            // khai báo các thuộc tính hoặc phương thức
            version: 1
        });


        var DemoOptions = {{DataObject}}

        // tạo đối tượng với tham só là dữ liệu được lưu trong database
        var demo = new Demo(DemoOptions);
        demo.on('ready', function () {
            var scene = this.scene, renderer = this.renderer;
            var model;

        })


    </script>


</body>

</html>

 
 
Data: 
 
var DataObject = {
            // đối tượng đổ dom element
            selector: '#screen',
            autoStart: true,
            renderer: {
                params: { antialias: true },
                shadowMap: {
                    enabled: true
                },
                outputEncoding: THREE.sRGBEncoding
            },
            composer: {
                effect: 'bloom'
            },
            scene: {
                background: {
                    type: 'file',
                    format: "hdr",
                    file: "textures/0000.hdr"
                }

            },
            camera: {
                fov: 45,
                near: 1,
                far: 100,
                position: {

                    x: 2,
                    y: 2,
                    z: 3
                },
                // "@lookAt": [0, 1, 0]


            },
            controls: {
                type: "orbit",
                autoUpdateScene: true,
                maxPolarAngle: Math.PI * 0.52,
                maxDistance: 160
            },
            lights: [
                {
                    type: "Hemisphere",
                    params: [0xffffff, 0x444444],
                    position: {
                        x: 0,
                        y: 20,
                        z: 0
                    }
                },
                {
                    type: "Direction",
                    params: [0xffffff],
                    position: {
                        x: 3,
                        y: 10,
                        z: -10
                    },
                    castShadow: true,
                    shadow: {
                        camera: {
                            top: 5,
                            bottom: -5,
                            left: -5,
                            right: 5,
                            near: 0.1,
                            far: 40
                        }
                    }
                },
            ],
            meshes: [
                {
                    geometry: {
                        type: 'box',
                        params: {
                            width: 2000,
                            height: 2000,
                            depth: 2000
                        }
                    },
                    material: {
                        type: 'basic',
                        params: {
                            color: 0xa0a0a0,
                        },
                        side: THREE.BackSide
                    }
                },

                {
                    geometry: {
                        type: 'PlaneBuffer',
                        params: {
                            width: 1000,
                            height: 1000
                        }
                    },
                    material: {
                        type: "phong",
                        params: {
                            color: 0x999999,
                            depthWrite: false
                        }
                    },

                    position: {
                        y: -1
                    },
                    rotation: {
                        x: - Math.PI / 2,
                    },
                    receiveShadow: true
                },

            ],

            // đối tượng chính để quản lý
            main: {
                type: "mesh",
                params: {
                    geometry: {
                        type: "boxbuffer",
                        width: 2,
                        height: 2,
                        depth: 2
                    },
                    material: {
                        type: "boximages",
                        path: 'textures/cube/pisa/',
                        files: [
                            'px.png',
                            'nx.png',
                            'py.png',
                            'ny.png',
                            'pz.png',
                            'nz.png'
                        ],
                        color: 0xffffff
                    },

                },
                props: {
                    castShadow: true,
                    position: {
                        // y:1
                    }
                },
                handler: {
                    // tự dộng xoay
                    rotation: {
                        x: {
                            action: "inc",
                            value: 0.01
                        },
                        y: {
                            action: "inc",
                            value: 0.01
                        }
                    }
                },

                // các chất liệu để thay thế
                materials: [
                    {
                        type: 'lamber',
                        children: [
                            {
                                color: 0xff0000,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/1.jpg'
                                }
                            },
                            {
                                color: 0x00ff00,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/2.png'
                                }
                            },
                            {
                                color: 0x0000ff,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/3.png'
                                }
                            },
                            {
                                color: 0xff00ff,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/4.jpg'
                                }
                            },
                            {
                                color: 0x04d0ff,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/5.jpg'
                                }
                            },
                            {
                                color: 0xad0fd2,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/6.jpg'
                                }
                            },

                        ]
                    },
                    {
                        type: "boximages",
                        path: 'textures/cube/pisa/',
                        files: [
                            'px.png',
                            'nx.png',
                            'py.png',
                            'ny.png',
                            'pz.png',
                            'nz.png'
                        ],
                        color: 0xffffff
                    },
                    {
                        color: 0xff0000,
                        map: {
                            $three: 'texture',
                            file: '/threejs/img/1.jpg'
                        }
                    },
                    {
                        color: 0x00ff00,
                        // map: {
                        //     $three: 'texture',
                        //     file: '/threejs/img/2.png'
                        // }
                    },
                    {
                        color: 0x0000ff,
                        // map: {
                        //     $three: 'texture',
                        //     file: '/threejs/img/3.png'
                        // }
                    },
                    {
                        type: 'lamber',
                        children: [
                            {
                                // color: 0xff0000,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/1.jpg'
                                }
                            },
                            {
                                // color: 0x00ff00,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/2.png'
                                }
                            },
                            {
                                // color: 0x0000ff,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/3.png'
                                }
                            },
                            {
                                // color: 0xff00ff,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/4.jpg'
                                }
                            },
                            {
                                // color: 0x04d0ff,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/5.jpg'
                                }
                            },
                            {
                                // color: 0xad0fd2,
                                map: {
                                    $three: 'texture',
                                    file: '/threejs/img/6.jpg'
                                }
                            },

                        ]
                    },
                    {
                        color: 0xfafafa,
                        map: {
                            $three: 'texture',
                            file: '/threejs/img/4.jpg'
                        }
                    },
                    {
                        color: 0x04d0ff,
                        map: {
                            $three: 'texture',
                            file: '/threejs/img/5.jpg'
                        }
                    },
                    {
                        color: 0xad0fd2,
                        // map: {
                        //     $three: 'texture',
                        //     file: '/threejs/img/6.jpg'
                        // }
                    },

                ]
            }
        };