0

I am trying to set up my three.js according to tutorials I find on Youtube. I use Visual Studio Code and I copy the script exactly but for whatever reason when I check the live server it always shows me a blank white space when it's supposed to be black.

i've also noticed when I set up the scene, camera and renderer my THREE.Scene() and THREE.PerspectiveCamera() etc. are never the color green but instead blue. All the tutorials show them as green. I've done 5 tutorials so far and so far the exact same issue for all of them.

Here's an example of a tutorial I've used: https://www.youtube.com/watch?v=8jP4xpga6yY (Skip to 2:52 to see what I referring to in terms of the "green" script)

Am I missing something? Do i need to download an extension or something?

any input helps - thanks!

This is my main.js file

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
   75,
   window.innerWidth / window.innerHeight,
   0.1,
   1000
);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

This is my index.html file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Basic 3D World</title>
  <style>
    body {
       margin: 0;
    }
    canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
  <script src="./mains.js"></script>
</body>
</html>

I copied code verbatim and instead of getting a black background that shows I'm ready to render my objects I get blank white space when accessing the Live Server. Also notice when I input THREE as I am typing instead of the script turning green it turns blue.

this is what all the tutorials show

this is what my code looks like - notice how thee THREE sections are blue instead of green

notarob0t123
  • 1
  • 2
    [This question is not about programming](https://stackoverflow.com/help/on-topic). It has nothing to do with Three.js or its renderer. Your text editor is simply using a different color scheme than the one from the video. There are literally hundreds of Visual Studio "themes" and color schemes to choose from, so it's up to you to choose one that you like. – M - Nov 15 '22 at 23:05
  • Thanks for the clarification on the color scheme. My question has to do with the blank page I am receiving on my live server - hence why it is the title of my question. I only mentioned the green/blue color scheme because I thought that could be the reason behind why I am getting a blank page (instead of a black one that appears when you correctly render your objects). thanks again – notarob0t123 Nov 16 '22 at 05:48

1 Answers1

0

I've tested your code and I ended up with a black background, so in this case I want you to check the followings the things:

  • Check the name of your .JS file.
  • Check your pathing, make sure that you use the exact file name when you start linking your files with each other.
  • Check the structure of your map and your files, make sure that you've put the right files in the right folders. Take a look at this this question about this, for more information.
  • Check your console log (F12 Button) for any errors.

So in your case, make sure that main.js is written like that and not like mains.js as you wrote in your code. Make sure that main.js is in the same directory as index.html .

JulianDotExe
  • 113
  • 1
  • 8