js 3d图形

  使用Three.js在网上中进行3D图形的展示

  Three.js的官网 https://threejs.org/

  第一个Demo,生成一个旋转的正方体

 

 <style>
        canvas {
            width: 100%;
            height: 100%
        }
    </style>


    <script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
    <script>
        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画布,所有的渲染都是画在renderer.domElement元素上,将元素挂接到body上
        document.body.appendChild(renderer.domElement);

        //创建几何体CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
        //width:立方体x轴的长度
        //height:立方体y轴的长度
        //depth:立方体z轴的深度,也就是长度
        var geometry = new THREE.CubeGeometry(1, 1, 1);//几何体()
        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 )
             * 各个参数的意义是:
             * scene:前面定义的场景
             * camera:前面定义的相机
             * renderTarget:渲染的目标,默认是渲染到前面定义的render变量中
             * forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。
             */
            renderer.render(scene, camera);
        }
        render();
    </script>

 

posted @ 2018-07-09 16:02  _York  阅读(...)  评论(...编辑  收藏