Link Gốc: http://demo.vcc.vn/threejs/show.html?file=demo-003-model.json
Mã HTML: 

<!DOCTYPE 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 src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="module">

        import * as THREE from './jsm/three.module.js';
        import { Helper, createClass } from './js/modules/helper.js';
        import App from './js/app.module.js';

        // tạo class kế thừa từ class App
        // 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
        });

        // lấy file json từ url
        var json = Helper.request.queryString("file") || "demo-001.json";

        // load file
        Helper.api.get(json)
            .then(res => {
                // load thành công sẽ tạo đối tượng Demo
                // gán theo vào option selector
                res.selector = "#screen";

                var demo = new Demo(res);
                // phần này không cần
                demo.on('ready', function () {
                    var scene = this.scene, renderer = this.renderer;
                    var model;
                    var self = this;
                });

            })
            .catch(err => {
                console.log(err);
                Helper.query("#screen").append("<h2>Lỗi không xác định</h2>")
            })


    </script>


</body>

</html>

 

File JSON: http://demo.vcc.vn/threejs/demo-003-model.json