如何从three.js编辑器内部添加控件 [英] How do you add controls from inside the three.js editor

问题描述

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

first, thanks for your help and patience! I am fairly new to coding and have been working with the examples available for download from three.js. I am able to create a very basic scene, load my mesh/lights, controls and so on and everything is working great.

但是，我也一直试图通过浏览器编辑器发布场景( https://threejs.org/editor /)，我不知道如何向相机添加环绕运动控件?发布场景之后，我得到了一个.html，.json和几个javascript文件app.js + three.min.js.如果有人可以帮助我或向正确的方向指出在app.js文件中放置轨道控件的位置，还是编辑器中缺少选项卡或其他内容?即使在浏览器编辑器中的脚本添加位置也很棒！

However, I have been also trying to publish a scene from the browser editor (https://threejs.org/editor/) and I can't figure out how to add orbiting controls to the camera? After I publish the scene, I get an .html, .json and a couple javascript files app.js + three.min.js. If someone could help me out or point me in the right direction where to place the orbit controls within the app.js file or if there is a tab or something I am missing in the editor? Even where to add the script within the browser editor it would be awesome!

我有些困惑，因为似乎浏览器中来自编辑器的html设置与我正在使用的示例中的html有所不同.

I am a bit stumped because it seems as though the html from the editor in my browser is set up differently from the htmls in the examples I have been working with.

推荐答案

抓取OrbitControls.js并复制代码.打开编辑器，然后选择场景对象.创建一个新脚本，然后将OrbitControls代码放入其中.将其命名为OrbitControls.

grab the OrbitControls.js and copy the code. Open your editor and select the scene object. Create a new script and past the OrbitControls code into it. Name it something like OrbitControls.

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

Create a new script on the scene object and paste this into it: (Make sure this script comes after the 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 );
}

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

That should work. At least worked for me. Hope it helps!

您也可以从存储库中下载three.js，其中包括编辑器.然后，您可以像通常那样通过html添加自己的js库.

You could also download the three.js from the repository and it includes the editor. You can then add in your own js libraries through the html like you normally would.

这篇关于如何从three.js编辑器内部添加控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！