Next.js Discord

Discord Forum

White outline around my imported Three.js canvas

Unanswered
Japanese common catfish posted this in #help-forum
Open in Discord
Japanese common catfishOP
In my file for three.js code, i import that function into my layout.tsx and on the localhost i see an outline around my three.js canvas on the left and bottom part. I tried playing around my with page.tsx and added some text and that text was shown below the three.js canvas.
threejs.tsx code:
'use client'

import './globals.css'
import * as THREE from 'three';
import React, { useEffect } from 'react';
const Cube: React.FC = () => {

    useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#bg') as HTMLCanvasElement,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight );
    camera.position.setZ(12);

    renderer.render(scene, camera);

    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial( { color: 0xFF6347, wireframe: true });
    const cube = new THREE.Mesh( geometry, material );

    scene.add(cube)
    const pointLight = new THREE.PointLight(0xffffff)
    pointLight.position.set(1,1,1)

    function animate(){
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.005;
        cube.rotation.z += 0.01;
        renderer.render(scene,camera);
    };
        animate();
    }, []);
    return <canvas id="bg" style={{ width: '100%', height: '100%' }}></canvas>;
};
export default Cube;

layout.tsx:
const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
          <body className={inter.className}>
                <Cube/>
              {children}
          </body>
    </html>
  )
}

26 Replies

English Angora
Those look to me like scrollbars
How I was able to make the canvas in my 3js project full was doing this:
<main style={{ maxHeight: "100vh", overflow: "hidden" }}>
        {/* <ThemeProvider theme={MainTheme}> */}
          <Canvas
            camera={{ position: [0, 0, 8.5], fov: 40 }}
            style={{
              width: "100%",
              height: "100vh",
              objectFit: "cover",
              backgroundImage: "url('/earth3JS/8k_stars.webp')",
              backgroundSize: "cover",
              backgroundColor: "black",
              boxShadow:
                "0 0 200px rgba(0,0,0,0.4) inset, 0 0 300px rgba(0,0,0,1) inset",
            }}
          >
Try messing with the vh unit of measurement. You can always hide overflow too, which will turn off scrollbars.
English Angora
No. It's a standalone page
@English Angora No. It's a standalone page
Japanese common catfishOP
where did you import the three js to make it show on the localhost
English Angora
https://github.com/M-Valentino/M-Valentino_Node/blob/main/src/pages/Earth3JS.jsx What I was showing earlier was a react version of my code. I think I should show the Next JS version (there are minor differences).
I just import it all on the same page
Japanese common catfishOP
hmm yea im using nextjs
English Angora
They are further down. I'm using <SphereGeometry>'s and I have 3D text
Japanese common catfishOP
here's my repo
@English Angora They are further down. I'm using <SphereGeometry>'s and I have 3D text
B33fb0n3
ah ok I got it. You render a sphere and put the image file on it.
I first thought you load the 3d element via a gltf file or some other 3d file ^^
Japanese common catfishOP
i feel as though <body className={inter.className}> this is causing issues, i took the className out and its still the same gaps showing
English Angora
it could be. I was running your code locally and put "margin: 0" in the style. I then tried the same for the encapsulating html tag and still saw the white border
You don't have _document.jsx I noticed.
Japanese common catfishOP
everything i have is from the most stable nextjs version
turns out i needed to take out the padding from the body in the css file to get rid of the side gaps
buttt when i add text to the page.tsx the text appears below the threejs canvas in a whitespace
English Angora
its the className='text'
I actually wasn't able to see the canvas until I refreshed the page
@English Angora its the className='text'
Japanese common catfishOP
i took that out rn
@English Angora I actually wasn't able to see the canvas until I refreshed the page
Japanese common catfishOP
but where does the text appear?
English Angora
@English Angora Click to see attachment
Japanese common catfishOP
comment out the body class in globals.css