• webgl计算包围盒大小

    使用three.js；

    代码；

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>第一个three.js 示例title>
    7.   <style>
    8.     body {
    9.       margin: 0;
    10.       overflow: hidden;
    11.     }
    12.   style>
    13.   <script src="./build/three.js">script>
    14. head>
    15.  
    16. <body>
    17.   <script>
    18.  
    19.     var scene = new THREE.Scene();
    20.  
    21.     var geometry = new THREE.SphereGeometry(120, 60, 60); //创建一个球体几何对象
    22.     var material = new THREE.MeshLambertMaterial({
    23.       color: 0x0000ff
    24.     }); //材质
    25.     var mesh = new THREE.Mesh(geometry, material); //网格模型对象
    26.     var mesh2 = new THREE.Mesh(geometry, null);
    27.     scene.add(mesh); //网格模型添加到场景中
    28.  
    29.     //点光源
    30.     var point = new THREE.PointLight(0xffffff);
    31.     point.position.set(400, 200, 300); //点光源位置
    32.     scene.add(point); //点光源添加到场景中
    33.  
    34.  
    35.     /**
    36.      * 相机
    37.      */
    38.     var width = window.innerWidth; //窗口宽度
    39.     var height = window.innerHeight; //窗口高度
    40.     var k = width / height; //窗口宽高比
    41.     var s = 200; //三维场景显示范围控制系数
    42.     //创建相机
    43.     var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    44.     camera.position.set(200, 300, 200); //相机位置
    45.     camera.lookAt(scene.position); //相机方向
    46.  
    47.     /**
    48.      * 渲染器
    49.      */
    50.     var renderer = new THREE.WebGLRenderer();
    51.     renderer.setSize(width*1/4, height*1/4);//设置渲染区域尺寸
    52.     renderer.setClearColor(0xffff00, 1); //设置背景颜色
    53.     document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    54.     //执行渲染操作   指定场景、相机作为参数
    55.     renderer.render(scene, camera);
    56.  
    57.  
    58.     // 包围盒计算模型对象的大小和位置
    59.     const box3 = new THREE.Box3();
    60.     box3.expandByObject(mesh); // 计算模型包围盒
    61.     const size = new THREE.Vector3();
    62.     box3.getSize(size); // 计算包围盒尺寸
    63.     // console.log('模型包围盒尺寸',size);
    64.     alert('box size is: '+ size.x+","+size.y+","+size.z);
    65.     const center = new THREE.Vector3();
    66.     box3.getCenter(center); // 计算包围盒中心坐标
    67.     // console.log('模型中心坐标',center);
    68.     alert('center: '+ center.x+","+center.y+","+center.z);
    69.  
    70.     box3.expandByObject(mesh2); // 计算模型包围盒
    71.     const size2 = new THREE.Vector3();
    72.     box3.getSize(size2); // 计算包围盒尺寸
    73.     alert('box size is: '+ size2.x+","+size2.y+","+size2.z);
    74.  
    75.   script>
    76. body>
    77. html>

    根据three.js手册；

    Box3
        在3D空间中表示一个盒子或立方体。这个的主要目的是表示对象的最小边界框Minimum Bounding Boxes；

    运行如下；

     

    SphereGeometry的第一个参数是半径，这就对了，直径是240；一个长宽高都是240的立方体就可以包围此球体；

    但是SphereGeometry的后2个参数不是球的x和y坐标；根据手册，是，

    widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为8；
    heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为6；

    看上去比较费解，下回继续；

  • 相关阅读:
    day02 Nacos集群配置、Feign远程调用和统一网关Gateway
    Visual Studio 2022下载安装及使用教程
    批量压缩图片软件-免费图片压缩后高清无损
    Jmeter 吞吐量Per User作用
    Spring框架系列(6) - Spring IOC实现原理详解之IOC体系结构设计
    Nginx之memcached_module模块解读
    3.spring admin和sentinel
    功能测试上限10K，我的进阶之路从自动化—测开，我的经历值得借鉴...
    linux服务器配置深度学习环境一些命令
    机器学习简介
  • 原文地址：https://blog.csdn.net/bcbobo21cn/article/details/133967481