项目中有一个电子围栏的需求,之前已经通过点,线,面的博文中的代码实现了多变形电子围栏的绘制.圆形的还未实现,未了达到与之前样式统一,因此无法通过three.js的管道来实现.

ThreeBSP

three.js本身并没有提供用于几何体布尔运算的构造函数，需要借助一个库ThreeBSP.js实现。几何体的布尔运算可以借助数学中学习的差集、并集、交集概念去理解， 几何体之间的运算本质上就是两个顶点集合的运算，具体运算的算法可以查看计算几何学的理论内容，多数的三维软件基本都有布尔运算的相关命令， 尤其是机械类的三维建模软件，对于计算机辅助设计有兴趣的可以多研究。
Three.js 绘制空心圆柱体 - 图1

绘制一个外圆内方的铜钱

  1.     绘制一个简易铜钱形状几何体很简单，绘制一个扁圆柱减去一个立方体就可以。
  1. /**
  2. * 创建网格模型
  3. */
  4. //几何体对象
  5. var cylinder = new THREE.CylinderGeometry(50,50,5,40);//圆柱
  6. var box = new THREE.BoxGeometry(40,5,40);//立方体
  7. //材质对象
  8. var material=new THREE.MeshPhongMaterial({color:0x0000ff});
  9. //网格模型对象
  10. var cylinderMesh=new THREE.Mesh(cylinder,material);//圆柱
  11. var boxMesh=new THREE.Mesh(box,material);//立方体
  12. //包装成ThreeBSP对象
  13. var cylinderBSP = new ThreeBSP(cylinderMesh);
  14. var boxBSP = new ThreeBSP(boxMesh);
  15. var result = cylinderBSP.subtract(boxBSP);
  16. //ThreeBSP对象转化为网格模型对象
  17. var mesh = result.toMesh();
  18. scene.add(mesh);//网格模型添加到场景中
  1.     网格Mesh模型对象作为构造函数ThreeBSP()的参数，可以把three.js的普通Mesh模型包装为ThreeBSP对象，表示对应Mesh对象的ThreeBSP对象可以进行布尔运算 ，计算结果在执行toMesh()方法可以把ThreeBSP对象重新转化为Mesh对象。

布尔计算方法

方法 作用
intersrct 交集、重合的部分
union 并集、组合、相加
subtract 差集、相减

绘制圆形电子围栏

经过上面的一些内容,我们可以通过2个圆柱形,通过差集相减的方法来获取一个环形圆柱体,底部加入一个圆形底座,就完成了圆形电子围栏

  1. /**
  2. * 创建网格模型
  3. */
  4. let textureLoader = new THREE.TextureLoader();
  5. let texture = textureLoader.load('./images/danger_wall.png');
  6. texture.wrapS = THREE.RepeatWrapping; //水平方向如何包裹
  7. texture.wrapT = THREE.RepeatWrapping; // 垂直方向如何包裹
  8. // uv两个方向纹理重复数量、看板中重复数量
  9. texture.repeat.set(15, 1);
  10. var smallCylinderGeom = new THREE.CylinderGeometry(40, 35, 100, 100, 14); //- 中心小圆
  11. var largeCylinderGeom = new THREE.CylinderGeometry(40, 40, 10, 100, 4);  //- 外圆
  12. var smallCylinderBSP = new ThreeBSP(smallCylinderGeom);  //- 中心圆bsp对象
  13. var largeCylinderBSP = new ThreeBSP(largeCylinderGeom);   //- 外圈圆bsp对象
  14. var intersectionBSP = largeCylinderBSP.subtract(smallCylinderBSP);  //- 获取差集
  15. var redMaterial = new THREE.MeshBasicMaterial({   //- 设置空心圆柱体的样式
  16.   map: texture,
  17.   transparent: true,
  18.   opacity: 1
  19. })
  20. var hollowCylinder = intersectionBSP.toMesh(redMaterial);  //- 添加样式
  21. hollowCylinder.position.y += 5;  //- 由于高度为10,翻转后有5的值在基准坐标之下,所以做Y轴校准
  22. scene.add(hollowCylinder);  //- 添加到场景中
  23. //- 添加底座
  24. var geometry = new THREE.CircleGeometry(40, 100);
  25. var material = new THREE.MeshBasicMaterial({
  26.   color: 0xFF0018,
  27.   side: THREE.DoubleSide,
  28.   transparent: true,
  29.   opacity: 0.1
  30. });
  31. var circle = new THREE.Mesh(geometry, material);
  32. circle.rotateX(Math.PI / 2)
  33. scene.add(circle);

显示效果:

image.png

完整代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>绘制空心圆柱体</title>
  7.   <style>
  8.     body {
  9.       margin: 0;
  10.       overflow: hidden;
  11.       /* 隐藏body窗口区域滚动条 */
  12.     }
  13.   </style>
  14.   <!--引入three.js三维引擎-->
  15.   <script src="./js-r119/three.js"></script>
  16.   <script src="./js-r119/controls/OrbitControls.js"></script>
  17.   <script src='./js-r119/libs/tween.min.js'></script>
  18.   <!-- <script src='./js-r119/libs/stats.min.js'></script> -->
  19.   <script src="https://johnson2heng.github.io/three.js-demo/lib/threebsp.js"></script>
  20. </head>
  22. <body>
  23.   <script>
  24.     /**
  25.      * 创建场景对象Scene
  26.      */
  27.     var scene = new THREE.Scene();
  28.     /**
  29.      * 创建网格模型
  30.      */
  31.     let textureLoader = new THREE.TextureLoader();
  32.     let texture = textureLoader.load('./images/danger_wall.png');
  33.     texture.wrapS = THREE.RepeatWrapping; //水平方向如何包裹
  34.     texture.wrapT = THREE.RepeatWrapping; // 垂直方向如何包裹
  35.     // uv两个方向纹理重复数量、看板中重复数量
  36.     texture.repeat.set(15, 1);
  37.     var smallCylinderGeom = new THREE.CylinderGeometry(40, 35, 100, 100, 14); //- 中心小圆
  38.     var largeCylinderGeom = new THREE.CylinderGeometry(40, 40, 10, 100, 4);  //- 外圆
  39.     var smallCylinderBSP = new ThreeBSP(smallCylinderGeom);  //- 中心圆bsp对象
  40.     var largeCylinderBSP = new ThreeBSP(largeCylinderGeom);   //- 外圈圆bsp对象
  41.     var intersectionBSP = largeCylinderBSP.subtract(smallCylinderBSP);  //- 获取差集
  42.     var redMaterial = new THREE.MeshBasicMaterial({   //- 设置空心圆柱体的样式
  43.       map: texture,
  44.       transparent: true,
  45.       opacity: 1
  46.     })
  47.     var hollowCylinder = intersectionBSP.toMesh(redMaterial);  //- 添加样式
  48.     hollowCylinder.position.y += 5;  //- 由于高度为10,翻转后有5的值在基准坐标之下,所以做Y轴校准
  49.     scene.add(hollowCylinder);  //- 添加到场景中
  50.     //- 添加底座
  51.     var geometry = new THREE.CircleGeometry(40, 100);
  52.     var material = new THREE.MeshBasicMaterial({
  53.       color: 0xFF0018,
  54.       side: THREE.DoubleSide,
  55.       transparent: true,
  56.       opacity: 0.1
  57.     });
  58.     var circle = new THREE.Mesh(geometry, material);
  59.     circle.rotateX(Math.PI / 2)
  60.     scene.add(circle);
  61.     /**
  62.      * 光源设置
  63.      */
  64.     //点光源
  65.     var point = new THREE.PointLight(0xffffff);
  66.     point.position.set(400, 200, 300); //点光源位置
  67.     scene.add(point); //点光源添加到场景中
  68.     //环境光
  69.     var ambient = new THREE.AmbientLight(0x444444);
  70.     scene.add(ambient);
  71.     /**
  72.      * 相机设置
  73.      */
  74.     var width = window.innerWidth; //窗口宽度
  75.     var height = window.innerHeight; //窗口高度
  76.     var k = width / height; //窗口宽高比
  77.     var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  78.     //创建相机对象
  79.     var camera = new THREE.PerspectiveCamera(45, width / height, 0.25, 1000)
  80.     camera.position.set(200, 300, 200); //设置相机位置
  81.     camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  82.     /**
  83.      * 创建渲染器对象
  84.      */
  85.     var renderer = new THREE.WebGLRenderer();
  86.     renderer.setSize(width, height);//设置渲染区域尺寸
  87.     renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  88.     document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  90.     // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
  91.     let axisHelper = new THREE.AxisHelper(250);
  92.     scene.add(axisHelper);
  95.     // 获取与射线相交的对象数组
  96.     function getIntersects(event) {
  97.       event.preventDefault();
  98.       // console.log("event.clientX:" + event.clientX)
  99.       // console.log("event.clientY:" + event.clientY)
  101.       // 声明 raycaster 和 mouse 变量
  102.       var raycaster = new THREE.Raycaster();
  103.       var mouse = new THREE.Vector2();
  105.       // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
  106.       mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  107.       mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  109.       //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
  110.       raycaster.setFromCamera(mouse, camera);
  112.       // 获取与raycaster射线相交的数组集合，其中的元素按照距离排序，越近的越靠前
  113.       var intersects = raycaster.intersectObjects(scene.children);
  115.       //返回选中的对象数组
  116.       return intersects;
  117.     }
  119.     /**
  120.     * 点击模型对象把镜头拉近
  121.     */
  123.     //- 添加鼠标对视觉相机的操作
  124.     var controls = new THREE.OrbitControls(camera, renderer.domElement);
  125.     //- 渲染函数
  126.     function render() {
  127.       //执行渲染操作   指定场景、相机作为参数
  128.       renderer.render(scene, camera);
  129.       requestAnimationFrame(render)
  130.       TWEEN.update();
  131.       controls.update();
  133.     }
  134.     render();
  136.   </script>
  137. </body>
  139. </html>