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
Avatar
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>
  )
}
Image

26 Replies

Avatar
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.
Avatar
Japanese common catfishOP
is this in your layout.tsx?
Avatar
English Angora
No. It's a standalone page
Avatar
Japanese common catfishOP
where did you import the three js to make it show on the localhost
Avatar
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
Avatar
Japanese common catfishOP
hmm yea im using nextjs
Avatar
B33fb0n3
where is the 3d element? I am just seeing .webp files xD
Avatar
English Angora
They are further down. I'm using <SphereGeometry>'s and I have 3D text
Avatar
Japanese common catfishOP
here's my repo
https://github.com/Tagi17/my-portfolio-
Avatar
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 ^^
Avatar
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
Avatar
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.
Avatar
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
Avatar
English Angora
its the className='text'
I actually wasn't able to see the canvas until I refreshed the page
Avatar
Japanese common catfishOP
i took that out rn
but where does the text appear?
Avatar
English Angora
Image
Avatar
Japanese common catfishOP
comment out the body class in globals.css