# 8th wall Integration with Next.js

**URL:** <https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721>\
**Category:** Technical Support\
**Tags:** nextjs, XR8\
**Created:** [March 14, 2024, 5:53am UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721 "2024-03-14T05:53:27Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [March 14, 2024, 5:53am UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/1 "2024-03-14T05:53:27Z")

</div>

Hi Team, i am getting this error while integrating the 8th wall with Next.js:

```plaintext
TypeError: Cannot read properties of null (reading 'canvas')

```

 ![Screenshot (206)](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/4fa3acf9d16822b4a6e0cb346eb9d832cd508628.jpeg)

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [March 19, 2024, 8:43pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/2 "2024-03-19T20:43:44Z")

</div>

Hi Neha, what behavior do you see when testing on a mobile device?  
Can you please provide relevant code snippets so we can help debug?

---

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [March 20, 2024, 4:07am UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/3 "2024-03-20T04:07:13Z")

</div>

I am testing on my localhost, it says link not found.

 ![Screenshot (207)](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/12a1bb75027270491f24cf9af502f937dc44b57a.jpeg)

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [March 21, 2024, 7:35pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/4 "2024-03-21T19:35:15Z")

</div>

It’s possible that `XR8` is not done loading by the time `tryInitializeAR` is executed. Instead of using `setTimeout` to call `tryInitializeAR`, try using the [`xrloaded` event](https://www.8thwall.com/docs/api/xr8/#events):

```auto
const onxrloaded = () => {
  // add camera pipeline modules
  // XR8.run()
}

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

```

Any time you reference `XR8` in your code, it’s good practice to use this syntax to ensure the library is fully loaded.

---

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [March 28, 2024, 9:23am UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/5 "2024-03-28T09:23:04Z")

</div>

Hi Evan,  
Thanks for the reply, i am still facing the same issue

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [March 28, 2024, 7:46pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/6 "2024-03-28T19:46:40Z")

</div>

You might want to try inserting the canvas via javascript to ensure it’s in the DOM at the time `XR8.run()` is called.

```auto
document.body.insertAdjacentHTML('beforeend', camerafeedHtml)
const canvas = document.getElementById('camerafeed')

XR8.run({canvas})

```

> **[three.js: World Effects Template | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/unitcube-threejs/code/app.js)**
>
> This blank three.js project contains a simple unit cube. Tap the screen to recenter.

---

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [April 1, 2024, 7:06pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/7 "2024-04-01T19:06:00Z")

</div>

Hi Even,  
Thank you! it is working now but i ran into another issue, i am not able to see the gltf object although the box helper and other 3D elelments like box geometry gets loaded, even gltf gets loaded but not visible.  
Thanks

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [April 1, 2024, 8:58pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/8 "2024-04-01T20:58:53Z")

</div>

Are there any warning or errors in the console? Are you loading the GLTFLoader in `head.html`? Does the model look as expected in the [glTF viewer](https://gltf-viewer.donmccurdy.com/)?

---

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [April 2, 2024, 3:54am UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/9 "2024-04-02T03:54:15Z")

</div>

```auto
'use-client'
import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const CubeScene = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    window.THREE = THREE;
    let xr8Cleanup = () => {};
    var clock = new THREE.Clock();
    var mixer = new THREE.AnimationMixer(THREE.Object3D);
    const load8thWall = () => {
      const onxrloaded = () => {
        XR8.addCameraPipelineModules([ // Add XR8 WebGL pipeline modules.
          XR8.Threejs.pipelineModule(), // Enables Three.js.
          // Add more 8th Wall modules here as needed.
          
        ]);

        XR8.XrController.configure({
          canvas: canvasRef.current,
        });
        // function integrate8thWall() {
        // XR8.Threejs.xrScene().then(({ scene, camera, renderer }) => {
        // // Use the XR scene, camera, and renderer for Three.js
        // window.XRExtras.Threejs.attachCamera(renderer, scene, camera);
        // animate();
        // });
        // }

        // Three.js scene setup:
        const scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 20000 );

        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(0, 5, 5);
            scene.add(directionalLight);

        const renderer = new THREE.WebGLRenderer({
          canvas: canvasRef.current,
          alpha: true,
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        
        document.body.appendChild(renderer.domElement);
        renderer.outputEncoding = THREE.sRGBEncoding;

        // Add a cube to the scene:
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        cube.position.x = 0;
        cube.position.y = 0;
        cube.position.z = 0;
        scene.add(cube);
        const geo=new THREE.PlaneGeometry();
        const material1=new THREE.MeshBasicMaterial({color: 0x000011});
        const plane=new THREE.Mesh(geo, material1)
        plane.position.x=2;
        scene.add(plane);
         const loader = new GLTFLoader();
         console.log(loader);
         loader.load("/models/MAT29.gltf", function (gltf) {
            const box = new THREE.BoxHelper(gltf.scene, 0xffff00);
            scene.add(box);
            gltf.scene.scale.set(10, 10, 10); // Scale the model down
            gltf.scene.position.set(0, 0, 0);
            console.log(gltf)
            gltf.scene.traverse(function (child) {
                if (child.isMesh) {
                    child.material = new THREE.MeshBasicMaterial({ wireframe: true });
                    child.material.depthTest = false;
                }
              });
            mixer = new THREE.AnimationMixer( gltf.scene );
			mixer.clipAction( gltf.animations[0] ).play();
        // XR8.Scene.GLTFLoader("models/MAT29")
        // gltf.scene.scale.set(2, 2, 2); // Scale your model to the desired size
          // Position your model or make any adjustments as needed
        }, undefined, function (error) {
          console.error(error);
          
         });
         
    
        camera.position.set( 1, 1, 20 );

    // const animate = () => {
    // requestAnimationFrame(animate);

    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
    // plane.rotation.x += 0.01;
    // plane.rotation.y += 0.01;

    // renderer.render(scene, camera);
    // };

    // animate();
    // };
    const animate = () => {

        requestAnimationFrame( animate );

        var delta = clock.getDelta();

        if ( mixer ) mixer.update( clock.getDelta() );

        renderer.render(scene,camera);
    }

    

    animate();
}

      // Ensure XR8 is not already loaded
      if (window.XR8) {
        onxrloaded();
      } else {
        window.addEventListener('xrloaded', onxrloaded);
        xr8Cleanup = () => window.removeEventListener('xrloaded', onxrloaded);
      }
    };

    if (typeof window !== 'undefined') {
      const script = document.createElement('script');
      script.src = 'https://apps.8thwall.com/xrweb?appKey=appkey;
      script.async = true;
      script.onload = load8thWall;
      document.body.appendChild(script);
    }

    return () => {
      xr8Cleanup();
    };
  }, []);

  return <canvas ref={canvasRef}></canvas>;
};

export default CubeScene;

```

Model works fine in gltfviewer, also i can see model is loaded on console attached is the screen shot

 ![Screenshot (215)](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/721834e58ad96eb437c036a9b0fd898fd54c533b.jpeg)

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [April 2, 2024, 9:47pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/10 "2024-04-02T21:47:38Z")

</div>

> [@Neha\_Tiwari](#):
>
> `gltf.scene.scale.set(10, 10, 10); // Scale the model down`

Perhaps the model is too large or too small to be visible. The comment here says this line is supposed to scale the model down, but in fact it’s increasing it’s size by 10x. To reduce scale you need a value 0-1.

---

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [April 3, 2024, 4:21am UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/11 "2024-04-03T04:21:00Z")

</div>

Hi Evan, i have tried that as well it didnt work and then i scaled it up.  
Thank you

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [April 3, 2024, 6:00pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/12 "2024-04-03T18:00:06Z")

</div>

if you open up the model in blender, is it immediately visible without zooming in or out? feel free to share the model if you’re able.

---

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [April 3, 2024, 6:58pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/13 "2024-04-03T18:58:00Z")

</div>

No Evan, surprisingly i dont see model in blender but it works in 8th wall editor but not on self hosted application. any solution? but just now i tested with other model that was properly rendered on blender but not rendering on self hosted 8th wall app

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [April 3, 2024, 8:47pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/14 "2024-04-03T20:47:29Z")

</div>

What does the model look like in the 8th Wall editor?

---

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [April 4, 2024, 7:07am UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/15 "2024-04-04T07:07:20Z")

</div>

Attaching the screenshot of the 8th wall simulator

 ![Screenshot (216)](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/ca8dfa82c816aa551789205953864f124c6e16b5.jpeg)

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [April 4, 2024, 7:12pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/16 "2024-04-04T19:12:29Z")

</div>

Is this the exact same code as your self-hosted project, just in the cloud editor? The scene looks a bit different than in the earlier screenshot.

If you’re using three.js, be sure to follow the camera pipeline module pattern as demonstrated in our sample projects: [three.js: World Effects Template | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/unitcube-threejs/code/app.js#L10)

i.e. create an `initScenePipelineModule` and include it in your call to `XR8.addCameraPipelineModules`. In the earlier code snippet, it looks like you’re trying to set up the three.js outside of a camera pipeline module:

> [@Neha\_Tiwari](#):
>
> `// Three.js scene setup:`

---

<div class="post-metadata">

**Author:** ![Neha\_Tiwari](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@Neha\_Tiwari](https://forum.8thwall.com/u/Neha_Tiwari)\
**Post date:** [April 4, 2024, 7:43pm UTC](https://forum.8thwall.com/t/8th-wall-integration-with-next-js/721/17 "2024-04-04T19:43:01Z")

</div>

cloud editor code is different and self hosted code is the code snippet i provided, sure let me follow. thanks