Question

我从three.js开始。在尝试实施轨道控制后，我遇到了一些错误。看起来很简单，但是我找不到我的错误的好的解决方案。当我试图实现类似

的控件时

var controls = new THREE.OrbitControls(camera, renderer.domElement);

我遇到这些错误

Cannot use import statement outside a module and THREE.OrbitControls is not a constructor

在开始新脚本之前，我同时添加了threejs和orbitcontrols。我在这里做什么错了？


        <script src="scripts/three.js"></script>   
        <script src="scripts/OrbitControls.js"></script>

        <script type="text/javascript">
                var scene = new THREE.Scene();

                var camera = new
                THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);

                var renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setClearColor(0x888888,1)
                document.body.appendChild(renderer.domElement);

                var controls = new THREE.OrbitControls(camera, renderer.domElement);

Answer 1

在线资源，Threejs主机，示例代码

           <script type="module">
            import * as THREE from 'https://three.ipozal.com/threejs/resources/threejs/r110/build/three.module.js';
            import { OrbitControls } from 'https://three.ipozal.com/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';
            import { OBJLoader2 } from 'https://three.ipozal.com/threejs/resources/threejs/r110/examples/jsm/loaders/OBJLoader2.js';

            function main() {
.....
</script>

Answer 2

看来您的OrbitControls.js版本是ES6模块。这意味着您必须像这样导入控件：

<script type="module">

    import * as THREE from 'scripts/three.module.js';
    import { OrbitControls } from 'scripts/OrbitControls.js';

     var scene = new THREE.Scene();

     var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888,1)
    document.body.appendChild(renderer.domElement);

    var controls = new OrbitControls(camera, renderer.domElement);

请注意，以上代码使用了three.module.js构建文件，您可以在官方git仓库的构建目录中找到该文件。如果您不熟悉ES6模块，建议您学习有关此主题的现有资源。例如。 https://exploringjs.com/es6/ch_modules.html

three.js R109

Answer 3

对我有用的是包括@ kaveh-eyni提到的type =“ module”，然后npm直接将“已弃用的”模块安装到我的项目中。

npm install --save three-orbitcontrols
npm i --save three-gltf-loader

然后

<script type="module">
import * as THREE from 'three/build/three.module'
import OrbitControls from 'three-orbitcontrols'
import GLTFLoader from 'three-gltf-loader

错误：无法在模块THREE.OrbitControl之外使用import语句

3 个答案: