点 ponint

首先,我们如果需要在环境中画一个点.我们希望这个点是圆形的,那么我们就创建一个球体网格模型对象,设置我们希望的位置(position),下面的代码中,把y轴+1.是因为在业务场景中把圆点浮出面板,可以看到一个完整的球体点的位置.

  1. //- 添加点
  2. function addPoint(point) {
  3.   if (scene) {
  4.     scene.children.forEach(item => {
  5.       if (item.type === "LineLoop") {
  6.         scene.remove(item);
  7.         tempData = []
  8.       }
  9.     })
  10.   }
  11.   let geometry233 = new THREE.SphereGeometry(1, 40, 40); //创建一个立方体几何对象Geometry
  12.   // 点渲染模式
  13.   let material233 = new THREE.PointsMaterial({
  14.     color: 0xff0000,
  15.     // size: 5.0 //点对象像素尺寸
  16.   }); //材质对象
  17.   let points233 = new THREE.Points(geometry233, material233); //点模型对象
  18.   points233.position.set(point.x, point.y +1, point.z);
  19.   scene.add(points233)
  21. }

核心代码是通过实例化three.js的Points对象,通过外部点击事件来获取需要放置点的位置,然后添加点对象到场景中

线 Line

有了点的位置,只需要添加线把点连接起来,就行了,下面的代码中包含了部分业务逻辑成分.
tempData变量为模型中的点的个数.通过循环,把实例化THREE.Vector3对象进行数组保存在tempData2变量中.
geometry.vertices需要一个数组,所以我们就直接把前面保存好的tempData2数组push进去即可.
vertices: 用来保存模型中所有顶点位置的数组。
要更新该数组，Geometry.verticesNeedUpdate 需要被设置为true。

  1. let geometry = new THREE.Geometry(); //声明一个空几何体对象
  2. tempData.forEach(item => {
  3.   tempData2.push(new THREE.Vector3(item.x, item.y + 1, item.z))
  4. })
  5. geometry.vertices.push(...tempData2)
  6. let material = new THREE.MeshLambertMaterial({
  7.   color: 0xfac15f,//三角面颜色
  8.   side: THREE.DoubleSide//两面可见
  9. });//材质对象
  10. let line = new THREE.LineLoop(geometry, material);//线条模型对象
  11. scene.add(line);

通过添加点和线了,我们在点击后即可看到连线效果了.
image.png
由于这里用的是LineLoop对象,当点击第三个点的时候,会自动连线闭环,如果不希望自动闭环可以使用Line对象进行实例化

  1. var line = new THREE.Line( geometry, material );

在有线的部分绘制立方体

首先我们明白,绘制立方体和我们不同在(0,0)位置放置一个立方体并无不同,只是我们需要精确到线条的长度决定于墙体的长度,线条的角度决定了墙体的角度即可.
这里提供一个墙体绘制算法函数,通过传入4个点的方式计算长度和角度.

  1. //画墙
  2. function drawWall(objs) {
  3.   //长度
  4.   let lens = Math.sqrt(Math.pow((Number(objs.eZ) - Number(objs.sZ)), 2) + Math.pow((Number(objs.eX) - Number(objs.sX)), 2));
  5.   //位置
  6.   let posx = (objs.eX + objs.sX) / 2;
  7.   let posz = (objs.eZ + objs.sZ) / 2;
  8.   //- 纹理材质
  9.   var texture = new THREE.TextureLoader().load("images/pink.png");
  10.   texture.wrapS = THREE.RepeatWrapping;
  11.   texture.wrapT = THREE.RepeatWrapping;
  12.   texture.repeat.set(4, 4);
  14.   //旋转角度
  15.   let rotate = -Math.atan2((objs.eZ - objs.sZ), (objs.eX - objs.sX));
  16.   console.log(Math.atan2((objs.eZ - objs.sZ), (objs.eX - objs.sX)))
  17.   //                       return;
  18.   let box = new THREE.CubeGeometry(lens, 15, 2); //- 墙体参数
  19.   var material = new THREE.MeshBasicMaterial({
  20.     // color: 0xe04747,
  21.     transparent: true,
  22.     opacity: 0.4,
  23.     map: texture
  24.   });
  25.   var mesh = new THREE.Mesh(box, material);
  26.   mesh.position.set(posx, 15 / 2, posz);
  27.   mesh.rotation.y = rotate;
  28.   this.scene.add(mesh);
  29.   render();
  30. }

调用绘制墙体函数的时,就需要手动组装一下每个点的参数.

  1. document.getElementById('show3d').addEventListener('click', function (e) {
  2.   if (scene) {
  3.     scene.children.forEach(item => {
  4.       //- 判断当前子对象是否是环形线
  5.       if (item.type === 'LineLoop') {
  6.         console.log(item.geometry.vertices)
  7.         for (let i = 0; i < item.geometry.vertices.length; i++) {
  8.           if (i !== item.geometry.vertices.length - 1) {
  9.             let params = {
  10.               eZ: item.geometry.vertices[i + 1].z,
  11.               sZ: item.geometry.vertices[i].z,
  12.               eX: item.geometry.vertices[i + 1].x,
  13.               sX: item.geometry.vertices[i].x
  14.             }
  15.             drawWall(params)
  16.           }
  17.         }
  18.         //- 如果不是一条线,至少是一个三角形的情况最后一条边
  19.         if (item.geometry.vertices.length > 2) {
  20.           let index = item.geometry.vertices.length - 1;
  21.           let params = {
  22.             eZ: item.geometry.vertices[0].z,
  23.             sZ: item.geometry.vertices[index].z,
  24.             eX: item.geometry.vertices[0].x,
  25.             sX: item.geometry.vertices[index].x
  26.           }
  27.           drawWall(params)
  28.         }
  29.         // drawWall(item.geometry)
  30.       }
  31.     })
  32.   }
  33. })

这个时候,我们就能够根据我们绘制的线进行生成墙体了.
效果;
image.png

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>第一个three.js文件_WebGL三维场景</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             overflow: hidden;
  11.             /* 隐藏body窗口区域滚动条 */
  12.         }
  14.         .clickFn {
  15.             position: fixed;
  16.             top: 10px;
  17.             right: 10px;
  18.             padding: 4px 15px;
  19.             background-color: #999;
  20.             border-radius: 4px;
  21.         }
  22.     </style>
  23.     <!--引入three.js三维引擎-->
  24.     <script src="./js-r100/three.js"></script>
  25.     <script src="./js-r100/controls/OrbitControls.js"></script>
  26. </head>
  28. <body>
  29.     <div class='clickFn' id="show3d">显示3D墙体</div>
  30.     <script>
  31.         /**
  32.          * 创建场景对象Scene
  33.          */
  34.         var scene = new THREE.Scene();
  35.         /**
  36.          * 创建网格模型
  37.          */
  38.         // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
  39.         var geometry = new THREE.BoxGeometry(100, 2, 100); //创建一个立方体几何对象Geometry
  40.         var material = new THREE.MeshLambertMaterial({
  41.             color: 0xffffff,
  42.             name: 'belinebox'
  43.         }); //材质对象Material
  44.         var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  45.         scene.add(mesh); //网格模型添加到场景中
  46.         /**
  47.          * 光源设置
  48.          */
  49.         //点光源
  50.         var point = new THREE.PointLight(0xffffff);
  51.         point.position.set(400, 200, 300); //点光源位置
  52.         scene.add(point); //点光源添加到场景中
  53.         //环境光
  54.         var ambient = new THREE.AmbientLight(0x444444);
  55.         scene.add(ambient);
  56.         /**
  57.          * 相机设置
  58.          */
  59.         var width = window.innerWidth; //窗口宽度
  60.         var height = window.innerHeight; //窗口高度
  61.         var k = width / height; //窗口宽高比
  62.         var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  63.         //创建相机对象
  64.         var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
  65.         camera.position.set(200, 300, 200); //设置相机位置
  66.         camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  67.         /**
  68.          * 创建渲染器对象
  69.          */
  70.         var renderer = new THREE.WebGLRenderer();
  71.         renderer.setSize(width, height);//设置渲染区域尺寸
  72.         renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  73.         document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  74.         //- 渲染函数
  75.         function render() {
  76.             //执行渲染操作   指定场景、相机作为参数
  77.             renderer.render(scene, camera);
  78.         }
  79.         render();
  80.         //- 添加鼠标对视觉相机的操作
  81.         let controls = new THREE.OrbitControls(camera);
  82.         //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
  83.         controls.addEventListener('change', render, { passive: true });
  86.         // 获取与射线相交的对象数组
  87.         function getIntersects(event) {
  88.             event.preventDefault();
  89.             // console.log("event.clientX:" + event.clientX)
  90.             // console.log("event.clientY:" + event.clientY)
  92.             // 声明 raycaster 和 mouse 变量
  93.             var raycaster = new THREE.Raycaster();
  94.             var mouse = new THREE.Vector2();
  96.             // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
  97.             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  98.             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  100.             //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
  101.             raycaster.setFromCamera(mouse, camera);
  103.             // 获取与raycaster射线相交的数组集合，其中的元素按照距离排序，越近的越靠前
  104.             var intersects = raycaster.intersectObjects(scene.children);
  106.             //返回选中的对象数组
  107.             return intersects;
  108.         }
  109.         //- 随机生成16进制颜色
  110.         function getColor() {
  111.             var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
  112.             var colorArray = colorElements.split(",");
  113.             var color = "#";
  114.             for (var i = 0; i < 6; i++) {
  115.                 color += colorArray[Math.floor(Math.random() * 16)];
  116.             }
  117.             return color;
  118.         }
  119.         //画墙
  120.         function drawWall(objs) {
  121.             //长度
  122.             let lens = Math.sqrt(Math.pow((Number(objs.eZ) - Number(objs.sZ)), 2) + Math.pow((Number(objs.eX) - Number(objs.sX)), 2));
  123.             //位置
  124.             let posx = (objs.eX + objs.sX) / 2;
  125.             let posz = (objs.eZ + objs.sZ) / 2;
  126.             //- 纹理材质
  127.             var texture = new THREE.TextureLoader().load("images/pink.png");
  128.             texture.wrapS = THREE.RepeatWrapping;
  129.             texture.wrapT = THREE.RepeatWrapping;
  130.             texture.repeat.set(4, 4);
  132.             //旋转角度
  133.             let rotate = -Math.atan2((objs.eZ - objs.sZ), (objs.eX - objs.sX));
  134.             console.log(Math.atan2((objs.eZ - objs.sZ), (objs.eX - objs.sX)))
  135.             //                       return;
  136.             let box = new THREE.CubeGeometry(lens, 15, 2); //- 墙体参数
  137.             var material = new THREE.MeshBasicMaterial({
  138.                 // color: 0xe04747,
  139.                 transparent: true,
  140.                 opacity: 0.4,
  141.                 map: texture
  142.             });
  143.             var mesh = new THREE.Mesh(box, material);
  144.             mesh.position.set(posx, 15 / 2, posz);
  145.             mesh.rotation.y = rotate;
  146.             this.scene.add(mesh);
  147.             render();
  148.         }
  150.         document.getElementById('show3d').addEventListener('click', function (e) {
  151.             if (scene) {
  152.                 scene.children.forEach(item => {
  153.                     //- 判断当前子对象是否是环形线
  154.                     if (item.type === 'LineLoop') {
  155.                         console.log(item.geometry.vertices)
  156.                         for (let i = 0; i < item.geometry.vertices.length; i++) {
  157.                             if (i !== item.geometry.vertices.length - 1) {
  158.                                 let params = {
  159.                                     eZ: item.geometry.vertices[i + 1].z,
  160.                                     sZ: item.geometry.vertices[i].z,
  161.                                     eX: item.geometry.vertices[i + 1].x,
  162.                                     sX: item.geometry.vertices[i].x
  163.                                 }
  164.                                 drawWall(params)
  165.                             }
  166.                         }
  167.                         //- 如果不是一条线,至少是一个三角形的情况最后一条边
  168.                         if (item.geometry.vertices.length > 2) {
  169.                             let index = item.geometry.vertices.length - 1;
  170.                             let params = {
  171.                                 eZ: item.geometry.vertices[0].z,
  172.                                 sZ: item.geometry.vertices[index].z,
  173.                                 eX: item.geometry.vertices[0].x,
  174.                                 sX: item.geometry.vertices[index].x
  175.                             }
  176.                             drawWall(params)
  177.                         }
  178.                         // drawWall(item.geometry)
  179.                     }
  180.                 })
  181.             }
  182.         })
  183.         let isdown = false, ismove = false;
  184.         window.addEventListener('mousemove', function () {
  185.             if (isdown) {
  186.                 ismove = true;
  187.                 //鼠标拖动事件执行函数
  188.             }
  189.         })
  190.         window.addEventListener('mousedown', function () {
  191.             isdown = true
  192.             ismove = false
  193.         })
  194.         //- 点击事件
  195.         window.addEventListener('mouseup', function (event) {
  196.             if (!isdown && ismove) {
  197.                 return 0;
  198.             }
  199.             if (ismove) {
  200.                 return 0;
  201.             }
  202.             let intsersects = getIntersects(event)
  203.             if (intsersects.length > 0) {
  204.                 if (intsersects[0].object.material.name === 'belinebox') {
  205.                     let mathColor = getColor();
  206.                     console.log(intsersects[0])
  207.                     // intsersects[0].object.material.color.set(mathColor)
  208.                     //- 添加点到点击的面板上
  209.                     addPoint(intsersects[0].point);
  210.                     render()
  211.                 }
  212.             }
  213.         })
  214.         var tempData = []; //- 存放当前模型中的点的个数
  215.         var tempData2 = [];
  216.         //- 添加点
  217.         function addPoint(point) {
  218.             if (scene) {
  219.                 scene.children.forEach(item => {
  220.                     if (item.type === "LineLoop") {
  221.                         scene.remove(item);
  222.                         tempData = []
  223.                     }
  224.                 })
  225.             }
  226.             tempData.push(point)
  227.             let geometry233 = new THREE.SphereGeometry(1, 40, 40); //创建一个立方体几何对象Geometry
  228.             // 点渲染模式
  229.             let material233 = new THREE.PointsMaterial({
  230.                 color: 0xff0000,
  231.                 // size: 5.0 //点对象像素尺寸
  232.             }); //材质对象
  233.             let points233 = new THREE.Points(geometry233, material233); //点模型对象
  234.             points233.position.set(point.x, point.y +1, point.z);
  235.             scene.add(points233)
  236.             let geometry = new THREE.Geometry(); //声明一个空几何体对象
  237.             tempData.forEach(item => {
  238.                 tempData2.push(new THREE.Vector3(item.x, item.y + 1, item.z))
  239.             })
  240.             console.log(tempData2, 999)
  241.             geometry.vertices.push(...tempData2)
  242.             let material = new THREE.MeshLambertMaterial({
  243.                 color: 0xfac15f,//三角面颜色
  244.                 side: THREE.DoubleSide//两面可见
  245.             });//材质对象
  246.             let line = new THREE.LineLoop(geometry, material);//线条模型对象
  247.             scene.add(line);
  248.         }
  249.     </script>
  250. </body>
  252. </html>

绘制底部区域

绘制的区域底部是个多边形,我们可以通过前面画点的形式添加多个三角形来填充多边形,经常尝试发现,如果所有点在当前角度下都是最外侧,则显示正常,如果出现”凹”字类型的有部分挖空区域,则需要通过算法来实现三角形的绘制方法了,目前该代码存在算法bug

  1.  //- 画不规则图形
  2. let geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
  3. console.log(pointVector3Arr, 222);
  4. //顶点坐标添加到geometry对象
  5. geometry.vertices.push(...pointVector3Arr)
  6. if (pointVector3Arr.length > 2) {
  7.   pointVector3Arr.forEach((item, index) => {
  8.     if (index < pointVector3Arr.length - 2) {
  9.       face3Arr.push(new THREE.Face3(0, index + 1, index + 2))
  10.       face3Arr[index].color = new THREE.Color(0xff0000);
  11.     }
  12.   })
  13. }
  14. geometry.faces.push(...face3Arr);
  15. console.log(geometry);
  16. let material = new THREE.MeshBasicMaterial({
  17.   color: 0xe04747,
  18.   side: THREE.DoubleSide, // -两面可见
  19. });
  20. let mesh = new THREE.Mesh(geometry, material);
  21. scene.add(mesh);
  22. render();

呈现效果1: 当不存在凹面的情况
image.png
呈现效果2: 存在凹面的情况
image.png
这样肯定是不行的,项目中电子围栏的区域底部虽然绘制三角形的方式进行了填充,当遇到有向内部缺口时,底部区域范围就出现问题了.为了解决这个问题,我们需要换一个思路来填充底部区域

shape 绘制多边形底部区域

这里写了一个方法来实现底部区域绘制,只要通过shape对象,添加各点坐标,通过ShapeBufferGeometry创建一个多边形的几何体,放置到具体的位置上.
这里需要注意的是,shape.moveTo以及lineTo函数接收的都是一个平面坐标系.当直接通过ShapeBufferGeometry创建几何体添加到场景后,是竖直向下的,这里我们需要在生成Mesh对象后,对Mesh对象进行旋转.就可以正常显示了

  1. //- 画不规则多边形底座 -- 用于作业面底部区域颜色绘制
  2. function generatePloygon() {
  3.   let pointArr = [];
  4.   if (scene) {
  5.     scene.children.forEach(item => {
  6.       //- 判断当前子对象是否是环形线
  7.       if (item.type === 'LineLoop') {
  8.         item.geometry.vertices.forEach(item2 => {
  9.           pointArr.push({ x: item2.x, y: item2.y, z: item2.z })
  10.         })
  11.       }
  12.     })
  13.   }
  14.   //- 根据绘制的点来定义一个二维形状平面
  15.   let shape = new THREE.Shape();
  16.   console.log(pointArr, 111);
  17.   shape.moveTo(pointArr[0].x, pointArr[0].z);
  18.   for (let i = 1; i < pointArr.length; i++) {
  19.     const element = pointArr[i];
  20.     shape.lineTo(pointArr[i].x, pointArr[i].z);
  21.   }
  22.   shape.autoClose = true;
  23.   //- 从一个或多个路径形状中创建一个单面多边形几何体
  24.   let shapeGeometry = new THREE.ShapeBufferGeometry(shape, 25);
  25.   let shapeMaterial = new THREE.MeshBasicMaterial({
  26.     color: 0xe04747,
  27.     side: THREE.DoubleSide,
  28.     transparent: true,
  29.     opacity: 0.4
  30.   })
  31.   let shapeMesh = new THREE.Mesh(shapeGeometry, shapeMaterial);
  32.   shapeMesh.rotateX(Math.PI / 2);  //- 按照X轴进行旋转90度
  33.   shapeMesh.position.y = 2 //- 设置高度2,放置于地面重合看不到
  34.   scene.add(shapeMesh);
  35.   render();
  36. }

电子围栏效果:
image.png

完整代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>第一个three.js文件_WebGL三维场景</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             overflow: hidden;
  11.             /* 隐藏body窗口区域滚动条 */
  12.         }
  14.         .clickFn {
  15.             position: fixed;
  16.             top: 10px;
  17.             right: 10px;
  18.             padding: 4px 15px;
  19.             background-color: #999;
  20.             border-radius: 4px;
  21.         }
  22.     </style>
  23.     <!--引入three.js三维引擎-->
  24.     <script src="./js-r100/three.js"></script>
  25.     <script src="./js-r100/controls/OrbitControls.js"></script>
  26. </head>
  28. <body>
  29.     <div class='clickFn' id="show3d">显示3D墙体</div>
  30.     <script>
  31.         /**
  32.          * 创建场景对象Scene
  33.          */
  34.         var scene = new THREE.Scene();
  35.         /**
  36.          * 创建网格模型
  37.          */
  38.         // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
  39.         var geometry = new THREE.BoxGeometry(100, 2, 100); //创建一个立方体几何对象Geometry
  40.         var material = new THREE.MeshLambertMaterial({
  41.             color: 0xffffff,
  42.             name: 'belinebox',
  43.             transparent: true,
  44.             opacity: 0.4
  45.         }); //材质对象Material
  46.         var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  47.         scene.add(mesh); //网格模型添加到场景中
  48.         /**
  49.          * 光源设置
  50.          */
  51.         //点光源
  52.         var point = new THREE.PointLight(0xffffff);
  53.         point.position.set(400, 200, 300); //点光源位置
  54.         scene.add(point); //点光源添加到场景中
  55.         //环境光
  56.         var ambient = new THREE.AmbientLight(0x444444);
  57.         scene.add(ambient);
  58.         /**
  59.          * 相机设置
  60.          */
  61.         var width = window.innerWidth; //窗口宽度
  62.         var height = window.innerHeight; //窗口高度
  63.         var k = width / height; //窗口宽高比
  64.         var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  65.         //创建相机对象
  66.         var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
  67.         camera.position.set(200, 300, 200); //设置相机位置
  68.         camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  69.         /**
  70.          * 创建渲染器对象
  71.          */
  72.         var renderer = new THREE.WebGLRenderer();
  73.         renderer.setSize(width, height);//设置渲染区域尺寸
  74.         renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  75.         document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  76.         //- 渲染函数
  77.         function render() {
  78.             //执行渲染操作   指定场景、相机作为参数
  79.             renderer.render(scene, camera);
  80.         }
  81.         render();
  82.         //- 添加鼠标对视觉相机的操作
  83.         let controls = new THREE.OrbitControls(camera);
  84.         //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
  85.         controls.addEventListener('change', render, { passive: true });
  88.         // 获取与射线相交的对象数组
  89.         function getIntersects(event) {
  90.             event.preventDefault();
  91.             // console.log("event.clientX:" + event.clientX)
  92.             // console.log("event.clientY:" + event.clientY)
  94.             // 声明 raycaster 和 mouse 变量
  95.             var raycaster = new THREE.Raycaster();
  96.             var mouse = new THREE.Vector2();
  98.             // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
  99.             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  100.             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  102.             //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
  103.             raycaster.setFromCamera(mouse, camera);
  105.             // 获取与raycaster射线相交的数组集合，其中的元素按照距离排序，越近的越靠前
  106.             var intersects = raycaster.intersectObjects(scene.children);
  108.             //返回选中的对象数组
  109.             return intersects;
  110.         }
  111.         //- 随机生成16进制颜色
  112.         function getColor() {
  113.             var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
  114.             var colorArray = colorElements.split(",");
  115.             var color = "#";
  116.             for (var i = 0; i < 6; i++) {
  117.                 color += colorArray[Math.floor(Math.random() * 16)];
  118.             }
  119.             return color;
  120.         }
  121.         // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
  122.         var axisHelper = new THREE.AxisHelper(250);
  123.         scene.add(axisHelper);
  124.         //画墙
  125.         function drawWall(objs) {
  126.             //长度
  127.             let lens = Math.sqrt(Math.pow((Number(objs.eZ) - Number(objs.sZ)), 2) + Math.pow((Number(objs.eX) - Number(objs.sX)), 2));
  128.             //位置
  129.             let posx = (objs.eX + objs.sX) / 2;
  130.             let posz = (objs.eZ + objs.sZ) / 2;
  131.             //- 纹理材质
  132.             // var texture = new THREE.TextureLoader().load("images/pink.png");
  133.             // texture.wrapS = THREE.RepeatWrapping;
  134.             // texture.wrapT = THREE.RepeatWrapping;
  135.             // texture.repeat.set(4, 4);
  137.             //旋转角度
  138.             let rotate = -Math.atan2((objs.eZ - objs.sZ), (objs.eX - objs.sX));
  139.             //                       return;
  140.             let box = new THREE.CubeGeometry(lens, 15, 2); //- 墙体参数
  141.             let material = new THREE.MeshBasicMaterial({
  142.                 // color: 0xe04747,
  143.                 transparent: true,
  144.                 opacity: 0.4,
  145.             });
  146.             let meshWall = new THREE.Mesh(box, material);
  147.             meshWall.position.set(posx, 15 / 2, posz);
  148.             meshWall.rotation.y = rotate;
  149.             scene.add(meshWall);
  150.             render();
  151.         }
  153.         document.getElementById('show3d').addEventListener('click', function (e) {
  154.             let pointVector3Arr = [] //- 存放Vector3数组对象
  155.             let pointVector2Arr = [] //- 存放Vector2数组对象
  156.             let face3Arr = [] //- 存放三角形面对象
  158.             if (scene) {
  159.                 scene.children.forEach(item => {
  160.                     //- 判断当前子对象是否是环形线
  161.                     if (item.type === 'LineLoop') {
  162.                         for (let i = 0; i < item.geometry.vertices.length; i++) {
  163.                             if (i !== item.geometry.vertices.length - 1) {
  164.                                 let params = {
  165.                                     eZ: item.geometry.vertices[i + 1].z,
  166.                                     sZ: item.geometry.vertices[i].z,
  167.                                     eX: item.geometry.vertices[i + 1].x,
  168.                                     sX: item.geometry.vertices[i].x
  169.                                 }
  170.                                 drawWall(params)
  171.                             }
  172.                             //- 把每个点存在点对象中
  173.                             pointVector3Arr.push(new THREE.Vector3(item.geometry.vertices[i].x, item.geometry.vertices[i].y, item.geometry.vertices[i].z));
  174.                             pointVector2Arr.push(new THREE.Vector2(item.geometry.vertices[i].x, item.geometry.vertices[i].y));
  175.                         }
  176.                         //- 如果不是一条线,至少是一个三角形的情况最后一条边
  177.                         if (item.geometry.vertices.length > 2) {
  178.                             let index = item.geometry.vertices.length - 1;
  179.                             let params = {
  180.                                 eZ: item.geometry.vertices[0].z,
  181.                                 sZ: item.geometry.vertices[index].z,
  182.                                 eX: item.geometry.vertices[0].x,
  183.                                 sX: item.geometry.vertices[index].x
  184.                             }
  185.                             drawWall(params)
  186.                         }
  188.                     }
  189.                 })
  190.             }
  191.             //- 绘制多边形底座
  192.             generatePloygon();
  193.         })
  194.         //- 画不规则多边形底座 -- 用于作业面底部区域颜色绘制
  195.         function generatePloygon() {
  196.             let pointArr = [];
  197.             if (scene) {
  198.                 scene.children.forEach(item => {
  199.                     //- 判断当前子对象是否是环形线
  200.                     if (item.type === 'LineLoop') {
  201.                         item.geometry.vertices.forEach(item2 => {
  202.                             pointArr.push({ x: item2.x, y: item2.y, z: item2.z })
  203.                         })
  204.                     }
  205.                 })
  206.             }
  207.             //- 根据绘制的点来定义一个二维形状平面
  208.             let shape = new THREE.Shape();
  209.             console.log(pointArr, 111);
  210.             shape.moveTo(pointArr[0].x, pointArr[0].z);
  211.             for (let i = 1; i < pointArr.length; i++) {
  212.                 const element = pointArr[i];
  213.                 shape.lineTo(pointArr[i].x, pointArr[i].z);
  214.             }
  215.             shape.autoClose = true;
  216.             //- 从一个或多个路径形状中创建一个单面多边形几何体
  217.             let shapeGeometry = new THREE.ShapeBufferGeometry(shape, 25);
  218.             let shapeMaterial = new THREE.MeshBasicMaterial({
  219.                 color: 0xe04747,
  220.                 side: THREE.DoubleSide,
  221.                 transparent: true,
  222.                 opacity: 0.4
  223.             })
  224.             let shapeMesh = new THREE.Mesh(shapeGeometry, shapeMaterial);
  225.             shapeMesh.rotateX(Math.PI / 2)
  226.             // shapeMesh.rotateY(Math.PI / 2)
  227.             // shapeMesh.rotateZ(Math.PI / 2)
  228.             shapeMesh.position.y = 2
  229.             scene.add(shapeMesh);
  230.             render();
  231.         }
  233.         let isdown = false, ismove = false;
  234.         window.addEventListener('mousemove', function () {
  235.             if (isdown) {
  236.                 ismove = true;
  237.                 //鼠标拖动事件执行函数
  238.             }
  239.         })
  240.         window.addEventListener('mousedown', function () {
  241.             isdown = true
  242.             ismove = false
  243.         })
  244.         //- 点击事件
  245.         window.addEventListener('mouseup', function (event) {
  246.             if (!isdown && ismove) {
  247.                 return 0;
  248.             }
  249.             if (ismove) {
  250.                 return 0;
  251.             }
  252.             let intsersects = getIntersects(event)
  253.             if (intsersects.length > 0) {
  254.                 if (intsersects[0].object.material.name === 'belinebox') {
  255.                     let mathColor = getColor();
  256.                     // intsersects[0].object.material.color.set(mathColor)
  257.                     //- 添加点到点击的面板上
  258.                     addPoint(intsersects[0].point);
  259.                     render()
  260.                 }
  261.             }
  262.         })
  263.         var tempData = []; //- 存放当前模型中的点的个数
  264.         var tempData2 = [];
  265.         //- 添加点
  266.         function addPoint(point) {
  267.             if (scene) {
  268.                 scene.children.forEach(item => {
  269.                     if (item.type === "LineLoop") {
  270.                         scene.remove(item);
  271.                         tempData = []
  272.                     }
  273.                 })
  274.             }
  275.             tempData.push(point)
  276.             let geometry233 = new THREE.SphereGeometry(1, 40, 40); //创建一个立方体几何对象Geometry
  277.             // 点渲染模式
  278.             let material233 = new THREE.PointsMaterial({
  279.                 color: 0xff0000,
  280.                 // size: 5.0 //点对象像素尺寸
  281.             }); //材质对象
  282.             let points233 = new THREE.Points(geometry233, material233); //点模型对象
  283.             points233.position.set(point.x, point.y + 1, point.z);
  284.             scene.add(points233)
  285.             let geometry = new THREE.Geometry(); //声明一个空几何体对象
  286.             tempData.forEach(item => {
  287.                 tempData2.push(new THREE.Vector3(item.x, item.y + 1, item.z))
  288.             })
  289.             geometry.vertices.push(...tempData2)
  290.             let material = new THREE.MeshLambertMaterial({
  291.                 color: 0xfac15f,//三角面颜色
  292.                 side: THREE.DoubleSide//两面可见
  293.             });//材质对象
  294.             let line = new THREE.LineLoop(geometry, material);//线条模型对象
  295.             scene.add(line);
  296.         }
  297.     </script>
  298. </body>
  300. </html>