THREE.js(一)

        //创建场景
        var scene = new THREE.Scene();
        //透视摄像机(视野角度,长宽比,远剪切面,进剪切面,)
        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
        //渲染器
        var renderer = new  THREE.WebGLRenderer();
        //设置渲染器的大小
        renderer.setSize(window.innerWidth,window.innerHeight);
        //渲染器renderer的domElement元素,表示渲染器中的画布
        document.body.appendChild(renderer.domElement);
        //创建几何体(长,宽,高)
        var geometry = new THREE.CubeGeometry(2,2,2);
        //材质增加颜色
        var material = new THREE.MeshBasicMaterial({color:0x00ff00});
        //网格(几何体,材质)
        var cube = new THREE.Mesh(geometry,material);
        //场景增加几何体
        scene.add(cube);
        camera.position.z=5;
        function render(){
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            //渲染(场景,相机)render( scene, camera, renderTarget, forceClear )
            //renderTarget:渲染的目标,默认是渲染到前面定义的render变量中
            //forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除
            renderer.render(scene, camera);
        }
        render();

猜你喜欢

转载自www.cnblogs.com/vipp/p/12010116.html