Clash Royale CLAN TAG#URR8PPP

Angular runtime error calling a function inside the render() loop: 'undefined is not an object (evaluating this.watchLocation)'

I am creating an ionic-native Angular app, using three.js and I can't call any function inside the render loop. I have tried using different forms for the watchLocation function, such as including it inside the 'init3D' method, but the full watchLocation() method uses ionic-native plugins which do not work if I declare the function inside the function that calls it.

I have looked at all the other questions on stack overflow, but those methods did not work for this application. I think the problem is in the creation of the 'watchLocation' method or with calling another function within the render loop of a three.js application.

Here is the code (with the changes suggested by @UncleDave):

import Component, Input, Renderer from '@angular/core';
import STLLoader from "./stlloader";

import
Object3D,
PerspectiveCamera,
Scene,
Mesh,
WebGLRenderer,
Vector3,
SpotLight,
MeshPhongMaterial,
Color,
from "three"
import NavController from 'ionic-angular';

@Component(
selector: 'three-d',
templateUrl: 'three-d.html'
)

export class ThreeDComponent

_stlURL: string;

@Input()
set stlURL(url: string)
this._stlURL = url;
this.init3D();


constructor()
console.log("threee-3d");


ionViewDidLoad()
this.init3D();

init3D()

// create a scene, that will hold all our elements such as objects, cameras and lights.
...
let x=[0];
let y=[0];
let z=[0];
render();


function render()
// stats.update();
this.Location(x,y,z);
if (group)
group.position.x+=x[x.length-1];
group.position.y+=y[y.length-1];
group.position.z+=z[z.length-1];


// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);



Location(_x,_y,_z)
alert("hi");
_x.push(0.01);
_y.push(0.01);
_z.push(0.01);




2 Answers
2

The issue is near the bottom of init3D():

init3D()

render();
let x=[0];
let y=[0];
let z=[0];


render() passes the variables x, y, and z to watchLocation(_x,_y,_z) but they're undefined, as they are the only variables that could possibly produce the error message.

render()

x

y

z

watchLocation(_x,_y,_z)

The problem is that you're calling render BEFORE assigning a value to x, y, and z.

render

x

y

z

Moving the render call to the bottom should fix your issue:

let x=[0];
let y=[0];
let z=[0];
render();


The error was in the way 'render' is called, since the definition of 'this' must be passed into it.

Change

render();


to

render(this);


and change

requestAnimationFrame(render);


to

requestAnimationFrame(function()render(scope););


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.