Problem with code

<I am pretty new to javascript and I just turned 14 so that’s probably why if I typed something wrong or described something in a sloppy way, And I am fully aware that this might not even be a bug, just a usual “this code is non-compatible with your hardware”. I’m having a problem with importing this one code into my chrome(normal inspect) console.>

Describe the bug
As I import the code into my console, this problem;
“VM214:1 Uncaught ReferenceError: THREE is not defined
at :1:1” is being caused.
A clear and concise description of what the bug is. Before submitting, please remove unnecessary sections.
I don’t understand this and I’d really appreciate a troubleshooter.

So here is what code is.

  • The program/code: Three.js
  • Explanation: just a normal installation code for this program called three.js, I have read and learned about it and I find myself really interested.

Steps to reproduce the behavior:

  1. Go to 'here is the code I wanted to run
  2. See error: VM214: 1

The first THREE is where my own console troubleshoots.

const renderer = new _**THREE**_.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); const controls = new OrbitControls( camera, renderer.domElement ); //controls.update() must be called after any manual changes to the camera's transform camera.position.set( 0, 20, 100 ); controls.update(); function animate() { requestAnimationFrame( animate ); // required if controls.enableDamping or controls.autoRotate are set to true controls.update(); renderer.render( scene, camera ); }

Live example

Expected behavior

A clear and concise description of what you expected to happen.
I expected this to work since the code is stable and just a normal installation code. I’ve never actually installed a program in this way before. might be the problem.
Screenshots

If applicable, add screenshots to help explain your problem (drag and drop the image).

Platform:

  • Device: [HP chromebook]
  • OS: [Chrome]
  • Browser: [Chrome]
  • Three.js version: [dev, v.0.136.0]

I am not quite clear what exactly you are doing and in which constellation you are confronted with error messages.

As a beginner, it makes sense to start from a working example and then modify it.

Have a look at the examples in the collection.

See * discourse.threejs.hofk.de
You can also try the beginner example piece by piece.
:slightly_smiling_face:

1 Like

You can also use this basic template. It’s on Codepen which is a simple online development environment and includes a basic three.js setup with a scene, camera, OrbitControls, lights, and a renderer. It then starts an animation loop to draw frames.

It also spins the box around, to stop that you can remove these lines and then you’ll be able to see the OrbitControls working more easily.

box.rotation.x += 0.01;
box.rotation.y += 0.01;

Working with an online editor like this is great when you are getting started because then you don’t need to worry about lots of technical stuff like setting up a server and so on.

2 Likes