Please help, new to three.js

Questions
1

Hi,

I’m just getting started with three.js and I’m running into trouble with the very first exercise. I’m doing the exercise listed here: https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene

I have downloaded three.js, but the cube is not showing up. Does the file need to be saved in a certain place?

Thanks,

Yorunii

2

The directory structure should look like this:

js/three.js
index.html

Here is a similar live version of the code http://jsfiddle.net/hfj7gm6t/

3

Thank you! I’ll give it a try.

4

I can’t seem to figure it out. This is frustrating me. I have the three.js file saved just as you described, and that isn’t working.

But, for now, I will use the model set-up in jsfiddle.

Interestingly enough, I copied the Github source link into my script tags, and that didn’t work either. Since I am using the link, it shouldn’t give me any trouble for finding the source. Do you know why it isn’t working this way either?

Thanks

My first three.js app body { margin: 0; } canvas { width: 100%; height: 100% }
5

Copy the following code into index.html. It loads the three.js script from an online source, so you don’t need the js/three.js file.

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script>

    <style>
      body {
        background-color: #000000;
        margin: 0px;
        overflow: hidden;
      }
    </style>

    <title>Three.js basic setup</title>
  </head>

  <body>
    <script>
      // create a WebGLRenderer and set its width and height
      var renderer = new THREE.WebGLRenderer( );
      renderer.setSize( window.innerWidth, window.innerHeight );

      // add the automatically created canvas element to the page
      document.body.appendChild( renderer.domElement );

      // create a Scene
      var scene = new THREE.Scene();

      // create a PerspectiveCamera
      var fov = 75;
      var aspect = window.innerWidth / window.innerHeight;
      var nearClippingPlane = 0.1;
      var farClippingPlane = 1000;
      var camera = new THREE.PerspectiveCamera( fov, aspect, nearClippingPlane, farClippingPlane );
      camera.position.set( 0, 0, 20 );

      // create a TorusKnotBufferGeometry
      var geometry = new THREE.TorusKnotBufferGeometry( 5, 1, 100, 16 );

      // create a MeshStandardMaterial and set its color to purple
      var material = new THREE.MeshStandardMaterial( {
          color: 0xb300b3, 
      } );

      // create a Mesh containing the geometry and material and add it to the scene
      var mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );

      // create a dark grey ambient light with an intensity of 1.0 and add it to the scene
      var ambientLight = new THREE.AmbientLight( 0x666666, 1.0 );  
      scene.add( ambientLight );

      // Create a white directional light with an intensity of 1.0
      var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
      directionalLight.position.set( 0, 10, 0 );
      scene.add( directionalLight );

      function animate() {
        // schedule the animate function to be called at the start of every frame
        requestAnimationFrame( animate );
        
        // increase the mesh's rotation each frame
        mesh.rotation.z += 0.01;
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.01;
        
        // render a frame
        renderer.render( scene, camera );
      }
      animate();
    
    </script>
  </body>

</html>

You can save the file anywhere and load it in any recent browser and it should work. If you are still getting problems then open the developer console in your browser (ctrl + shift +i in chome) and check the console tab for error messages.

1 Like
6

oh wow! thank you, everyone! that works! :smiley:

Mugen, thank you for the jsfiddle site, I’m thinking I will use that instead of a text editor such as visual studio code. and also thank you for how the code is set up there.

and thank you looeee for the link and the code!

Now I feel I am ready to take on three.js. Thanks!

1 Like
7

I highly recommend Notepad++. best.editor.ever.imho.

8

Thank you! I’ve been looking for one. I’ve been using Visual Studio Code,
but I’ll have to check this one out.

9

is it supposed to be a pretzel spinning or a cube?
because a pretzel showed up. Or something like that.

1 Like