Three.js start (with code) 2

1 download Three.js Code

https://github.com/mrdoob/three.js/tree/master/build

2 Reference Methods

Add the following code in HTML:

<script type="text/javascript" src="js/three.js"></script>

3 Definitions Canvas element

Manually define Canvas element (WebGL rendering required)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <script type="text/javascript" src="js/three.js"></script>
    <script>
        function init() {
            
        }
    </script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px"></canvas>

</body>
</html>

4 Define Big Three

It means to create a three-piece Three.js typical procedure must contain at least three basic elements: the renderer, the scene and the camera.

4.1 renderer (Renderer)

4.2 scene (Scene)

4.3 camera (Camera)

The relationship between them

　　The scene is like a stage, the above can put all sorts of things

　　Renderer like the lights on the stage, which determines what the audience see what kind of effect

　　The camera position as the viewer's eye, the audience is not the same station, see things on the stage will not be exactly the same

　　And you need something on the stage by scene.add () to put up

This section provides the complete code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <script type="text/javascript" src="js/three.js"></script>
    <script>
        function init() {
            // 定义三大件
            var renderer = new THREE.WebGLRenderer (                  {define renderer//

                    Canvas: document.getElementById ( ' mainCanvas ' ) // consistent with the id Canvas manually defined name 
                    / *   may be generated by the Canvas element itself three.js
                    renderer.setSize(400,300);
                    document.getElementsByTagName('body')[0].appendChild(renderer.domElement); */
                }
            );
            renderer.setClearColor ( 0x000000 );   // background color to black (clear image)

            var SCENE =  new new THREE.Scene ()   // defines the scene

            var Camera =  new new THREE.PerspectiveCamera ( 45 , . 4 / 3,1,1000);   / / Define a perspective projection camera
            camera.position.set ( 0 , 0 , . 5 );   // Set the camera coordinate 
            scene.add (Camera)   // add the camera into the scene

        }
    </script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px"></canvas>

</body>
</html>

Note: This article is mainly for the series Three.js "Three.js Getting Started Guide," the study notes and some personal understanding, exchanges and discussions are welcome, thank the author Zhang Wenli ~

OVER~