Very simple project isn't working

Questions
1

Hi everybody,

I have followed a lot of tutorial and I would like to go deeper in ThreeJS. While learning, I would like to forget boilerplate code with : npm, webpack, parcels and things like these.

Then I’m trying to start a very simple project in localhost with just :

  • three.js downloaded

  • index.html
    Only a link to stylesheet and 2 scripts :
    script type=“module” src=“js/three.js”
    script type=“module” src=“js/index.js”

  • index.css
    html, body
    {
    margin: 0;
    padding: 0;
    }

  • index.js
    let scene = new THREE.Scene()
    scene.background = new THREE.Color(0xbfbfbf)

    // Camera
    let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight)
    camera.position.set(1, 2, 6)

    // AxesHelper
    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)

    let renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

  • Project struture :
    src
    |-- css
    …|-- index.css
    |-- js
    …|-- index.js
    …|-- three.js // downloaded
    |-- index.html

I use VSC with Live Server plugin. The result is a black screen.
Usually, I don’t have problems with coding, unless I start from scratch. I think I m missing something from the basics of front-end project, like ES6 module or something else.

Can someone tell me what is wrong in the project please ?

Thx

2

I change script type=“module” src=“js/three.js” for
script type=“module”>import * as THREE from ‘./js/three.js’</

Of course : nothing in the console in Chrome development tools

3

use three.module.js if using type=module
script type=“module” src=“js/three.module.js”

here is a basic project, its using three.module.js
Edit fiddle - JSFiddle - Code Playground

4

1 - Doing that result in : Uncaught ReferenceError: THREE is not defined
I try to rename it : src=“js/three.js” as it is the name I use in the project : same error

2 - I try : script type=“text/javascript” src=“https://threejs.org/build/three.js” and my screen stay black with no errors → Maybe something related with the index.js module import or my ThreeJS code

3 - In the fiddle sample, all imports are from CDN, but I’m trying to set up a project with js code downloaded.

It really looks like I m misunterstanding something in project settings

5

I just find it …
Every black screen solutions are good.

I was missing : renderer.render(scene, camera)

Thx for your help !

1 Like