WebGL3----点,线,面的学习(2)

      4、知识补充:右手坐标系

        

      可以观察上图,

              相同点: X轴正方向向右,Y轴正方向向上;

              不同点: 左手为向屏幕里,而右手为向屏幕外;

 

       5、线条的深入理解----绘制一个网格

        1)定义两个点

           在X轴上定义两个点P1(-500,0,0),P2(500,0,0)

         2)算法

           这两个点决定了X轴上一条线段,将这条线段复制20遍,分别平行移动到Z轴的不同位置,就能形成一组平行的线段;

           同理,将X轴上的这条线段先围绕Y轴旋转90度,然后在复制20份,平行于X轴移动到不同位置;代码如下:

           for(var i=0;i<=20;i++){

                var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({ color: 0x000000,opacity: 0.2}));

                line.position.z= (i*50)-500;

                scene.add(line);

                var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({ color: 0x000000,opacity: 0.2}));

                line.rotation.y = 90*Math.PI/180; //旋转90度

                line.position.x = (i*50)-500;

                scene.add(line);

           }

    总结:

            对于立体的图像如果很难脑补,可以用笔画出来这样更加容易理解;

posted @ 2019-02-19 17:35  倩妞驾到  阅读(318)  评论(0编辑  收藏  举报