Three.js 动态观察控件无法正确初始化_Three.js

Three.js 动态观察控件无法正确初始化

three.js

Three.js 动态观察控件无法正确初始化,three.js,Three.js,我正在尝试用three.js编写STL模型查看器代码如下：  <!doctype html> <html> <head> <title>Enjoy your model</title> <meta charset="utf-8"> <meta http-equiv="X-

我正在尝试用three.js编写STL模型查看器

代码如下：

<!-- prerenderer -->
<!doctype html>
<html>
    
    <head>
        <title>Enjoy your model</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

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

        
        <script src="../libs/STLLoader.js"></script >
        <style type="text/css">
            body        { padding-top:10px; word-wrap:break-word; width: 100vw; height: 100vh; margin: 0; overflow: hidden;}
            form        { text-align: center; }
        </style>
    </head>

    <body>

        
                <div >
                    <form action="/">
                        <input type="submit" value="Back to the homepage!" />
                    </form>
                </div>  
            

        <!-- Div which will hold the Output -->
        <div id="WebGL-output">
        </div>



        <script>

        

                var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.getElementById("WebGL-output").appendChild(renderer.domElement); 

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


        var loader = new THREE.STLLoader();
            loader.load( 'myModel.stl', function ( geometry ) {

                Var mesh = new THREE.Mesh (geometry);
                Mesh.scale.set (0.1, 0.1, 0.1);
                // mesh.rotation.set (- Math.PI / 2, Math.PI / 2, 0);
                // mesh.scale.set (0.3, 0.3, 0.3);
                // mesh.receiveShadow = true;
                Scene.add (mesh);
            } );


        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame( animate );


            renderer.render(scene, camera);
        };

        animate();


        </script>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script >
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="../libs/bootstrap.min.js"></script>
        
    </body>

</html>

我有一个黑屏和

Uncaught TypeError: THREE.STLLoader is not a constructor
    at test2.html:65

及

我只想加载一个stl文件，并有一些环绕它旋转的动态观察控件

编辑：看看这些突然出现的错误，天知道为什么：

Uncaught SyntaxError: Cannot use import statement outside a module
ot OrbitControls
Uncaught ReferenceError: module is not defined
    at STLLoader.js:32
test2.html:51 Uncaught TypeError: THREE.OrbitControls is not a constructor
    at test2.html:51

仅仅加载一个模型有多难

编辑2：我做任何事都是照本宣科的，出现了新的错误，如：

Uncaught SyntaxError: The requested module '../libs/STLLoader.js' does not provide an export named 'STLLoader'

听起来像

根据您包括OrbitControls和STLLoader的方式，通过

或

导入

，您将需要分别从“examples/js”或“examples/jsm”复制

根据您包括OrbitControls和STLLoader的方式，通过

或

导入

，您将需要分别从“examples/js”或“examples/jsm”进行复制。

似乎您正在导入带有

的ES6模块，这是不允许的。我建议您更加熟悉ES6模块。@Mugen87再次感谢Mugen。我正在努力解决问题。似乎您正在导入带有

的ES6模块，这是不允许的。我建议您更加熟悉ES6模块。@Mugen87再次感谢Mugen。我现在正在设法解决这个问题。

Uncaught SyntaxError: Cannot use import statement outside a module
ot OrbitControls
Uncaught ReferenceError: module is not defined
    at STLLoader.js:32
test2.html:51 Uncaught TypeError: THREE.OrbitControls is not a constructor
    at test2.html:51

Uncaught SyntaxError: The requested module '../libs/STLLoader.js' does not provide an export named 'STLLoader'