Creating a scene

The purpose of this section is a brief introduction three.js. We will build a scene with a rotating cube to start.

before the start

Before using three.js, you need to display it somewhere. The following HTML and js / directory of three.js save a copy to a file on your computer , and then open it in your browser.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个three.js程序</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
       //JS代码区域
    </script>
</body>
</html>

that's it. All of the following code is placed in an empty <script> tags.

Creating a scene

In order to really be able to use three.js display anything, we need three things: the scene, the camera and renderer, so that we can use the camera to render the scene.

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

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

Let's take a moment to explain what happened here. Now, we have set the scene, our camera and renderer.

three.js There are a number of different cameras. Now, let's use PerspectiveCamera .

The first attributes: vision . FOV at any given moment is seen on the display scene range. This value is in degrees.

The second is: aspect ratio . You almost always want to use the height divided by the width of the element, otherwise the resulting effect and effect of playing old movies on a widescreen TV the same - the image looks very compressed.

The next two properties are near and far clipping plane. What does this mean, the farther away an object is from the camera than the value of the far or near the vicinity will not be rendered. You do not have to worry about this now, but you might want to use other values in the application for better performance.

Next is the renderer. This is where the magic happens. In addition to WebGLRenderer we used here, three.js there are other, often used with older browsers or users for some reason does not support WebGL user's backup.

In addition to creating renderer instances, we also need to set the size of the rendering application instance. Use our best to fill in the application width and height of the area - in this case, the width and height of the browser window. For performance-intensive applications, you can also give setSize small value, for example window.innerWidth / 2 and window.innerHeight / 2 , which will allow applications to half the size of the presentation.

If you want to keep the size of the application but at a lower resolution rendering, you can by setSize set to false as updateStyle (third parameter) to achieve. For example, in view of your <canvas> 100% of the width and height , the setSize (window.innerWidth / 2, window.innerHeight / 2, to false) will exhibit half the resolution of your application.

Last but not least is that we'll renderer element added to an HTML document. This is the renderer to show us <canvas> elements of the scene.

"That's fine, but where you promised that in the cube?" Add it now.

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

To create a cube, we need a BoxGeometry . This object contains cube all points ( vertices ) and the filler ( surface ). In the future we will discuss more on this.

In addition to the geometry, we also need a material be colored. Three.js comes with several materials, but now we will stick with MeshBasicMaterial . All materials have a property of an object to be applied thereto. To make things simple, we only provide 0x00ff00 Color attributes , it is green. This is used in the CSS, or Photoshop color ( hexadecimal color in the same way) in.

The third thing we need is a grid . The grid is employed and the geometry of the object on which the material is applied, then we can be inserted into the scene and move freely.

By default, when we call upon scene.add () , we add the content will be added to the coordinates (0,0,0) in . This will cause the camera and cubes are located inside each other. To avoid this, we need only a little to remove the camera.

Render the scene

If you copy the code from the top to the HTML file we created earlier, you will not see anything. This is because we have not actually render anything. To do this, we need the so-called render Loop or Animate .

function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();

This creates a cycle, the refresh is to draw the scene every time the screen is refreshed (on a typical screen, which means that 60 times per second). If you are not familiar with the content writing games in a browser, you can say , "Why do not we create setInterval it?" The question is - we can, but requestAnimationFrame has many advantages. Perhaps the most important is that when the user navigates to another browser tab, it will be suspended, so they do not waste valuable processing power and battery life.

Animated cube

If all of the above code into the file we created earlier start, you will see a green box. Let us become even more interesting by rotating it.

In your animation function of renderer.render call the above add the following :

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

This will run once per frame (usually run 60 times per second), and provide a beautiful rotating cube animation. Basically, you want all content to move or change in the run-time application must go through the animation cycle. Of course, you can call other functions from there, so as not to hundreds of lines of animation function ends .

result

Congratulations! You have now completed the first three.js application. Very simple, you have to start somewhere.

The complete code can be obtained in the following, and as editable in real-time example . Try to better understand how it works.

<html>
<head>
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);newrenderer =was
        

         THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame(animate);

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

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>
</html>

Three.js one study notes Helloworld (translation)

Creating a scene

before the start

Creating a scene

Render the scene

Animated cube

result

Guess you like