Ad

Polymer And Three.js

- 1 answer

I´m trying run three.js demo http://jsfiddle.net/hfj7gm6t/ into my polymer app but the app show an error:

com-model-viewer.html:33 Uncaught TypeError: Cannot read property 'myview' of undefined

<link rel='import' href='../../../bower_components/polymer/polymer.html'>
<dom-module id='com-model-viewer'>
<template>
<ul id='myview'>
</ul>
</template>
<script>
Polymer({
is:'com-model-viewer',
ready: function(){
  console.log(this);
  var camera, scene, renderer;
  var geometry, material, mesh;

  init();
  animate();

  function init(){

    console.log();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;
    scene = new THREE.Scene();
    geometry = new THREE.BoxGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      wireframe: true
    });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    Polymer.dom( this.$.myview ).appendChild(node);
  }

  function animate(){
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    renderer.render(scene, camera);
  }
}
});
</script>
<script src='../../../node_modules/three/three.min.js'></script>
</dom-module>
Ad

Answer

im guessing that the this in your function init is not what you are looking for. this point to the function but not the polymer object. try passing the original this variable into init or just rewrite init into es6 arrows function.

Ad
source: stackoverflow.com
Ad