three.js 三种方式创建3d平面

1.用线的方式创建3D平面
下面是创建3D画布必不可少的方式。

//创建3D世界
        var canvas3dworld = this.$refs.canvas3d;//获取画布的元素
        var w = canvas3dworld.clientWidth;
        var h = canvas3dworld.clientHeight;

        //创建渲染器
        var renderer = new THREE.WebGLRenderer({
            canvas: canvas3dworld,
            antialias: true,//抗锯齿
        });
        renderer.setSize(w, h);
        renderer.setClearColor(0xffffff);//把渲染器的背景变成白色

        //创建相机
        var scene = new THREE.Scene();

        //创建场景
        var camera = new THREE.PerspectiveCamera(w / 8, w / h, 0.1, 1000);

        //创建一个坐标轴
        var axes = new THREE.AxisHelper(30);
        scene.add(axes);

        //定义相机的x,y,z位置
        camera.position.y = 60;
        camera.position.z = 60;
        camera.lookAt(scene.position);//把相机的位置渲染到场景中

用两个for循环进行循环，X和Y进行for循环进行渲染到场景中

   //用line的方式创建3d平面
        var materialLine = new THREE.LineBasicMaterial({