three.js 基础使用1

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

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


        //基础知识恶补

        //THREE.Scene： 
        //  场景图
        //  是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象



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

        init();
        animate();

        function init() {

            //创建相机
            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
            camera.position.z = 1;

            //创建场景
            scene = new THREE.Scene();

            //创建几何体 - 立方体
            geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);//参数：长宽高

            //创建材质
            material = new THREE.MeshNormalMaterial();

            //创建网格，几何体是不能被渲染的，只有几何体和材质 结合成网格 才能被渲染到屏幕上
            mesh = new THREE.Mesh(geometry, material);

            //添加到场景
            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>
猜你喜欢
