Currently, I am utilizing three.js
alongside a script similar to OrbitControls
as my controller. Within my main.js
file, I am passing a THREE.Group()
to the controller as an argument with the intention of rotating the entire group.
Issue 1: Once the group is delivered to the controller, accessing its properties directly becomes problematic without creating a duplicate.
Issue 2: The duplicate fails to encompass the complete THREE.Group()
, but instead only retains the initial child.
After extensively working on this task for hours and experimenting with around 50 different solutions, including various resources on stackoverflow, I am at a loss for how to address this predicament.
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;
}
};
The expected outcome is to rotate the entire THREE.Group()
game
, yet the current result only rotates the first child within game
, in this instance mesh1
.