Develop Reference

Ok to store scene object instances as properties of scene?

This is a question about javascript and three.js coding style conventions. I prefer to use the latest ES-whatever conventions.
I'm wondering if instead of doing the usual:
var scene = new THREE.Scene();
var cube = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial(0xffffff))
scene.add(cube)
it would be ok to store the mesh object (and other objects, maybe lights and even camera) as properties of the scene object:
const scene = new THREE.Scene(); // or var, but that's not my question
scene.cube = THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial(0xffffff))
scene.add(scene.cube)
I like the idea of having references to all the three.js objects underneath the scene namespace -- makes it easier for me to access them later. I know I could use this with .name and .getObjectByName but that takes more code and seems messier to me.

There is a field on Object3D derived objects called .userData that you can store stuff that should get saved/serialized. But as far as storing props directly on objects.. It works.. but kinda has potential for problems if you end up overwriting something or later revs of three make use of your property name...
Edit: after reading the other posts here, they raise some good point, and I also wanted to throw out there that you can subclass the built-in three objects and make your own custom type that has your stuff. That might be tidier.

As far as separation of concern goes, you don't want to use Three's objects as data holders. It might seem like an easy way out, but will greatly reduce maintainability of your code. There is nothing preventing you from doing it today, though. Just consider, that you will have
scene.cube
scene.children[0] //same cube
scene.getObjectById(... cube id ...) //same cube
//... byName, ...byProperty etc. all pointing to the same cube
Remember, Scene extends Object3D with all its methods and properties, so, in the example scene below all objects are Object3D with each having children[] property.
[scene]
+----^-----------------------------+
[chairGroup] [light]
+--^--+-----+-----+-----+------+
[leg] [leg] [leg] [leg] [back] [seat]
Doesn't each node above look similar to DOM's Element?
I would encourage you to think about your scene as a tree. In fact, any UI is an n-tree of elements: web, mobile, X11 etc., and every UI framework is a tool to manipulate such tree. All approaches you use to manipulate DOM tree effectively work here.
Hence, below are various ways you can organize your code, from simple to more complex:
hello world rotating cube example is fine, 15-20 lines of code are ok as-is
rendering context: move scene, camera and renderer into some context object you can pass around your layers. Think of it as an equivalent of document in the browser.
high-level "Shadow DOM": organize a tree of your own components that each handle a group of 3d objects, make them react to events - external from UI clicks etc., or from Three, like visitor pattern during rendering. You can either keep references to 3d objects on these components, or recursively pass your structure to a function to adjust scene's hierarchy. Examples of such components in your tree could be Chair, Building, Planet, Starship etc.
data model: it might be tempting to store some data inside your components, but you should have a distinction between external data, usually a bit global, like numeberOfPlanets, timeOfDay etc., and internal data, like current rotation speed of a planet. Latter can be kept as part of your scene domain components.
full MVC: as with any UI, model-view-controller is applicable here. E.g. you can follow this intro into three.js MVC.
mediators, observers and usual workflows. See, e.g. my answer here.
... all the way to Redux-like immutable state management system
I hope, this answer will help people do some tactical architecture around Three.js that suits their project best.

Animate CC - getChildByName canvas vs WebGL

Afternoon. I have an FLA with a single MovieClip on the stage - the clip is named myThing in the Library and also has an instance name of myThing. On another layer I have the following script:
this.myThing=this.getChildByName("myThing");
console.log(this.myThing);
When I run this in a WebGL project it works as I'd expect and returns a JS object but when I run the same thing in a canvas project (which is what I need to use) it comes back null.
Initially, can anyone explain what the difference is between a WebGL and a canvas project in Adobe Animate CC and how I can get a reference to child clips to control their timelines?
Along with that, can anyone point me to any decent resources on scripting these projects? It seems like no matter what I search for I always end up back at that *!#%£¡ rabbit tutorial that manages to cram very little info into an awful lot of words.
Thanks all, your help is always appreciated :)

So I was being a numpty.
The name property of any asset defaults to null. This is not a problem because the getChildByName() method is not really necessary (for me at least) once I realise that you can just call this.someChild.someMethod().
I got hooked up on the wrong approach because it was the only one I could find examples of. I'm still finding documentation very sketchy and not very helpful when compared to AS3 or even competing JS libraries like Greensock
Also not sure why my first approach worked in WebGL but not canvas. Ah well, onwards and upwards...

WebGL and HTML5 Canvas documents work somewhat differently in Animate CC.
In WebGL, symbols having instance names are accessible as follows:
var mySymbol = this.getChildByName("instance-name");
In Canvas, the same can be done as follows:
var mySymbol = this.instance-name;
Unnamed instances can be referenced using this.getChildAt(index) in both canvas and WebGL.
Once a reference to the required instance is obtained, you can easily control it as desired. (gotoAndPlay()/Stop() etc.)
PS: In canvas, Symbol-instance names are not explicitly set as name properties of corresponding symbols in the output - hence the name property is returned as null.

Use GeometryUtils.merge on several Line objects in THREE.js

I want to merge several thousands of Line objects into a single geometry with GeometryUtils.merge to reduce lag, but it doesn't seem to work on Line objects. Is it possible? My technical mind says you would need to redefine what a line is.

Yes. This is something you will have to do manually.
three.js r.58

I was also facing this issue, and while searching bumped here. I solved this issue, for now,using third parameter for THREE.Line constructor. There are two types, THREE.LineStrip and THREE.LinePieces. I used later, it connects series of segments i.e. 0-1, 2-3 and so on, so I added set of vertices for a line like 0-1 1-2 2-3, and reset this sequence for next line. Hope it helps you, if you dont want to redefine Line implementation.

Is there a way to extend a ThreeJS object?

I'm using ThreeJS to create an interaction where people can click cubes. However these cubes behave differently when clicked (different color animations, to keep the idea simple).
My idea was to create extension classes of the THREE.Mesh object and add my custom functions and attributes. This would help isolate the different behaviors of the cubes and provide a cleaner code.
I tried using John Resigs' function to extend classes, but it seems to work just for classes that ultimately extend his "Class" class.
Is there a way to do this?

There are several ways to make class-based systems in Javascript. John Resig's "Class" is a great one, but it is not the type of inheritance that Three.js uses.
Notice in the Cube class file the line:
THREE.Geometry.call( this );
Javascript does not provide a built-in model for class inheritance, so unless you are using a library (like John Resig's) that bakes inheritance into class construction, you have to call the super method explicitly.
Your class would inherit from CubeGeometry if, inside your class, you call:
THREE.CubeGeometry.call( this );
You will also likely want to set CubeGeometry to be the prototype:
THREE.MyCubeGeometry.prototype = new THREE.CubeGeometry();
THREE.MyCubeGeometry.prototype.constructor = THREE.MyCubeGeometry;

Quad trees pertaining to 2d collision

I've been studying this:
https://github.com/mikechambers/ExamplesByMesh/blob/master/JavaScript/QuadTree/src/QuadTree.js
and I believe I understand the general idea about quad trees, although I do have two questions about how they work, and the implementation above:
Wouldnt you have to rebuild the entire tree every several ms? In Javascript wouldnt this be extremely slow to do?
If I have something like this: http://davzy.com/screenshots/skitched-20120318-180324.png, then its easy enough to find the other dots in the same quad but I have a rectangle that hits 3 different quads, is there a way I can make it display as a child of all 3 of those quads?
On 144 of the above example it says this Node.prototype._classConstructor = Node;, I'm just curious what's going on. I thought prototype was a way to define a function or variable for future use within a class, so I'm not sure what this line does.

1. Wouldnt you have to rebuild the entire tree every several ms? In Javascript wouldnt this be extremely slow to do?
I suppose that depends on what you're using it for; but yes, the author's collision-detection example in his blog post about his QuadTree implementation will clear the tree and repopulate it roughly 24 times per second (so, about once per 40 ms). You can judge for yourself whether that's "extremely slow"; on my machine it looks quite smooth. (And even if not, I would expect the rebuilding of the QuadTree to actually be cheaper/faster than the redrawing of all of the circles on the canvas.)
2. […] I have a rectangle that hits 3 different quads, is there a way I can make it display as a child of all 3 of those quads?
I'm not sure what you mean by "display", but: if you call the constructor with the pointQuad parameter set to false, then items are two-dimensional (i.e., they have width and height in addition to x and y), and every item will be a child of the smallest quad that it fits completely inside. In your example, since the rectangle crosses the vertical midline of the canvas, it will be a direct child of the root quad.
3. On 144 of the above example it says this Node.prototype._classConstructor = Node;, I'm just curious what's going on. […]
The Node "class" has a "subclass" named BoundsNode (used when the items are two-dimensional), and BoundsNode.prototype._classConstructor is set to BoundsNode (which overrides the inherited Node.prototype._classConstructor). This allows Node's subdivide method to write new this._classConstructor(...) in order to construct a new BoundsNode if this is a BoundsNode, and a new plain Node if this is a plain Node.