js Model Animation Using three.js r68 - javascript

As stated in the title, I cannot get animation to work. I'm pretty sure I'm missing something in my code because it works here, but not where I'm testing.
I create the animation object in playerCharacter.js with
this.init = function(){
for (var k in this.mesh.material.materials) {this.mesh.material.materials[k].skinning = true;}
this.animation = new THREE.Animation(this.mesh, this.mesh.geometry.animations[0].name);
this.animation.play();
}
In the update function I use:
this.animation.update(0.017);
And when I look at the console log I get:
Uncaught TypeError: Cannot read property 'length' of undefined
So it seems that in THREE.AnimationHandler, data.hierarchy is undefined, so I'm guessing that if I can somehow make it defined, the problem will be fixed. Except I don't know how, or even why it is not defined. Any help?

You are passing only the animation's name, not the whole data object. Use this instead:
this.animation = new THREE.Animation(this.mesh, this.mesh.geometry.animations[0]);

Related

Cannot read property of undefined of an apparently NOT undefined - SOLVED

I am using a control of Telerik (AutoCompleteBox) which contains an embedded dropdown control that can be accessed through the property _dropDown. I am using the dropDownItemDataBound event to trigger the following code:
var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
console.log(autoComplete._dropDown._items);
When I click over the [] in the console I get this (that is expected):
[]
0: b.RadAutoCompleteBox.DropDownItem
_attributes: c.AutoCompleteBoxAttributeCollection {_data: {…}, _keys: Array(0)}
_element: null
_template: null
_text: "Chevrolet TRAVERSE "
_value: "GM1"
Thus I supposed that I could do this:
var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
console.log(autoComplete._dropDown._items[0]._text); // Chevrolet TRAVERSE
console.log(autoComplete._dropDown._items[0]._value); // GM1
Instead I get:
Uncaught TypeError: Cannot read property '_text' of undefined
It doesn't make sense to me because since autoComplete._dropDown._items is obviously an array (and it's NOT undefined!) I should be able to access it by indexing it and get the property contents. Not?
EDIT:
Following the suggestion of #ChrisG that mentioned that perhaps the arry was STILL empty when I tried to log the data to the console, I changed my code into the event to this (to give it a little time and see what happens):
waitAndDisplay();
function waitAndDisplay(timeout = 50) {
setTimeout(function () {
var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
console.log(autoComplete._dropDown._items[0]._text);
}, timeout);
}
Indeed it worked however it doesn't seem to be a safe approach. Any idea on how to ENSURE that the data is fully loaded before to try to read it?
SOLUTION:
I was after the suggestion of #ChrisG on use a callback to data loaded and figured that I goofed in the documentation of the control because in fact there IS an event that triggers after the dropdown is fully loaded, so I will post the solution here. This way the callback function to be used is OnClientRequested and not the dropDownItemDataBound as I did initially:
function OnClientRequested(sender, eventArgs) {
var myarray = eventArgs.get_data();
console.log(myarray[0].Text);
console.log(myarray[0].Value);
}
It will return the proper data.

Javascript called by blazor code happens when DOM not yet ready?

I've a javascript function that has to create graph:
<script>
window.setGraph = (lab, ser) => {
console.log(document.getElementById("weather-chart"));
console.log(lab);
console.log(ser);
var chart = new Chartist.Line('#weather-chart', {
labels: lab,
series: ser
});
console.log("done");
return true;
}
</script>
This function is called by one of my blazor component:
protected override async Task OnInitAsync()
{
some-data-a = await RetrieveSomeData();
some-data-b = await RetrieveSomeOtherData();
JSRuntime.Current.InvokeAsync<bool>("setGraph", some-data-a, some-data-b);
}
Everything is executed, my console.log are called. But it appears that at this moment my element #weather-chart cannot be found, because I get this:
chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at Object.c.createSvg (chartist.min.js:8)
at f.d [as createChart] (chartist.min.js:8)
at f.h (chartist.min.js:8)
AND
my console.log(document....) is returning null.
If I go to this page, I've the error, and if just after getting this error I do something like window.setGraph([1,2,3], [[1,2,3]]) in my chrome developer tools, everything is initialized correctly.
So what did I do wrong? Why chartist doesn't seems to be able to find the element?
It appears that blazor's databinding was taking some time to display the html. So basically after I set the _items, it was changing the template, but not fast enough for the line after this(not sure why, since there was an await).

Fabric js extending toObject with custom properties, loses default ones

Befor posting this I've been looking up in here as in many other places, but I can get to have this working fully.
All I need is to be able to save some custom properties in all the shapes. The properties are : uuid, and rt_attributes.
Therefore, as by manual I added this code :
fabric.Object.prototype.toObject = (function(toObject) {
console.log(toObject)
return function() {
return fabric.util.object.extend(toObject.call(this), {
uuid: this.uuid,
rt_attributes: this.rt_attributes
});
};
})(fabric.Object.prototype.toObject);
which does work fine, up to a certain degree.
the problem comes when I serialize in json and load back.
the custom attributes are in , but shapes like the IText raise an exception such as :
fabric.js:22199 Uncaught TypeError: Cannot read property 'split' of undefined
Looking into the dumped json I can see the .text attribute is not exported. So My fear is that overriding the toObject I lose some of the custom attributes of the default object.
Of course I can redefine it in my toObject function with all the missing trims, but I though that
fabric.util.object.extend
would have done that for me.
Can someone point me on what I'm doing wrong ?
thanks.
L.
p.s
here is a snippet of the outcome json:
{"type":"i- text","originX":"left","originY":"top","left":29,"top":677,"width":107,"height":22.6,"fill":"rgba(255,255,255,1)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"uuid":"04af6ab4-4eb1-432b-f46a-93b11a92292d","rt_attributes":[["fontFamily","text"],["fontSize","int"],["fill","color"],["opacity","float"],["top","int"],["left","int"]],"styles":{}},
as you can see there's no text field., but uuid and rt_attributes are in.
Finally found the proper way:
fabric.Object.prototype.toObject = (function (toObject) {
return function (propertiesToInclude) {
propertiesToInclude = (propertiesToInclude || []).concat(
['uuid','rt_attributes']
);
return toObject.apply(this, [propertiesToInclude]);
};
})(fabric.Object.prototype.toObject);

Why can this javascript function not access a variable in the same class?

For some reason, the player_controller instance variable created on the asterisked line cannot be called in the update function below. When I run this code, the second asterisked line (the console.log) will recognize and print the specified variable from player_controller to the console. However, when I try to use player_controller in the update function below (the double asterisked line), I get the error: "TypeError: this.player_controller is undefined."
Also note that if the bold line is commented out, the other lines (which have similarly created variables) run without errors.
Can anyone tell me what's going on here?
function Engine(){
var GRAVITY = 0.3;
this.map_loader = new MapLoader();
*this.player_controller = new PlayerController();*
this.map = this.map_loader.load_next_map();
*console.log(this.player_controller.keys_down.A);*
this.update = function(){
**this.player_controller.handle_input(this.map.player);**
gravity(this.map.player);
this.map.player.x += this.map.player.dx;
this.map.player.y += this.map.player.dy;
...
...
edit: Didn't realize I couldn't do formatting in code blocks.
Here is a link to the app, if you view the web console while on this page you'll see the error I'm talking about piling up. http://lukescode.net/senior_project_game/main.html
Possibly you create engine as
var engine = Engine();
instead of
var engine = new Engine();
The problem ended up being that I was making the call to Engine.update with setInterval(engine.update, 1000/60) which, as bfavaretto mentioned in a comment, changes 'this' to be something other than the engine in the update function. The solution was to call the function like this:
setInterval(function(){return engine.update();}, 1000/60)
which causes 'this' to properly refer to the object the update function belongs to instead of the window. Thanks to bfavaretto for pointing me in the right direction.

Cannot read property 'style' of null - in Chrome's Javascript Console

I was checking the JS console out and it helped me fix a few minor issues, but I would like to know if this warning is anything to seriously worry about?
This is the code which gives the error:
<script type="text/javascript"
src="https://www.safaviehhome.com/product_images/locations/js/jqgalscroll.js"></script>
<script src="https://www.safaviehhome.com/product_images/mainnav/stuHover.js" type="text/javascript"></script>
<script>
function layerSetup(id,visibility){
if(document.getElementById){
this.obj = document.getElementById(id).style;
Uncaught TypeError: Cannot read property 'style' of null
Uncaught TypeError: Cannot read property 'style' of null
<!--Includes many more of the same "Cannot read property 'style' of null messages -->
this.obj.visibility = visibility;
return this.obj;}
else if(document.all){
this.obj = document.all[id].style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.layers){
this.obj = document.layers[id];
this.obj.visibility = visibility;
return this.obj;}
}
function visVisible(param){
new layerSetup(param,'visible');
}
function visHidden(param){
new layerSetup(param,'hidden');
}</script>
I cannot really figure out why this is happening and whether it's something I should worry about since our Rug categories function fine. Can anybody offer any insight? I apologize for not offering any of my own explanations but I didn't write this JS a former co-worked did and it's now up to me to debug every mistake he made. It's a learning process but I'm still somewhat new to this ..
This could be happening for two reasons.
Somewhere on the page the layerSetup function is being called with null as one of the parameters.
An element with the id being passed the the layerSetup function does not exist on the page.
In the Chrome dev console you can click Pause on All Exceptions, a button in the bottom left bar with a pause symbol. This will help you to determine what the parameters are that are being passed to the function.
Avoid document.all
http://www.javascripttoolbox.com/bestpractices/
http://simonwillison.net/2003/Aug/11/documentAll/

Categories