three.js - 如何在 Three.js Editor 项目中使用 OrbitControls

Question

使用 Three.js Editor ，我导出了一个带有简单场景的项目(两个框)。一切正常——我从我添加的 PerspectiveCamera 中看到了两个框。我想用鼠标滚轮控制我的相机 View 。这是 index.html 中的脚本:

    <script type="module">
        import * as THREE from './js/three.module.js';
        import { APP } from './js/app.js';
        import {OrbitControls} from './js/OrbitControls.js';  //  I added this part.

        // OrbitControls here?

        var loader = new THREE.FileLoader();
        loader.load( 'app.json', function ( text ) {
            var player = new APP.Player( THREE );
            player.load( JSON.parse( text ) );
            player.setSize( window.innerWidth, window.innerHeight );
            player.play();
            document.body.appendChild( player.dom );
            window.addEventListener( 'resize', function () {
                player.setSize( window.innerWidth, window.innerHeight );
            } );
        } );
    </script>

我如何为此使用 OrbitControls？我尝试过的一切(基于类似的线程)都会导致未定义事物的错误(例如“相机”或“控件”，具体取决于我放置的位置)。

或者(甚至更理想)，有没有办法在 Three.js 编辑器本身中定义我想要的相机行为？那会特别棒!

编辑

感谢@Mugen87 的原始答案(基本上，如果不编辑 app.js，这是不可能的)现在是问题的状态。我从我的 index.html(上面)中删除了 OrbitControls 导入并将它添加到我的 app.js。所以我的 app.js 目前看起来像这样:

import {OrbitControls} from './OrbitControls.js';
var APP = {
  Player: function ( THREE ) {
    window.THREE = THREE; // FIX for editor scripts (they require THREE in global namespace)
    var loader = new THREE.ObjectLoader();
    var camera, scene, renderer;
    var events = {};
    var dom = document.createElement( 'div' );
    dom.className = "threejs-app";
    this.dom = dom;
    this.width = 500;
    this.height = 500;
    this.load = function ( json ) {
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.setClearColor( 0x000000 );
        renderer.setPixelRatio( window.devicePixelRatio );
        var project = json.project;
        if ( project.shadows ) renderer.shadowMap.enabled = true;
        if ( project.vr ) renderer.xr.enabled = true;
        dom.appendChild( renderer.domElement );
        this.setScene( loader.parse( json.scene ) );
        this.setCamera( loader.parse( json.camera ) );
        events = {
            init: [],
            start: [],
            stop: [],
            keydown: [],
            keyup: [],
            mousedown: [],
            mouseup: [],
            mousemove: [],
            touchstart: [],
            touchend: [],
            touchmove: [],
            update: []
        };
        var scriptWrapParams = 'player,renderer,scene,camera';
        var scriptWrapResultObj = {};
        for ( var eventKey in events ) {
            scriptWrapParams += ',' + eventKey;
            scriptWrapResultObj[ eventKey ] = eventKey;
        }
        var scriptWrapResult = JSON.stringify( scriptWrapResultObj ).replace( /\"/g, '' );
        for ( var uuid in json.scripts ) {
            var object = scene.getObjectByProperty( 'uuid', uuid, true );
            if ( object === undefined ) {
                console.warn( 'APP.Player: Script without object.', uuid );
                continue;
            }
            var scripts = json.scripts[ uuid ];
            for ( var i = 0; i < scripts.length; i ++ ) {
                var script = scripts[ i ];
                var functions = ( new Function( scriptWrapParams, script.source + '\nreturn ' + scriptWrapResult + ';' ).bind( object ) )( this, renderer, scene, camera );
                for ( var name in functions ) {
                    if ( functions[ name ] === undefined ) continue;
                    if ( events[ name ] === undefined ) {
                        console.warn( 'APP.Player: Event type not supported (', name, ')' );
                        continue;
                    }
                    events[ name ].push( functions[ name ].bind( object ) );
                }
            }
        }
        dispatch( events.init, arguments );
        };
        this.setCamera = function ( value ) {
            camera = value;
            camera.aspect = this.width / this.height;
            camera.updateProjectionMatrix();
        };
        this.setScene = function ( value ) {
            scene = value;
        };
        this.setSize = function ( width, height ) {
            this.width = width;
            this.height = height;
            if ( camera ) {
                camera.aspect = this.width / this.height;
                camera.updateProjectionMatrix();
            }
            if ( renderer ) {
                renderer.setSize( width, height );
            }
        };
        function dispatch( array, event ) {
            for ( var i = 0, l = array.length; i < l; i ++ ) {
                array[ i ]( event );
            }
        }
        var time, prevTime;
        function animate() {
            time = performance.now();
            try {
                dispatch( events.update, { time: time, delta: time - prevTime } );
            } catch ( e ) {
                console.error( ( e.message || e ), ( e.stack || "" ) );
            }
            renderer.render( scene, camera );
            prevTime = time;
        }
        this.play = function () {
            prevTime = performance.now();
            document.addEventListener( 'keydown', onDocumentKeyDown );
            document.addEventListener( 'keyup', onDocumentKeyUp );
            document.addEventListener( 'mousedown', onDocumentMouseDown );
            document.addEventListener( 'mouseup', onDocumentMouseUp );
            document.addEventListener( 'mousemove', onDocumentMouseMove );
            document.addEventListener( 'touchstart', onDocumentTouchStart );
            document.addEventListener( 'touchend', onDocumentTouchEnd );
            document.addEventListener( 'touchmove', onDocumentTouchMove );
            dispatch( events.start, arguments );
            renderer.setAnimationLoop( animate );
        };
        this.stop = function () {
            document.removeEventListener( 'keydown', onDocumentKeyDown );
            document.removeEventListener( 'keyup', onDocumentKeyUp );
            document.removeEventListener( 'mousedown', onDocumentMouseDown );
            document.removeEventListener( 'mouseup', onDocumentMouseUp );
            document.removeEventListener( 'mousemove', onDocumentMouseMove );
            document.removeEventListener( 'touchstart', onDocumentTouchStart );
            document.removeEventListener( 'touchend', onDocumentTouchEnd );
            document.removeEventListener( 'touchmove', onDocumentTouchMove );
            dispatch( events.stop, arguments );
            renderer.setAnimationLoop( null );
        };
        this.dispose = function () {
            while ( dom.children.length ) {
                dom.removeChild( dom.firstChild );
            }
            renderer.dispose();
            camera = undefined;
            scene = undefined;
            renderer = undefined;
        };
        //
        function onDocumentKeyDown( event ) {
            dispatch( events.keydown, event );
        }
        function onDocumentKeyUp( event ) {
            dispatch( events.keyup, event );
        }
        function onDocumentMouseDown( event ) {
            dispatch( events.mousedown, event );
        }
        function onDocumentMouseUp( event ) {
            dispatch( events.mouseup, event );
        }
        function onDocumentMouseMove( event ) {
            dispatch( events.mousemove, event );
        }
        function onDocumentTouchStart( event ) {
            dispatch( events.touchstart, event );
        }
        function onDocumentTouchEnd( event ) {
            dispatch( events.touchend, event );
        }
        function onDocumentTouchMove( event ) {
            dispatch( events.touchmove, event );
        }
    }
};
export { APP };

旁注:我注意到已经有很多由 Three.js 编辑器生成的事件监听器。他们目前似乎没有做任何事情，但也许他们可以从脚本外部调用它们，例如在我的 index.html 中？？？

无论如何，我需要在 app.js 文件中的何处以及如何放置 OrbitControls，以便使用鼠标滚轮控制 PerspectiveCamera 的 Y 轴位置？

Answer 1

Alternatively (and even more ideally), is there a way to define the camera behavior I want within the Three.js Editor itself?

抱歉不行。您只能使用由 EditorControls 定义的默认控件。 , 一个类似于 OrbitControls 的类但只在编辑器中使用。

How do I utilize OrbitControls for this?

如果不改变，恐怕这是不可能的 app.js .相机和渲染器在 APP.Player 内创建并且不可公开访问。由于您需要两个对象来创建 OrbitControls ，不可能在 index.html 中实例化控件.

如果您决定更改 app.js , 如果包含 OrbitControls，请使用以下代码创建控件通过 ES6 导入:

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

three.js R112