如何从 three.js 编辑器中添加控件答案

【问题标题】：How do you add controls from inside the three.js editor如何从 three.js 编辑器中添加控件
【发布时间】：2017-03-11 16:45:12
【问题描述】：

首先，感谢您的帮助和耐心！我对编码相当陌生，并且一直在使用可从three.js 下载的示例。我能够创建一个非常基本的场景，加载我的网格/灯光、控件等，一切都运行良好。

但是，我也一直在尝试从浏览器编辑器 (https://threejs.org/editor/) 发布场景，但我不知道如何向摄像机添加轨道控制？发布场景后，我得到一个 .html、.json 和几个 javascript 文件 app.js + three.min.js。如果有人可以帮助我或指出正确的方向将轨道控件放置在 app.js 文件中的哪个位置，或者是否有一个选项卡或我在编辑器中缺少的东西？即使在浏览器编辑器中添加脚本也很棒！

我有点难过，因为我浏览器中编辑器的 html 的设置似乎与我一直使用的示例中的 html 不同。

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

编辑：获取 OrbitControls.js 并复制代码。打开您的编辑器并选择场景对象。创建一个新脚本并将 OrbitControls 代码粘贴到其中。将其命名为 OrbitControls。

在场景对象上创建一个新脚本并将其粘贴到其中：（确保此脚本位于 OrbitControls 之后）

var controls;

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.enableZoom = false;

function update(event)
{
    controls.update();
}

function render() {
    renderer.render( scene, camera );
}

应该可以。至少对我有用。希望对您有所帮助！

编辑： 您还可以从存储库下载 three.js，它包括编辑器。然后，您可以像往常一样通过 html 添加自己的 js 库。

【讨论】：

【解决方案2】：

我最终在场景对象上创建了一个脚本，并从中动态加载了一个外部 OrbitControls。

这是我使用的代码。

var orbitcontrols = document.createElement('script');
var controls = null;
orbitcontrols.src = "https://threejs.org/examples/js/controls/OrbitControls.js";
orbitcontrols.onload = function () {
    if (!controls && THREE.OrbitControls) controls = new THREE.OrbitControls ( camera );
};
document.head.appendChild(orbitcontrols);

不幸的是，它在编辑器上相当有问题（我可以放大但不能旋转），但一旦发布它就可以很好地工作。我没有进行太多调查，但我怀疑它与编辑器自己的控件有冲突。

【讨论】：

【解决方案3】：

使用上一个答案，编辑行为不端。相反，我重构了他的解决方案，将以下代码放在场景对象的脚本中，

var controls = null;
if (!controls && THREE.OrbitControls) controls = new THREE.OrbitControls ( camera );

即使没有控件，这也使编辑器可以完美地工作。然后当我发布场景时，我在 index.html 中添加了额外的脚本标签。这些控件在本地提供已发布的 index.html 时效果很好。

<body ontouchstart="">
    <script src="js/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src="js/app.js"></script>

    <script>.....

【讨论】：

【解决方案4】：

截至 2020 年 8 月以上答案不再有效。由于three.js 已移至ES6，并且编辑器现在使用模块发布文件，因此上述解决方案将不起作用。现在你必须下载 this 到你的 js 文件夹。拥有它后，您将需要对其进行编辑。

打开 OrbitControls.js 并替换它

import {
    EventDispatcher,
    MOUSE,
    Quaternion,
    Spherical,
    TOUCH,
    Vector2,
    Vector3
} from "../../../build/three.module.js";

有了这个

import {
    EventDispatcher,
    MOUSE,
    Quaternion,
    Spherical,
    TOUCH,
    Vector2,
    Vector3
} from "./three.module.js";

现在保存并打开 app.js 并替换它

this.setCamera( loader.parse( json.camera ) );

有了这个

this.setCamera( loader.parse( json.camera ) );
var controls = new OrbitControls( camera, renderer.domElement );

现在打开 index.html 并使用以下代码更新它

import { OrbitControls } from './js/OrbitControls.js';
window.OrbitControls = OrbitControls;

保存 index.html。现在，如果您重新加载页面，您将一切正常

你可以阅读更多关于here的信息。

【讨论】：

【解决方案5】：

三个是密封的（或阻止扩展性），因此无法将原始 OrbitControls 脚本添加到其中。因此，请使用以下要点在 Three.js 编辑器中加载 OrbitControls。

https://gist.github.com/expressiveco/030e6bfa4cdfc39735824b8c743d6223#file-orbitcontrols-js

用法：使用以下内容加载它（我使用 githack.com 将 gist 用作脚本。）

function loadOrbitControls()
{
    var orbitcontrols = document.createElement('script');
    var controls = null;
    // Original OrbitControls: "https://threejs.org/examples/js/controls/OrbitControls.js";
    // Modified OrbitControls : https://gist.githubusercontent.com/expressiveco/030e6bfa4cdfc39735824b8c743d6223/raw/dd5df633e4cd3e774f032ee640290db8e22af2d8/OrbitControls.js;
    orbitcontrols.src = "https://gist.githack.com/expressiveco/030e6bfa4cdfc39735824b8c743d6223/raw/dd5df633e4cd3e774f032ee640290db8e22af2d8/OrbitControls.js";
    orbitcontrols.onload = function () {
        if (!controls && MyTHREE.OrbitControls) controls = new MyTHREE.OrbitControls( camera, renderer.domElement );
    };
    document.head.appendChild(orbitcontrols);
}

【讨论】：