Как добавить элементы управления из редактора three.js

Question

сначала, спасибо за помощь и терпение! Я довольно новичок в кодировании и работаю с примерами, доступными для загрузки из трёх. Я могу создать очень базовую сцену, загрузить свою сетку/огни, элементы управления и так далее, и все отлично работает.

Однако, я также пытаюсь опубликовать сцену из редактора браузера (https://threejs.org/editor/), и я не могу понять, как добавить на камеру элементы управления на орбите? После публикации сцены я получаю файлы .html, .json и пару javascript app.js + three.min.js. Если кто-то может помочь мне или указать мне в правильном направлении, где разместить элементы управления орбиты в файле app.js или если есть вкладка или что-то, что мне не хватает в редакторе? Даже там, где можно добавить скрипт в редактор браузера, это было бы потрясающе!

Я немного тупик, потому что кажется, что html из редактора в моем браузере настроен иначе, чем htmls в примерах, с которыми я работал.

Answer 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); 
} 

Это должно работать. По крайней мере, работал на меня. Надеюсь, поможет!

EDIT: Вы также можете скачать three.js из репозитория и включить редактор. Затем вы можете добавить свои собственные библиотеки js через html, как обычно.

Answer 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); 

К сожалению, это довольно глючный в редакторе (я могу увеличить наизнанку, но не вращается), но это работает красиво когда-то опубликованы. Я не расследовал много, но я подозреваю, что это conflics с собственными средствами управления редактором.