Question

当我尝试使用gltf viewer加载我的对象时，会出现该对象。但是当我尝试使用本地服务器加载相同的东西时，该对象不会出现。

在示例文件夹中，我尝试使用加载的相同命令加载Duck.gltf，我可以看到该对象。

是否有任何动态方法可以自动设置对象的x，y和z共同位置的位置并查看模型？

的index.html

        <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <title>MIT Block</title>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
                        <style>
                            body {
                                font-family: Monospace;
                                background-color: #222222;
                                margin: 0px;
                                overflow: hidden;
                            }
                        </style>
                    </head>

                    <body>
                    <div id="container"></div>

                        <script src="../build/three.js"></script>
                        <script src="js/controls/OrbitControls.js"></script>
                        <script src="js/loaders/GLTFLoader.js"></script>

                        <script>
                       var camera, scene, renderer;
                var geometry, material, mesh;

                init();
                animate();

                function init() {

                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1 , 1000);


                controls = new THREE.OrbitControls(camera);

                    // How far you can orbit vertically, upper and lower limits.
                    controls.minPolarAngle = 0;
                    controls.maxPolarAngle = Math.PI;


                    // How far you can dolly in and out ( PerspectiveCamera only )
                    controls.minDistance = 0;
                    controls.maxDistance = Infinity;

                    this.enableZoom = true; // Set to false to disable zooming
                    this.zoomSpeed = 1.0;


                    controls.enablePan = true; // Set to false to disable panning (ie vertical and horizontal translations)

                    controls.enableDamping = true; // Set to false to disable damping (ie inertia)
                    controls.dampingFactor = 0.25;


                scene = new THREE.Scene();

                // Instantiate a loader
                var loader = new THREE.GLTFLoader();

                // Load a glTF resource
                loader.load( './models/gltf/Building/MITblock.gltf', function ( gltf ) {
                    scene.add( gltf.scene );

                console.log(gltf.scene);
                    gltf.animations; // Array<THREE.AnimationClip>
                    gltf.scene;      // THREE.Scene
                    gltf.scenes;     // Array<THREE.Scene>
                    gltf.cameras;    // Array<THREE.Camera>
                } );


                var light = new THREE.AmbientLight(0xffffff);
                scene.add(light);

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

                }

                function animate() {
                  requestAnimationFrame( animate );
                  renderer.render( scene, camera );

                }
                        </script>

                    </body>
                </html>

如何在三个js中动态设置对象位置

0 个答案: