We Keep Coding

JavaScript/ThreeJS TypeError: Cannot read property 'set' of undefined

I'm trying to create a custom object using ThreeJS called Model that is composed of other custom objects I have defined, such as Part. This is where I get my error:
const Model = function() {
this.mesh = new THREE.Object3D();
this.mesh.name = 'model';
//creates instance of part
this.lowerPart = new Part();
this.lowerPart.position.set(1, 2, 3, -75); //TypeError here
this.lowerPart.rotation.set(0, 0, 0);
this.mesh.add(this.lowerPart);
}
However, when I run my program, it says that it cannot read the property 'set' in undefined, referencing this.lowerPart.position.set(1, 2, 3, -75);.
Here is how I basically defined Part:
const Part = function () {
this.mesh = new THREE.Object3D();
this.mesh.name = 'part';
const partShape = new THREE.Shape();
partShape.lineTo( 40, 80 );
partShape.lineTo( 60, 80 );
partShape.lineTo( 60, 100 );
partShape.lineTo( 40, 100 );
//extrude settings defined....
const partGeometry = new THREE.ExtrudeGeometry(partShape, extrudeSettings);
const partMesh = new THREE.Mesh(partGeometry, new THREE.MeshStandardMaterial({
color: 0x1c4bc9,
flatShading: true
}));
this.mesh.add(partMesh);
};
Part.prototype = Object.create(THREE.Object3D.prototype);
Part.prototype.constructor = Part;
Another thing to note in my function Model is that when this.lowerPart is created, it is labeled as unused. I am unsure of the reason since it is type Object3D which has these properties.
The console also proves that this.lowerPart is an instance of Part.
I've looked and tried most of the suggested StackOverflow questions related to my problem. Out of all of them, this seems the most relevant: Uncaught TypeError: Cannot read property 'set' of undefined
However, it didn't work for me.
Any suggestions to how I can fix my issue is greatly appreciated!

If you want to derive Part from THREE.Object, you also have to execute the following line of code in the constructor of Part (it should be the first line in the ctor):
THREE.Object3D.call( this );
Only then it's possible to access properties like position, rotation or scale with an instance of Part.

Can't point one position at another in three.js

I may be misunderstanding the way positions work, but they're not working the way I would expect. If I create two Object3Ds I would expect to be able to give the position property of the second a reference to the first so that it follows it, but that doesn't seem to work:
var foo = new THREE.Object3D();
foo.position = new THREE.Vector3(100, 200, 300);
var bar= new THREE.Object3D();
bar.position = foo.position;
console.log(foo.position); //{100, 200, 300}
console.log(bar.position); //{0, 0, 0}
What am I doing wrong here? There is another way that seems to create a new Vector3:
var foo = new THREE.Object3D();
foo.position = new THREE.Vector3(100, 200, 300);
var bar= new THREE.Object3D();
bar.position = foo.position.copy();
console.log(foo.position); //{100, 200, 300}
console.log(bar.position); //{100, 200, 300}
As this creates a new Vector3, this works only until I move foo - then I have to update bar.position again.
(above is untested code!)

bar.position.set(foo.position.x,foo.position.y,foo.position.z);
Always use class .set(x,y,z), don't use position = new.THREE.Vector3(1,2,3)

If you want one object to follow e.g. attach it to another then you would need to .add() the following object to the one being followed.
See this fiddle http://jsfiddle.net/cdc1u9dk/ where you can click on the cube and the cube jumps a bit to the left and the sphere 'follows' the cube since it was attached to it in line 19 cube.add( sphere );

How to change properties of element in JSXGraph?

Suppose, I have the following piece of code:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]]);
How can I change second point of axis?
Something like ax2.setSecondPoint([2,0])?
In general, how can I set property of any element?
Thank you.

Axis has two properties which names are self-explanatory: point1 and point2.
You can use setPosition method on any of them, e.g.
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0])
Now there is one catch: you will not see this change on the chart unless you set needsRegularUpdate property of the axis object to true. Finally, to refresh the chart you should execute fullUpdate() method on the board variable. The whole looks like this:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]],{needsRegularUpdate:true});
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0]);
brd2.fullUpdate();
References:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Point.html#setPosition
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Options (search for "special axis options")
Now to change properties like fixed, visible, etc. you should use setAttribute method (setProperty is deprecated). Example:
// Set property directly on creation of an element using the attributes object parameter
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
var p = board.create('point', [2, 2], {visible: false});
// Now make this point visible and fixed:
p.setAttribute({
fixed: true,
visible: true
});
Source:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.GeometryElement.html#setAttribute
Last but not least a simple formula:
a + b = c
where:
a = using JavaScript debugging tools in browsers to investigate object properties
b = checking documentation for products you use
c= success :)

Raphaël JS paper.getById() returns null

I'm trying to get the Raphaël object by using the getById() function, however no matter what I try the function returns null.
Here is the Raphaël JS code I'm working with:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(100, 100, 100);
circle.attr({"fill": "#f00", "id": "test"});
circle.data("id", "test");
var getCircle = paper.getById("test");
alert(getCircle); //Returns null?
Why doesn't paper.getById("test"); return the circle object?
I've defined the ID by both using attr() and data() yet nothing seems to work.
JsFiddle of the above code: http://jsfiddle.net/Mf9q6/

Read the documentation carefully:
Returns you element by its internal ID.
This is not the same as the id attribute on the element. The id expected by Paper.getById() is Element.id
You probably want var getCircle = paper.getById(circle.id); which is just a reference to the same object as circle anyway.
Here's your fiddle, updated.

If I understood your question correctly, you are trying to set id to your element. Then somewhere down the line get the element's id.
If it is the case then you are almost there:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(100, 100, 100);
circle.attr({"fill": "#f00", "id": "test"});
circle.data("id", "test");
var getCircle = circle.data("id");
alert(getCircle); //Returns test
EDIT
If you are trying to get the circle by the value, like in your example "test"
paper.forEach(function (el)
{
if (el.data("id") == "test")
// return el - do what you want
});

recommended way to extend classes in Paper.js

Is there a recommended way to extend classes in Paper.js? In particular, I am interested in extending Path
Pardon if my terminology is incorrect, but I am essentailly asking the same question about paper that is being asked about three here

Based on your comment to the initial version of my answer, you are looking for the 'extend' function (oops, that was exactly what you meant) to do subclassing. In an email to the paper.js mailing list, Jürg Lehni (one of the creators) said:
As for subclassing, that's not something that is supported at the
moment. It might work, it might not, it might work in most cases, but
not in very rare cases that are hard to pinpoint, it might need only a
couple of changes to make it work well, but those might be in many
different places.
For example, each Item subclass has a _type property which is a string
representing its type. Sometimes we check that instead of using
instanceof, because it's faster, and so far, for example for Path we
just assumed there would be no subclassing.
A complication is that there are no paper.Path.Rectangle objects. There are paths, and there are rectangles, but when you call new paper.Path.Rectangle() it creates a new Path using initialization code (createRectangle) that creates a rectangular shape.
So we would need to extend paper.Path. Unfortunately, when you call new paper.Path.Rectangle it calls createPath, which always returns a Path (not your extension). It may be possible to do something like:
var SuperRectangle = paper.Path.extend({
otherFunc: function() {
console.log('dat');
}
});
...and with correctly substituting/overriding for createRectangle or createPath get a subclass to work. Unfortunately, I have not been able to manage it.
My first working recommendation is to make a factory and add your functions to the objects in that factory (jsbin here):
var createSuperRectangle = function(arguments){
var superRect = new paper.Path.Rectangle(arguments);
superRect.otherFunc = function(){
console.log('dat');
}
return superRect;
}
var aRect = new Rectangle(20, 30, 10, 15);
var aPath = createSuperRectangle({
rectangle: aRect,
strokeColor: 'black'
});
aPath.otherFunc();
Similarly, you can use the factory to just change the prototype for your SuperRectangles, having added your functions to that prototype object (and making its prototype the one from paper.Path.__proto__) (jsbin here):
var superRectProto = function(){};
var tempRect = new paper.Path.Rectangle();
tempRect.remove();
superRectProto.__proto__ = tempRect.__proto__;
superRectProto.otherFunc = function(){
console.log('dat');
}
delete tempRect;
var createSuperRectangle = function(arguments){
var superRect = new paper.Path.Rectangle(arguments);
superRect.__proto__ = superRectProto;
return superRect;
}
var aRect = new Rectangle(20, 30, 10, 15);
var aPath = createSuperRectangle({
rectangle: aRect,
strokeColor: 'black'
});
aPath.otherFunc();
Alternatively, you can make an object that encapsulates the Path (jsbin here):
var SuperRectangle = function(arguments){
this.theRect = new paper.Path.Rectangle(arguments);
this.otherFunc = function(){
console.log('dat');
}
}
var aRect = new Rectangle(20, 30, 10, 15);
var aPath = new SuperRectangle({
rectangle: aRect,
strokeColor: 'black'
});
aPath.otherFunc();
aPath.theRect.strokeWidth = 5;
Unfortunately, then to access the path you have to use the theRect variable.
Initial incorrect answer follows:
I don't think you mean "extending classes". In Javascript you can extend objects so that they have more functions, so extending the Path "class" would mean all Path objects have the same new functions. Javascript object extension is further described here.
If I'm wrong, and you do want to extend Path, then you can use:
paper.Path.inject({
yourFunctionName: function(anyArgumentsHere) {
// your function here
}
});
However, I think you are actually talking about creating new objects that mostly behave like Path objects but have different functionality from each other. If that is the case, then you may want to look at this answer about Javascript using prototypical inheritance. For example, here I create two Rectangle objects that behave differently when I ask them to doSomething (jsbin here):
var rect1 = new Path.Rectangle({
point: [0, 10],
size: [100, 100],
strokeColor: 'black'
});
rect1.doSomething = function() {
this.fillColor = new Color('red');
};
var rect2 = new Path.Rectangle({
point: [150, 10],
size: [100, 100],
strokeColor: 'black'
});
rect2.doSomething = function() {
this.strokeWidth *= 10;
};
rect1.doSomething();
rect2.doSomething();

A couple of things.
1) You can wrap the original paperjs object but this is very much a hack
paperjs playground
function SuperSquare() {
this.square = new Path.Rectangle({
size:50,
fillColor:'red',
onFrame:function(base) {
var w2 = paper.view.element.width / 2;
this.position.x = Math.sin(base.time) * w2 + w2;
}
});
}
SuperSquare.prototype.setFillColor = function(str) {
this.square.fillColor = str;
}
var ss = new SuperSquare();
ss.setFillColor('blue');
2) I may clone & create a paper 2017 which operates off of es6 so that you can use the extend keyword.
3) I wrote an application called Flavas but it never gained a following so I just kind of left it. That being said, I have been playing with it lately; upgrading it to es6. With it you can do what you're talking about.
class Square extends com.flanvas.display.DisplayObject {
constructor(size) {
this.graphics.moveTo(this.x, this.y);
this.graphics.lineTo(this.x + size, this.y);
this.graphics.lineTo(this.x + size, this.y + size);
this.graphics.lineTo(this.x, this.y + size);
}
someMethod(param) {
trace("do something else", param);
}
);
I wrote all this kind of quick so feel free to hit me up with Q's.