Я использую three.js
и скрипт, похожий на OrbitControls
, в качестве контроллера. В моем файле main.js
есть THREE.Group()
, который передается контроллеру в качестве аргумента. Оттуда я пытаюсь повернуть всю группу.
Проблема 1: как только группа передана контроллеру, я больше не могу получить доступ к ее свойствам, не сделав копию
Проблема 2: копия не содержит всего THREE.Group()
, а только первого потомка
Я работаю над этим уже несколько часов и перепробовал около 50 разных вещей, включая все, что имеет отношение к stackoverflow. У меня совершенно нет идей, как бороться с этой проблемой.
main.js
let container;
let camera;
let controls;
let game;
let renderer;
let scene;
function init() {
container = document.querySelector('#scene-container');
scene = new THREE.Scene();
const fov = 35;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 100;
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
//***** This is the important line ******
controls = new THREE.ObjectControls(camera, container, game);
game = new THREE.Group();
scene.add(game);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial();
var mesh1 = new THREE.Mesh(geometry, material);
game.add(mesh1);
var mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.set(0,1,0);
game.add(mesh2);
renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
}
init();
ObjectControls.js
THREE.ObjectControls = function (camera, domElement, objectToMove) {
mesh = objectToMove;
domElement.addEventListener('mousemove', mouseMove, false);
function mouseMove(e) {
//** objectToMove is undefined :( **
mesh.rotation.y += 3;
}
};
Ожидаемый результат состоит в том, что весь THREE.Group()
game
будет повернут, но результат, который я получаю, заключается в том, что вращается только первый дочерний элемент game
, в данном случае mesh1
.
controls = new THREE.ObjectControls(camera, container, game);
game = new THREE.Group();
В вашем коде есть ошибка, так как вы передаете переменную undefined
game
в ctor ObjectControls
. Если вы назначите новый объект game
одной строкой позже, ObjectControls
не будет ссылаться на эту переменную.
Идея состоит в том, чтобы сначала назначить групповой объект game
, а затем создать ObjectControls
. Вы по существу переключаете обе линии.
three.js R105
о боже какое простое решение я плачу большое спасибо