White outline around my imported Three.js canvas
Unanswered
Japanese common catfish posted this in #help-forum
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:
layout.tsx:
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
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 ^^
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 showingEnglish 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