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）：
        //  是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象



        //材质：   原文：https://www.cnblogs.com/amy2011/p/6148736.html
        //  材质就像物体的皮肤，决定了几何体的外表，例如是否像草地/金属，是否透明，是否显示线框等
        //  Three.js提供了一个材质基类THREE.Material，该基类拥有three.js所有材质的公有属性
        //  材质的公共属性分类：
        //      基础属性：ID，name，透明度，是否可见，是否需要刷新等
        //      融合属性：决定了物体如何与背景融合
        //      高级属性：可以控制WEBGL上下文渲染物体的方法，大多数情况下，是不会用这些属性，我们这里不再讨论



        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();


            //material.visible = false;//是否可见
            material.transparent = true;//是否透明
            material.opacity = 0.9;//透明度


            //创建网格，几何体是不能被渲染的，只有几何体和材质 结合成网格 才能被渲染到屏幕上
            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>
效果：