Проблемы со скайбоксом и OrbitControls

в настоящее время следует руководству от 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
person Knave    schedule 13.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте использовать этот файл js

OrbitControls.js

person user6795317    schedule 14.11.2019