title: Three: How could we insert a locally loaded mesh into the canvas being generated by Three to display it?
body: <p><strong>Hello and thank you for reading this question:</strong></p>
  
  <p>I am learning Threejs, and currently I have a curious difficulty:</p>
  
  <p>I have learnt how to use a loader to load local files with format NRRD, in plain HTML/JAVASCRIPT: here is the repo: <a href="https://github.com/YoneMoreno/LoadNRRDInThreeJSExample" rel="noreferrer">https://github.com/YoneMoreno/LoadNRRDInThreeJSExample</a></p>
  
  <p>As an example of how it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/HhSgZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HhSgZ.png" alt="enter image description here"></a></p>
  
  <p>However, I would like to integrate the previous example with React.</p>
  
  <p>I have studied how to associate React and Three using this SO thread: 
  <a href="https://stackoverflow.com/questions/46260176/rendering-three-js-element-in-react">Rendering three.js element in React?</a></p>
  
  <p>And right now my code looks like:</p>
  
  <pre><code>/*global THREE */
  
  import React from 'react';
  
  class LoadNRRD extends React.Component {
  
      constructor(props) {
          super(props)
  
          this.start = this.start.bind(this)
          this.stop = this.stop.bind(this)
          this.animate = this.animate.bind(this)
      }
  
      componentDidMount() {
          const width = this.mount.clientWidth
          const height = this.mount.clientHeight
  
          const scene = new THREE.Scene()
          const camera = new THREE.PerspectiveCamera(
              75,
              width / height,
              0.1,
              1000
          )
  
          var loader = new THREE.NRRDLoader();
          loader.load("models/columnasegmentado01.nrrd", function (volume) {
              var sliceZ;
  
  
              //z plane
  
              var indexZ = 0;
              sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4))
              console.log(sliceZ);
              scene.add(sliceZ.mesh);
  
          });
  
          const renderer = new THREE.WebGLRenderer({antialias: true})
          renderer.setPixelRatio(window.devicePixelRatio);
          renderer.setSize(width, height);
  
  
          renderer.setClearColor('#000000')
  
  
          this.scene = scene
          this.camera = camera
          this.renderer = renderer
  
          let controls = new THREE.TrackballControls(camera, renderer.domElement);
          controls.rotateSpeed = 0;
          controls.zoomSpeed = 5;
          controls.panSpeed = 2;
          controls.noZoom = false;
          controls.noPan = false;
          controls.staticMoving = true;
          controls.dynamicDampingFactor = 0.3;
  
  
          this.mount.appendChild(this.renderer.domElement)
          this.start()
      }
  
      componentWillUnmount() {
          this.stop()
          this.mount.removeChild(this.renderer.domElement)
      }
  
      start() {
          if (!this.frameId) {
              this.frameId = requestAnimationFrame(this.animate)
          }
      }
  
      stop() {
          cancelAnimationFrame(this.frameId)
      }
  
      animate() {
  
  
          this.renderScene()
          this.frameId = window.requestAnimationFrame(this.animate)
      }
  
      renderScene() {
          this.renderer.render(this.scene, this.camera)
      }
  
      render() {
          return (
              &lt;div
                  style={{width: '2000px', height: '2000px'}}
                  ref={(mount) =&gt; {
                      this.mount = mount
                  }}
              /&gt;
          )
      }
  }
  
  export default LoadNRRD;
  </code></pre>
  
  <p>The part I do not understand is: <strong><em>why it does display the canvas but without the model inside?:</em></strong></p>
  
  <p><a href="https://i.stack.imgur.com/gT0Ne.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/gT0Ne.jpg" alt="enter image description here"></a></p>
  
  <p>I have checked that loader works well and model is in place because of we can see it on the console log:</p>
  
  <pre><code>THREE.VolumeSlice
  axis:"z"
  canvas:canvas
  canvasBuffer:canvas
  ... more properties ...
  </code></pre>
  
  <p><em>Could you help me please? Am I missing some step? Have you experienced this issue before? How could you try to debbug this situation?</em></p>
  
  <p>As a note, in branch ThreeIntegrate is the code I am writting about: <a href="https://github.com/PrototipoAtlas/Prototipo" rel="noreferrer">https://github.com/PrototipoAtlas/Prototipo</a></p>
  
  <p><strong><em>If you ave any advice or suggestion please let me know it  </em></strong></p>
  
  <p>EDIT:
  Thank you @Jim Tang for your advice. I have installed Three Chrome extension and the output it gives after setting the scene in the global variab¡le window.scene as is suggested in:
  <a href="https://github.com/jeromeetienne/threejs-inspector/issues/11" rel="noreferrer">https://github.com/jeromeetienne/threejs-inspector/issues/11</a></p>
  
  <p>the result is:
  <a href="https://i.stack.imgur.com/qgVm3.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/qgVm3.jpg" alt="enter image description here"></a></p>
  
  <p>The I tried with the standalone plain HTML/JS example and it had the model on it as:</p>
  
  <p><a href="https://i.stack.imgur.com/qwLFY.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/qwLFY.jpg" alt="enter image description here"></a></p>
  
  <p><strong><em>So then the key question is: why is not being associated the model with the scene?‽‽</em></strong></p>
  
  <p>I have tried again and it looks like the model is indeed loaded however in the console when I tri to change the color of iot, or even click on it says:</p>
  
  <pre><code>THREE.MeshBasicMaterial: .shading has been removed. Use the boolean .flatShading instead.
  </code></pre>
  
  <p>I think, the solution could be about dicovering what is the missing part. If we see again the example which works, we have three elements:</p>
  
  <p><a href="https://i.stack.imgur.com/cQ4my.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/cQ4my.jpg" alt="enter image description here"></a></p>
  
  <p>I suspect that those three elements could be the ones added to the DOM:</p>
  
  <pre><code>        document.body.appendChild(container);
          container.appendChild(renderer.domElement);
  ...more code...
          container.appendChild(stats.dom);
  </code></pre>
  
  <p>In the code that does not show the model the appends are:</p>
  
  <pre><code>this.mount.appendChild(this.renderer.domElement);
  this.mount.removeChild(this.renderer.domElement)
  </code></pre>
  
  <p>Even after deleting the uncommon element which is being appended, the stats, the plain HTML/JS example works and shows three elements !!</p>
  
  <p><a href="https://i.stack.imgur.com/4JTKD.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/4JTKD.jpg" alt="enter image description here"></a></p>
  
  <p>I have discovered that the missing element is the camera because if we see the working example the object has fov, near, far etc:</p>
  
  <p><a href="https://i.stack.imgur.com/Gv1eO.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Gv1eO.jpg" alt="enter image description here"></a></p>
  
  <p>So I tried to add the camera to the scene in the code we are discussing:</p>
  
  <pre><code>const scene = new THREE.Scene();
          const camera = new THREE.PerspectiveCamera(
              75,
              width / height,
              0.1,
              1000
          );
  
  
          scene.add(camera);
  </code></pre>
  
  <p>And it gives a great and huge stack trace:</p>
  
  <pre><code>    TypeError: Cannot read property 'getExtension' of null
      get
      http://localhost:3001/build/three.js:20112:22
      initGLContext
      http://localhost:3001/build/three.js:21116:15
      new WebGLRenderer
      http://localhost:3001/build/three.js:21161:3
      LoadNRRD.componentDidMount
      http://localhost:3001/static/js/bundle.js:62599:28
        62596 |     scene.add(sliceZ.mesh);
        62597 | });
        62598 | 
      &gt; 62599 | var renderer = new THREE.WebGLRenderer({ antialias: true });
              |                ^  62600 | renderer.setPixelRatio(window.devicePixelRatio);
        62601 | renderer.setSize(width, height);
        62602 | 
      View source
      ▶ 17 stack frames were collapsed.
      ./src/index.js
      C:/Users/YonePC/WebstormProjects/prototipo/src/index.js:22
        19 |     );
        20 | };
        21 | 
      &gt; 22 | ReactDOM.render(
        23 |     &lt;BrowserRouter&gt;
        24 |         &lt;App/&gt;
        25 |     &lt;/BrowserRouter&gt;
      View compiled
      ▶ 6 stack frames were collapsed.
  
  TypeError: Cannot read property 'domElement' of undefined
  LoadNRRD.componentWillUnmount
  C:/Users/YonePC/WebstormProjects/prototipo/src/components/animals/LoadNRRD.js:73
    70 | 
    71 |    componentWillUnmount() {
    72 |        this.stop();
  &gt; 73 |        this.mount.removeChild(this.renderer.domElement)
    74 |    }
    75 | 
    76 |    start() {
  View compiled
  ▶ 25 stack frames were collapsed.
  ./src/index.js
  C:/Users/YonePC/WebstormProjects/prototipo/src/index.js:22
    19 |     );
    20 | };
    21 | 
  &gt; 22 | ReactDOM.render(
    23 |     &lt;BrowserRouter&gt;
    24 |         &lt;App/&gt;
    25 |     &lt;/BrowserRouter&gt;
  View compiled
  ▶ 6 stack frames were collapsed.
  </code></pre>
  
  <p>EDIT2:</p>
  
  <p>I have tried again and we see:</p>
  
  <p><a href="https://i.stack.imgur.com/Cvjxn.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Cvjxn.jpg" alt="enter image description here"></a></p>
  
  <p>The code we are talking about:</p>
  
  <pre><code>/*global THREE */
  
  import React from 'react';
  
  class LoadNRRD extends React.Component {
  
      constructor(props) {
          super(props);
  
          this.stop = this.stop.bind(this);
          this.start = this.start.bind(this);
          this.animate = this.animate.bind(this)
      }
  
      componentDidMount() {
          const width = this.mount.clientWidth;
          const height = this.mount.clientHeight;
  
          var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera(
              75,
              width / height,
              0.1,
              1000
          );
  
  
          scene.add(camera);
  
          const loader = new THREE.NRRDLoader();
          loader.load("models/columnasegmentado01.nrrd", function (volume) {
              let sliceZ;
  
  
              //z plane
  
              const indexZ = 0;
              sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));
              sliceZ.name = 'foo';
              console.log(sliceZ);
              scene.add(sliceZ.mesh);
  
          });
  
          var renderer = new THREE.WebGLRenderer({antialias: true});
          renderer.setPixelRatio(window.devicePixelRatio);
          renderer.setSize(width, height);
  
  
          renderer.setClearColor('#000000');
  
  
          this.scene = scene;
          window.scene = scene;
          this.camera = camera;
          this.renderer = renderer;
  
          let controls = new THREE.TrackballControls(camera, renderer.domElement);
          controls.rotateSpeed = 0;
          controls.zoomSpeed = 5;
          controls.panSpeed = 2;
          controls.noZoom = false;
          controls.noPan = false;
          controls.staticMoving = true;
          controls.dynamicDampingFactor = 0.3;
  
  
          this.mount.appendChild(this.renderer.domElement);
          this.start()
      }
  
      componentWillUnmount() {
          this.stop();
          this.mount.removeChild(this.renderer.domElement)
      }
  
      start() {
          if (!this.frameId) {
              this.frameId = requestAnimationFrame(this.animate)
          }
      }
  
      stop() {
          cancelAnimationFrame(this.frameId)
      }
  
      animate() {
  
  
          this.renderScene();
          this.frameId = window.requestAnimationFrame(this.animate)
      }
  
      renderScene() {
          this.renderer.render(this.scene, this.camera)
      }
  
      render() {
          return (
              &lt;div
                  style={{width: '2000px', height: '2000px'}}
                  ref={(mount) =&gt; {
                      this.mount = mount
                  }}
              /&gt;
          )
      }
  }
  
  export default LoadNRRD;
  </code></pre>
  
  <p>As you see I have added the name to sliceZ, and it shows on web console:
  <a href="https://i.stack.imgur.com/HToK8.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/HToK8.jpg" alt="enter image description here"></a></p>
  
  <p>EDIT3: Using renderer info object to debbug:</p>
  
  <p>We see that there is a geomtery an d a texture and also that the render methods is being called 217 times:</p>
  
  <pre><code>{render: {…}, memory: {…}, programs: Array(0), autoReset: false, reset: ƒ}
  autoReset:false
  memory:geometries:1 textures:1
  __proto__:Object
  programs:[WebGLProgram]
  render:
  calls:217
  faces:434
  frame:0
  points:0
  vertices:1302
  __proto__:Object
  reset:
  ƒ resetInfo()
  __proto__:
  Object
  </code></pre>
  
  <p>I have debugged a working example where React is being in tegrated with Three:</p>
  
  <p><a href="https://codepen.io/anon/pen/eMYxZw" rel="noreferrer">https://codepen.io/anon/pen/eMYxZw</a></p>
  
  <p>ANd on the console we see the info Object:</p>
  
  <pre><code>autoReset: false
  ​
  memory: Object { geometries: 1, textures: 0 }
  ​
  programs: Array [ {…} ]
  ​
  render: Object { frame: 485, calls: 1, vertices: 36, … }
  ​
  __proto__: Object { … }
  </code></pre>
  
  <p><strong>So a we see the calls are 1, could be the problem in the code showd that the call to render method of renderer is continously being invoked?</strong></p>
  
  <p>In addition I have uploaded the code being disscussed:</p>
  
  <p><a href="https://github.com/YoneMoreno/ThreeReactNRRDLoaderStandalone.git" rel="noreferrer">https://github.com/YoneMoreno/ThreeReactNRRDLoaderStandalone.git</a> </p>
  
  <p>Could you help me please?</p>