three.js Basics 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

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


        // basics of catching up

        @ THREE.Scene: 
        //   scene FIG 
        //   is the container of all the different objects, i.e. the object is to save all objects, lights, cameras, and other objects required to render



        var camera, scene, renderer;
        var geometry, material, mesh;

        init();
        animate();

        function init() {

            // Create Camera 
            Camera =  new new THREE.PerspectiveCamera ( 70 , window.innerWidth / window.innerHeight, 0.01 , 10 );
            camera.position.z = 1;

            // Create a scene 
            SCENE =  new new THREE.Scene ();

            // create a geometry - Cube 
            Geometry =  new new THREE.BoxGeometry ( 0.2 , 0.2 , 0.2 ); // Parameters: LWH

            // Create a material 
            Material =  new new THREE.MeshNormalMaterial ();

            // create a grid, geometry can not be rendered, only the geometry and materials are combined into a grid in order to be rendered to the screen 
            Mesh =  new new THREE.Mesh (the Geometry, Material);

            // add to the scene 
            scene.add (mesh);

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
        }


        function animate() {

            requestAnimationFrame(animate);

            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.02;

            renderer.render(scene, camera);
        }
    </script>
</body>
</html>
Guess you like
