three.js 创建点线面

Posted 2020-10-22 大米

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了three.js 创建点线面相关的知识，希望对你有一定的参考价值。

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0;}
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src=three.min.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 );
            document.body.appendChild( renderer.domElement );
            camera.position.z = 100;//我们把视线放置到z轴的100位置.这是我们眼睛的位置,如果把点也放在这个100的位置 我们会看不到点，就好像把一个物体放在我们的眼球中，我们不会看到那个物体

            var group = new THREE.Group();
            //创建一个简单的点
            function createPoint() {
                var starsGeometry = new THREE.Geometry();
                starsGeometry.vertices.push(new THREE.Vector3(0,0,10));//设置点的位置在z轴的10的位置，可以试试放在100的位置 我们会看不到点
                var starsMaterial = new THREE.PointsMaterial({color: 0x888888,size:20})
                var starsPoint = new THREE.Points(starsGeometry, starsMaterial);
                group.add(starsPoint);
                scene.add(group);
            }


            //创建一个圆形点
            function createArcPoint(){
              let canvas = document.createElement("canvas");
              canvas.width = 100;
              canvas.height = 100;
              let context = canvas.getContext("2d");
              context.fillStyle = "#ffff00";
              context.arc(50,50,45,0,2*Math.PI);;
              context.fill();
              let texture = new THREE.Texture(canvas);
              texture.needsUpdate = true;
               //创建点，是用PointsMaterial的map属性来设置材质
               var starsGeometry = new THREE.Geometry();
               starsGeometry.vertices.push(new THREE.Vector3(0,0,0));
               starsGeometry.vertices.push(new THREE.Vector3(15,15,0));
               starsGeometry.vertices.push(new THREE.Vector3(-15,2,0));
               var starsMaterial = new THREE.PointsMaterial({color: 0x888888,size:20,map:texture})
               var starsPoint = new THREE.Points(starsGeometry, starsMaterial);
               group.add(starsPoint);
               scene.add(group);
            }

            //创建线
            function createLine(){
              let geometry = new THREE.Geometry();
              geometry.vertices.push(new THREE.Vector3(-35,2,0));
              geometry.vertices.push(new THREE.Vector3(15,15,0));
              geometry.vertices.push(new THREE.Vector3(-15,2,0));
              let material = new THREE.LineBasicMaterial({color:0xff0000}); //注意这里使用的是LineBasicMaterial
              let line = new THREE.Line(geometry,material);
              scene.add(line);
            }

            //创建虚线
            function createLineSegments(){
              let geometry = new THREE.Geometry();
              geometry.vertices.push(new THREE.Vector3(15,15,0));
              geometry.vertices.push(new THREE.Vector3(-15,2,0));
              geometry.computeLineDistances();  //设置虚线
              let material = new THREE.LineDashedMaterial({color:0xff0000,dashSize:3,gapSize:2,lineWidth:1 });//dashSize线的长度 gapSize间隔的长度
              let line = new THREE.LineSegments(geometry,material);
              scene.add(line);
            }

            //创建一个二维平面
            function createSqurePlane(){
              var groundGeometry = new THREE.PlaneGeometry(100, 100, 4, 4);//宽度 长度 宽度段数 长度段数
              var groundMaterial = new THREE.MeshBasicMaterial({color: 0x777777});
              ground = new THREE.Mesh(groundGeometry, groundMaterial);
              //ground.rotation.set(-0.5 * Math.PI, 0, 0); // 沿着 X轴旋转-90°
              scene.add(ground);
            }
            renderer.render(scene, camera);



        </script>
    </body>
</html>

下一篇:创建几何图形

以上是关于three.js 创建点线面的主要内容，如果未能解决你的问题，请参考以下文章

THREE.js 对单个 > 500k 多边形（面）对象的光线投射非常慢，与地球的线相交

three.js(13)-三角形面

Three.js之根据顶点信息绘制立方体并给面设置颜色

Three.js教程：点线网格模型介绍

Three.js 中的自定义纹理着色器

在用three.js画一个航线图，3D的我现在做好了地球但是不知道怎样在球上加上点，并用线将他们连接起来急

three.js 创建点 线 面

three.js 创建点线面