Creating three.js the coordinate system grid

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }

        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body> 
<div ID = "Canvas-Frame"> </ div> 
<Script the src = "../ static / Three.js-Master / Build / Three.js"> </ Script> 
<Script> var the renderer;   // renderer, declare variables function initThree () { 
        the renderer = new new THREE.WebGLRenderer ();   // Create a renderer 
        renderer.setSize (window.innerWidth, window.innerHeight);   // set width height 
        document.getElementById ( ' . canvas-frame ') the appendChild (renderer.domElement);   // add to the canvas canvas-frame which 
        renderer.setClearColor (0xFFFFFF, 1.0);  // set the background color and transparency     } var Camera;   //

    

    




    Camera 

    function initCamera () { 
        Camera = new new THREE.PerspectiveCamera (45, window.innerWidth / window.innerHeight,. 1, 500);   // Create a camera perspective 
        camera.position.set (0, 500, 0);   // Set camera coordinate 
        camera.up.x = 0 ; 
        camera.up.y = 0 ; 
        camera.up.z =. 1 ; 
        camera.lookAt ( 0, 0, 0 ); 
    } 


    var sCENE;   // scene 

    function initScene () { 
        sCENE = new new THREE.Scene ();   // create a scene
     }

     Var Light; 

    function initLight () { 
        Light = new new THREE.DirectionalLight (0xFF0000, 1.0, 0);   // THREE.DirectionalLight parallel light can be seen as far away from the light 
        light.position.set (100, 100, 200) ;   // coordinate 
        scene.add (Light);   // add to the scene 
    } 


    function the initObject () {
         var geometry = new new THREE.Geometry ();   // each surface geometry of the three-dimensional space with the point set point set is closed It sets 
        // the x-axis defines two points p1 (-500,0,0), p2 (500,0,0 ). 
        geometry.vertices.push ( new new THREE.Vector3 (-200, 0, 0 ));
        geometry.vertices.push ( new new THREE.Vector3 (200, 0, 0 ));
         // idea: we want to draw a grid of coordinates, then we should find the point line. The virtual into a square grid, aliquoted find several points on the boundary of the square, connecting these points twenty-two, it is possible to draw the entire grid. 
        for ( var I = 0; I <=. 8; I ++ ) {
             // These two points determine a line segment x-axis, these line segments 20 replication, are moved parallel to the z-axis at different locations, it is possible forming a set of parallel line segments. 
            // Similarly, this line p1p2 the first 90 degrees of rotation about the y-axis, and then copy the parts 20, parallel to the z-axis is moved to a different location, can form a set of parallel lines. 
            // After the above step, a coordinate grid can be obtained. 
            var LINEX = new new THREE.Line (Geometry, new new THREE.LineBasicMaterial ({Color: 0x000000, Opacity: 0.2 })); 
            linex.position.z = (I * 50) - 200 is ; 
            scene.add (LINEX);

            var liney = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
            liney.position.x = (i * 50) - 200;
            liney.rotation.y = 90 * Math.PI / 180;  // 将线旋转90度
            scene.add(liney);

        }
    }


    function threeStart() {
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        renderer.clear();
        renderer.render(scene, camera);
    }

    threeStart();

</script>
</body>
</html>
Incidental three.js code Download
Creating three.js the coordinate system grid

Guess you like
