I need help with implementing two functionalities: 1) SHIFT + click on an object to remove it from the scene, and 2) a clear button to remove all objects from the scene.
Check out the live version here: https://cs12students.dce.harvard.edu/~amarkham/sandbox/
While adding objects from the 'Equipment' tab, some objects are not cleared properly. When loading an object, I add it to the scene and then push it to an array called 'objects'. The goal is to remove both the object from the scene and the corresponding entry in the 'objects' array when deleting an object.
Below is the relevant code snippet:
let objects = [];
window.addEventListener('keydown', function(e) {userPress = e.keyCode;});
window.addEventListener('keyup', function(e) {userPress = undefined;});
function init() {
...
dragControls = new THREE.DragControls(objects, camera, renderer.domElement);
dragControls.addEventListener('dragstart', event => {
//if shift pressed on click, remove target object from scene and objects array
if (userPress === 16) {
event.object.material = undefined;
event.object.geometry = undefined;
event.object.parent.remove(event.object);
objects.splice(event.target, 1);
console.log(objects.length);
console.log(objects);
}
//else disable orbit control, show selected
else {
controls.enabled = false;
event.object.material.transparent = true;
event.object.material.opacity = 0.75;
}
});
//bind y position to 0
dragControls.addEventListener('drag', event => {
event.object.position.y = 0;
});
//show unselected if object present on dragend
dragControls.addEventListener('dragend', event => {
if (event.object.material == undefined) {}
else {
controls.enabled = true;
event.object.material.transparent = false;
event.object.material.opacity = 1.0;
}
});
...
//dat.GUI
gui = new dat.GUI();
guiProperty = {
reset: resetCamera,
clear: function() {clearScene();},
decimator: function() {getOBJ('decimator_12G_4K');},
atem_mini_pro: function() {getOBJ('atem_mini_pro');},
macbook_pro_13: function() {getOBJ('macbook_pro_13');}
};
var lightFolder = gui.addFolder('Lights');
lightFolder.add(keyLight, 'intensity', 0, 2).name('key light');
lightFolder.add(keyLight.position, 'x', -50, 50).name('key light x');
lightFolder.add(keyLight.position, 'y', 0, 100).name('key light y');
lightFolder.add(keyLight.position, 'z', -50, 50).name('key light z');
lightFolder.add(ambientLight, 'intensity', 0, 5).name('ambient light');
var objFolder = gui.addFolder('Equipment');
objFolder.add(guiProperty, 'decimator').name('Decimator 4K');
objFolder.add(guiProperty, 'atem_mini_pro').name('Atem Mini Pro');
objFolder.add(guiProperty, 'macbook_pro_13').name('MacBook Pro 13"');
gui.add(guiProperty, 'reset').name('Reset');
gui.add(guiProperty, 'clear').name('Clear');
...
}
function getOBJ(name) {
var modelPath = '../assets/models/' + name + '.obj';
var texturePath = '../assets/textures/' + name + '.jpg';
var newOBJ = new THREE.OBJLoader();
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load(texturePath);
var material = new THREE.MeshPhongMaterial({
map: texture
});
newOBJ.load(modelPath, function(object) {
object.traverse(function(node) {
if (node.isMesh) {
node.material = material;
node.castShadow = true;
}
});
object.name = name;
objects.push(object); //push mesh to objects array
scene.add(object); //add mesh to scene
console.log(objects.length);
console.log(objects);
});
function clearScene() {
if (objects.length > 0) {
objects.forEach(function(object) {
if (object.isMesh && object.name != '')
object.material = undefined;
object.geometry = undefined;
object.parent.remove(object);
objects.splice(object, 1);
});
}
}
If you have any insights or suggestions, I would greatly appreciate your input! Discovering Three.js has been quite exhilarating for me.