We Keep Coding

Parse shape movement from createjs tween?

I'm trying to pre-calculate the bounding boxes of objects in a createjs file.
I have a simple recursive loop that loops over the tween.
I'm having trouble understanding how the data is stored.
My understanding is so far:
tween._stephead - the start of the tween
tween._stephead.next - the next tween target, with multiple .next objects
and mixed in between there seem to be some ease objects.
For each of the tween targets, I read the props, and move the bounding box of my shape according to the values x and y.
This seems to work okay for single objects on a tween, but as soon as there are multiple objects in a tween, this falls apart, due to the fact that its stored in an array, and objects not in the array are still visible on screen.
Ive looked over the API and haven't found any other way to do pre-calculation of objects movements... Am I going about this right?

I ended up using a simpler method, just play the demo though without displaying it to the user.
for (var f=0; f<totalFrames; f++) {
stage.update();
var c = exportRoot.numChildren;
while(c--) {
var child = exportRoot.children[c];
...
}
}

Remove object from three js scene by selecting it

My three js scene contains many OBJ models, some of which are preloaded with the scene, some of which are added to the scene via button click.
A user of my application may add an object but then decide to remove it. I am trying to figure out how to this but need guidance.
Ideally I would do this my holding shift and clicking the object to delete, or by adding the object to a group with shift + select and then deleting with a keyboard press (similar to the grouping here: https://threejs.org/examples/?q=drag#misc_controls_drag).
I would imagine the first way is easier to implement as I had a lot of trouble trying to group the OBJ models this way previously (I think due to their associated MTL files preventing their material being of type Lambert).
Thank you for your support!

If you are able to identify the object by raycasting from the 'Shift-Click' event then you should be able to go up to the object's parent and remove it. The next animate frame will not draw it.
const intersects = raycaster.intersectObjects( objects, true );
if (intersects.length > 0) {
const doomed = intersects[0].object;
doomed.parent.remove(doomed);
}

Webgl three.js Dependency of several objects

I have a problem with the dependency of objects. I want to make one object dependent on two other objects. If I change the position of one parent object (for example the y-Position), the dependent object (the child object) should rotate und should also move.
Here is a link where I realized it on a picture. On the left side is the initial state, on the right side the changed condition. The Cylinder should be dependent on the two boxes. That means that the cylinder is the child object and the boxes should be both parent objects of this child object.
I tried it with using parent and child properties, but I could not make the child object dependent on two parent objects.
Can someone help me?
This is my current code, but the lookAt Function does not work correctly.
//cube 1
var cube=new THREE.BoxGeometry(4,4,4);
var material=new THREE.MeshBasicMaterial ({ color: 0xffffff });
mesh1=new THREE.Mesh(cube,material);
mesh1.position.set(-2,2,0);
scene.add(mesh1);
//cube 2
var cube2=new THREE.BoxGeometry(2,2,2);
var material=new THREE.MeshBasicMaterial ({ color:0x000000 });
mesh2=new THREE.Mesh(cube2,material);
mesh2.position.x=6;
mesh2.position.y=2;
//mesh2.position.y=-2;
scene.add(mesh2);
//cylinder
var cylinder=new THREE.CylinderGeometry(1,1,6,30);
var material=new THREE.MeshBasicMaterial({ color:0xff3399 });
mesh3=new THREE.Mesh(cylinder,material);
mesh1.add(mesh3);
mesh3.lookAt(mesh2.position);

You need to two levels of hierarchy, eg:
cube1.add(cylinder)
cylinder.add(cube2)

Yeah, 2pha is right actually. I think what he actually needs is something like this (note you'll need to scale the cylinder or move the squares unless they are exactly cylinder height apart):
cylinder.position.x=cube1.position.x
cylinder.position.y=cube1.position.y
cylinder.position.z=cube1.position.z
cylinder.lookAt(cube2.position)

You may be able to do what you're after with the lookAt function on the Object3D class.
eg.
Add your cylinder as a child of cube1 so moving cube1 will also move the cylinder.
cube1.add(cylinder)
then when cube1 (or / and cube2) is moved call the lookAt function on cylinder to look at the cube2's position.
cylinder.lookAt(cube2.position)

Three.js - How do I use the BoxHelper on an Object3D with children?

I'd like to use the THREE.BoxHelper to create a bounding box for an Object3D that has children. The motivation is so that I can render a wireframe bounding box for the object, without diagonals on the box's faces. Looking at the source code for BoxHelper, it looks like it doesn't take the object's children into account, which is a problem for my app, since every object has children.
Is there a way to get the BoxHelper to include the object's children? Alternatively, is there a good way to use the BoundingBoxHelper (which does include children), and render it without diagonals?

If you want create a THREE.BoxHelper for an object that has children, you can use this pattern:
// box helper
boxHelper = new THREE.BoxHelper( parent );
boxHelper.material.color.set( 0xffffff );
scene.add( boxHelper );
In your render loop, you may have to do this:
boxHelper.update();
three.js r.85

How to remove children from Layer without removing events associated to them - KineticJS

This question is related with one I asked before here. I'm currently using KineticJS 4.0.5 and I'm using multiple layers to display some shapes with different properties. Since I need to change the layers contents frequently I'm using removeChildren to remove a layer content, but it seems that removeChildren also removes the events associated to childrens. I would like to remove the layer childrens without removing their events because I may have to add them to the layer again.
I tried to set the layer.childrens attribute equal to an empty Array instead of using the removeChildren function. At first it seemed to work but on some cases, some weird things happen :/ Some shapes disappear and the only way to get them back is by setting their Z index. I think the main problem with this approach is related with some properties that must be reseted when contents are removed from the layer, but I don't know which are they.
I also tried to set the events again on each shape before drawing them but it doesn't work... They remain static on the screen... I event tried to use the setDraggable(true) on all shapes before drawing them but no luck... Do I need to create the objects again and apply the events to them again each time I want to redraw a layer with shapes I used before? Or would it be a good approach to store layers for each screen on my application? (I can have a lot of different screens, which would result in a lot of layers and only one would be displayed at a time...)
If you know a solution for this problem please tell me. I really need to solve this problem because it is very important for my project to be able to draw and redraw :/
Thank you!

Sounds to me that what you need is a way to visually remove objects from layers, but not actually delete them. Instead of using remove, try creating a new layer specifically for storage, where your main group within that layer is hidden. You'll want this group, and its layer, to be globals for easy access. Then, when you need to remove an object from view, use moveTo to move it into storage, and moveTo again to restore it to view.
var gObj = {storage : '', storageGroup : ''};
gObj.storage = new Kinetic.Layer();
gObj.storageGroup = new Kinetic.Group({name:'storage', x:0, y:0});
gObj.storage.add(gObj.storageGroup);
// assumes stage is already built
stage.add(gObj.storage);
gObj.storageGroup.hide();
function wareHouse(obj, group, store) {
// obj is an object to store when store === true, otherwise it's a name or id when retreiving, group is the group where object either is or needs to be, store is a boolean value
if (store) {
obj.moveTo(gObj.storageGroup);
} else {
// change the dot to pound ('.' = '#') if using id's
var box = gObj.storageGroup.get('.' + obj)[0];
box.moveTo(group);
}
var parent = group.getLayer();
parent.draw();
}