天空盒 + OrbitControls 问题答案

【问题标题】：skybox + OrbitControls issues天空盒 + OrbitControls 问题
【发布时间】：2019-11-14 18:08:14
【问题描述】：

目前正在遵循https://redstapler.co/create-3d-world-with-three-js-and-skybox-technique/ 的教程，但在尝试运行它时不断遇到这些错误。

OrbitControls.js:10 Uncaught SyntaxError: Cannot use import statement outside a module
index.html:24

Uncaught TypeError: THREE.OrbitControls is not a constructor
    at init (index.html:24)
    at index.html:56

Failed to load resource: net::ERR_EMPTY_RESPONSE :8383/favicon.ico:1

问题似乎与轨道控制有关，一旦删除与轨道控制相关的代码，就会出现图片。

请在下面找到我的代码。我该如何解决这个问题？

谢谢

 <html>
        <head>
            <meta charset=UTF-8 />
            <link rel="stylesheet" type="text/css" href="style.css" />
        </head>
        <body>
            <script src="three.min.js"></script>
            <script src="OrbitControls.js"></script>
            <script>


                let scene, camera, renderer;
                function init() {
                    scene = new THREE.Scene;

                    camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 45, 30000);
                    camera.position.set(-900, -200, -900);

                    renderer = new THREE.WebGLRenderer({antialias: true});
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    document.body.appendChild(renderer.domElement);

                    let controls = new THREE.OrbitControls(camera);
                    controls.addEventListener('change', renderer);
                    controls.minDistance = 500;
                    controls.maxDistance = 1500;

                    let materialArray = [];
                    let texture_ft = new THREE.TextureLoader().load('arid2_ft.jpg');
                    let texture_bk = new THREE.TextureLoader().load('arid2_bk.jpg');
                    let texture_up = new THREE.TextureLoader().load('arid2_up.jpg');
                    let texture_dn = new THREE.TextureLoader().load('arid2_dn.jpg');
                    let texture_rt = new THREE.TextureLoader().load('arid2_rt.jpg');
                    let texture_lf = new THREE.TextureLoader().load('arid2_lf.jpg');

                    materialArray.push(new THREE.MeshBasicMaterial({map: texture_ft}));
                    materialArray.push(new THREE.MeshBasicMaterial({map: texture_bk}));
                    materialArray.push(new THREE.MeshBasicMaterial({map: texture_up}));
                    materialArray.push(new THREE.MeshBasicMaterial({map: texture_dn}));
                    materialArray.push(new THREE.MeshBasicMaterial({map: texture_rt}));
                    materialArray.push(new THREE.MeshBasicMaterial({map: texture_lf}));

                    for (let i = 0; i < 6; i++)
                        materialArray[i].side = THREE.BackSide;

                    let skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
                    let skybox = new THREE.Mesh(skyboxGeo, materialArray);
                    scene.add(skybox);
                    animate();
                }
                function animate() {
                    renderer.render(scene, camera);
                    requestAnimationFrame(animate);
                }
                init();
            </script>
        </body>
    </html>

【问题讨论】：

标签： three.js skybox

【解决方案1】：

试试这个js文件

OrbitControls.js

【讨论】：