实现threeJS 测距（距离并不能显示出来）

最新推荐文章于 2024-10-11 17:05:07 发布
最新推荐文章于 2024-10-11 17:05:07 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： three.js 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45341411/article/details/126857867
版权
本文介绍了如何使用Three.js库在网页上实现动态的3D空间，通过鼠标交互创建线段和点，同时展示了关键的事件处理和几何体操作。读者将了解如何利用CSS2DRenderer创建标签，以及如何跟踪鼠标位置来生成和移动几何对象。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            position: relative;
        }

        .label {
            margin-top: -1em;
            border: 10px;
            border-radius: 8px;
            width: 85px;
            text-align: center;
            cursor: pointer;
            color: rgb(0, 155, 234);
            line-height: 1.2;
            background-color: rgb(244, 244, 244);
            box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.25);
        }

        .label:hover {
            box-shadow: 0px 0px 20px rgba(0, 155, 234, 0.8);
        }
    </style>
    <script src="./three.js-r139/build/three.js"></script>
    <script src="./three.js-r139/examples/js/controls/OrbitControls.js"></script>
    <script src="./three.js-r139/examples/js/renderers/CSS2DRenderer.js"></script>
</head>

<body>

</body>
<script>
    var scene, camera, renderer, controls, labelRenderer
    // var stats = initStats()

    // 地面网格所需变量
    var length = 200

    // 场景
    function initScene() {
        scene = new THREE.Scene()
    }

    /* 相机 */
    function initCamera() {

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(0, 200, 250);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }
    /* 渲染器 */
    function initRender() {

        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        labelRenderer = new THREE.CSS2DRenderer();
        labelRenderer.setSize(window.innerWidth, window.innerHeight);
        labelRenderer.domElement.style.position = 'absolute'
        labelRenderer.domElement.style.top = '0px'
        document.body.appendChild(labelRenderer.domElement);

    }

    /* 生成标签 */
    function createLabel(text, pos) {
        const div = document.createElement('div')
        // div.className = 'label'
        div.innerHTML = text
        div.style.padding = "2px";
        div.style.color = "#fff";
        div.style.height = "20px";
        div.style.fontSize = "16px";
        div.style.lineHeight = "16px";
        div.style.position = "absolute";
        // div.style.top = '0px';
        div.style.backgroundColor = "rgba(25,25,25,0.5)";
        div.style.borderRadius = "5px";
        console.log('div', div);
        const divLabel = new THREE.CSS2DObject(div)
        divLabel.position.set(pos.x, pos.y, pos.z);
        return divLabel
    }

    /* 灯光 */
    function initLight() {

        var ambientLight = new THREE.AmbientLight(0x333333);
        scene.add(ambientLight);

        var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(100, 300, 200);
        scene.add(directionalLight);

    }

    /* 控制器 */
    function initControls() {

        controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
        /* 其它属性默认 */

    }

    /* 场景内容 */
    function initContent() {

        // const geometry1 = new THREE.BoxGeometry(50, 50, 50);
        // const material = new THREE.MeshPhongMaterial({
        //     color: 0x00ff00,
        // });
        // const cube = new THREE.Mesh(geometry1, material);
        // scene.add(cube);
        //这里用这个构造
        const geometry = new THREE.BufferGeometry()
        // console.log(geometry);
        const pointsArray = new Array()
        pointsArray.push(new THREE.Vector3(-length / 2, 0, 0))
        pointsArray.push(new THREE.Vector3(length / 2, 0, 0))
        //用这个api传入顶点数组
        geometry.setFromPoints(pointsArray)
        var lineMaterial = new THREE.LineBasicMaterial({
            color: 0x808080
        }); /* 基础线材质 */

        var planeGeometry = new THREE.PlaneGeometry(length, 10); /* 平面 width：200,、height：10 */
        var planeMaterial = new THREE.MeshBasicMaterial({
            color: 0xD9D9D9,
            side: THREE.DoubleSide
        }); /* 平面材质 */

        // geometry.vertices.push(new THREE.Vector3(-length / 2, 0, 0)); /* 顶点(-100, 0, 0) */
        // geometry.vertices.push(new THREE.Vector3(length / 2, 0, 0)); /* 顶点( 100, 0, 0) */

        /* 循环创建线段 */
        for (var i = 0; i <= length / 10; i++) {

            /* 横向线段 */
            var lineX = new THREE.Line(geometry, lineMaterial);
            lineX.position.z = (i * 10) - length / 2;
            scene.add(lineX);

            /* 纵向线段 */
            var lineY = new THREE.Line(geometry, lineMaterial);
            lineY.rotation.y = 0.5 * Math.PI;
            lineY.position.x = (i * 10) - length / 2;
            scene.add(lineY);

        }

        /* 创建包围平面 */
        var planeX_left = new THREE.Mesh(planeGeometry, planeMaterial);
        planeX_left.rotation.y = 0.5 * Math.PI;
        planeX_left.position.x = -length / 2;

        var planeX_right = planeX_left.clone();
        planeX_right.position.x = length / 2;

        var planeY_top = new THREE.Mesh(planeGeometry, planeMaterial);
        planeY_top.position.z = -length / 2;

        var planeY_bottom = planeY_top.clone();
        planeY_bottom.position.z = length / 2;

        scene.add(planeY_bottom);
        scene.add(planeY_top);
        scene.add(planeX_left);
        scene.add(planeX_right);

        /* 四个包围面的位置 y轴向上5 */
        scene.traverse(function (object) {

            if (object.isMesh) {

                if (object.geometry.type === 'PlaneGeometry') {

                    object.position.y = 5;

                }

            }

        });

    }

    /* 获取射线与平面相交的交点 */
    function getIntersects(event) {

        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();

        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        var normal = new THREE.Vector3(0, 1, 0);
        /* 创建平面 */
        var planeGround = new THREE.Plane(normal, 0);

        /* 从相机发出一条射线经过鼠标点击的位置 */
        raycaster.setFromCamera(mouse, camera);

        intersects = raycaster.intersectObjects(scene.children, true);
        console.log('dddddddddddd', intersects);

        /* 获取射线 */
        // var ray = raycaster.ray;
        /* 计算相机到射线的对象，可能有多个对象，返回一个数组，按照距离相机远近排列 */
        // var intersects = ray.intersectPlane(planeGround);
        // var intersects = ray.direction;
        if (intersects.length) {
            var object = intersects[0].point

            // console.log("x:" + intersects.x + " y:" + intersects.y + " z:" + intersects.z);

            /* 返回向量 */
            return object;
        }


    }

    var pointsArray = [];
    var window_mouse = true;
    /* 鼠标按下事件 */
    function onMouseDown(event) {

        /* 获取相机发出的射线与 Plane 相交点*/
        let intersects = getIntersects(event);

        /* 存放网格的三维坐标 */
        var vector3_x, vector3_z;

        /* 鼠标左键按下时，创建点和线段 */
        if (event.button === 0) {

            if (!window_mouse) {

                window.addEventListener('mousemove', onMouseMove, false);

                /* 依据 windwo_mouse 标识避免事件的重复添加 */
                window_mouse = true;

            }

            /* 若交点此时在平面之内则创建点（Points） */
            var pointsGeometry = new THREE.BufferGeometry();
            // var pointsGeometry = new THREE.SphereGeometry( 15, 32, 16 );
            // pointsGeometry.vertices.push(intersects);
            pointsGeometry.setFromPoints([intersects])

            var pointsMaterial = new THREE.PointsMaterial({
                color: 0xff0000,
                size: 3
            });
            var points = new THREE.Points(pointsGeometry, pointsMaterial);
            // points.position.set(intersects)
            // console.log('points',points);
            pointsArray.push(intersects);


            scene.add(points);
            /* 创建线段 */
            var lineGeometry = new THREE.BufferGeometry();
            var lineMaterial = new THREE.LineBasicMaterial({
                color: 0x000fff
            });

            if (pointsArray.length >= 2) {

                // lineGeometry.vertices.push(pointsArray[0].geometry.vertices[0], pointsArray[1].geometry.vertices[
                //     0]);
                lineGeometry.setFromPoints([pointsArray[0], pointsArray[1]])
                console.log('pointsArray', pointsArray);
                var line = new THREE.Line(lineGeometry, lineMaterial);
                pointsArray.shift();
                scene.add(line);

            }



        }

        /* 鼠标右键按下时 回退到上一步的点，并中断绘制 */
        if (event.button === 2) {

            window.removeEventListener('mousemove', onMouseMove, false);

            /* 移除事件之后，要设置为 false 为了避免事件的重复添加 */
            window_mouse = false;

            /* 鼠标左键未点击时线段的移动状态 */
            if (scene.getObjectByName('line_move')) {

                scene.remove(scene.getObjectByName('line_move'));

                /* 删除数组中的元素，否则的话再次重绘会链接之前的点接着重绘 */
                pointsArray.shift();

            }

        }

    }

    /* 鼠标移动事件 */
    function onMouseMove(event) {

        var intersects = getIntersects(event);
        // console.log(intersects);

        /* 判断交点是否在 x(-100, 100) ，z(-100, 100)(平面)之间 */


        /* 鼠标左键未点击时线段的移动状态 */
        if (scene.getObjectByName('line_move')) {

            scene.remove(scene.getObjectByName('line_move'));

        }
        /* 创建线段 */
        var lineGeometry = new THREE.BufferGeometry();
        var lineMaterial = new THREE.LineBasicMaterial({
            color: 0x000fff
        });

        if (pointsArray.length > 0) {

            // lineGeometry.vertices.push(pointsArray[0].geometry.vertices[0]);
            console.log('pointsArray', pointsArray);
            // lineGeometry.setFromPoints([pointsArray[0]])

            var mouseVector3 = new THREE.Vector3(intersects.x, 0, intersects.z);

            // lineGeometry.vertices.push(mouseVector3);
            lineGeometry.setFromPoints([pointsArray[0], mouseVector3])
            // console.log('distance', pointsArray[0].distanceTo(mouseVector3), pointsArray[0]);
            console.log('distance', mouseVector3.distanceTo(pointsArray[0]), pointsArray[0]);
            let dis = mouseVector3.distanceTo(pointsArray[0]).toFixed(2)
            let pos = new THREE.Vector3().copy(mouseVector3)
            pos.add(pointsArray[0]) // 两个向量相加
            pos.multiplyScalar(0.5) // 乘以二分之一 取中点
            let label = scene.getObjectByName('active-label');
            if (label) {
                console.log('label2', label);
                label.element.innerHTML = '~' + dis;
                label.position.set(pos.x, pos.y, pos.z);
                scene.add(label);
            } else {
                label = this.createLabel('~' + dis, pos);
                console.log('label1', label);
                label.name = 'active-label';
                scene.add(label);
            }
            var line = new THREE.Line(lineGeometry, lineMaterial);
            line.name = 'line_move';

            scene.add(line);

        }



    }

    /* 键盘按下事件 */
    function onKeyDown(event) {

        /* ESC键 回退上一步绘制，结束绘制*/
        if (event.key === 'Escape') {

            window.removeEventListener('mousemove', onMouseMove, false);

            /* 移除事件之后，要设置为 false 为了避免 mousemove 事件的重复添加 */
            window_mouse = false;

            /* 鼠标左键未点击时线段的移动状态 */
            if (scene.getObjectByName('line_move')) {

                scene.remove(scene.getObjectByName('line_move'));

                /* 删除数组中的元素，否则的话再次重绘会链接之前的点接着重绘 */
                pointsArray.shift();

            }

            var length = scene.children.length - 1;
            console.log(scene.children);
            /* 按步骤移除点和先 */
            if (scene.children[length].isLine || scene.children[length].isPoints) {

                scene.children.pop();
                length = scene.children.length - 1;

                /* 若最后一项不是线段或者点就不移除 */
                if (!scene.children[length].isMesh) {

                    scene.children.pop();

                }

            }

        }

    }


    /* 更新数据 */
    function update() {

        // stats.update();
        controls.update();

    }

    /* 窗口自动适应 */
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }


    /* 循环调用 */
    function animate() {

        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        update();

    }

    /* 初始化 */
    function init() {

        /* 兼容性判断 */
        //if (!Detector.webgl) Detector.addGetWebGLMessage();

        initScene();
        initCamera();
        initRender();
        initLight();
        initContent();
        initControls();

        /* 事件监听 */
        window.addEventListener('resize', onWindowResize, false);
        window.addEventListener('mousedown', onMouseDown, false); /* 使用mousedown的时候可以判断出点击的鼠标左右键之分 */
        window.addEventListener('mousemove', onMouseMove, false);
        window.addEventListener('keydown', onKeyDown, false); /* 使用事件的时候要把前面的on给去掉 */
    }

    /* 初始加载 */
    (function () {

        console.log('three start...');

        init();
        animate();

        console.log('three end...');

    })();
</script>

</html>

ThreeJS 测距功能
yleave的博客
01-28 7368
文章目录选点绘线动态绘制线段和显示距离文字居中撤销操作   测距功能，也就是选择两点，计算它们的距离，实现效果大致如下：   上图中主要涉及几个操作： 点击鼠标左键选点，点击鼠标右键停止选点，若选择点数超过两点，则两点绘制一条线段 动态绘制线段 动态绘制距离 确定两点后将距离文字居中 按下 ESC 键撤销上一步操作 选点绘线   首先，我们需要通过鼠标在三维空间中选点，但是我们的屏幕是二维的，还有一维不知道，因此没办法直接凭空选点，因此目前的选点都是基于某个物体来的，即在物体上选点。 那么要如何获取鼠
three.js实现全套3d测距功能(附完整代码)
codingWeb的博客
04-24 3914
网上关于测距的实现都是比较片面的,没有完整的例子,最近因为需求,有对相关需求进行实现,给出我的实现方案,供大家参考 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
threejs测距：点到点，面到面，角度等
weixin_42755384的博客
04-10 5202
参考文章：https://blog.csdn.net/ALLENJIAO/article/details/81483073
threejs 计算函数汇总
最新发布
qq_40596257的博客
10-11 269
threejs 计算函数，threejs算法，threejs算法大全，threejs向量算法，threejs线算法，threejs点和线计算
Webgl（ThreeJS）空间测量\测距功能。
04-29
Webgl（ThreeJS）实现的3D空间测量\测距功能，通过换算，可测出实际大小距离。 文章介绍： https://blog.csdn.net/Highning0007/article/details/124440169
Threejs 实现测量功能距离，厚度，角度和面积
u014457991的博客
04-18 3953
1、测量距离 a、获取屏幕坐标位置，转化为三维坐标位置。代码如下： var cx = event.clientX;//屏幕X轴坐标 var cy = event.clientY;//屏幕Y轴坐标 var x = ( cx / window.innerWidth ) * 2 - 1; var y = -( cy / window.innerHeight ) * 2 + 1; var standardVector= new THREE.Vector3(x, y, 1); b、需要将得到的三维向量坐标转..
threejs测量接口类
04-23
threejs测量接口类， measureline()
超声波测距LC1602显示_lcd1602显示距离_51单片机_51单片机测距_
10-04
在本项目中，我们探讨了如何使用51单片机，特别是STC89C52RC型号，来实现超声波测距并将结果显示在LCD1602屏幕上。超声波测距是一种常见的距离测量技术，它利用超声波的发射与接收时间差来计算目标的距离。51单片机...
Three.js测量功能封装--距离、角度与面积
zouzouzou的博客
08-08 4634
模型距离、角度、占地面积计算
threejs测距功能一览
DTCloud
03-08 540
在选点过程中(鼠标移动过程中)，若鼠标在模型之上，鼠标位置处会显示一个圆点，表示此处可点选，在选完一个点后，鼠标移动过程中鼠标位置和选点之间会有连线，且线段的距离会动态变化。从起始点开始，首先，绘制 y 轴的线段，那么就使用起始点 start 和新的点py : Vector3(start.x, p.y, start.z) 绘制线段，再使用 py 和新的中间点 pz: Vector3(start.x, p.y, p.z) 来绘制 z 轴线段，最后使用 pz 和终点 p 来绘制 x 轴线段。
js简单地测距实现
04-10
完整的测距例子 博文链接：https://guoliangheyuqin.iteye.com/blog/1634080
基于WebGL/Threejs技术 模型测量项目实战
06-16
针对webgl的库threejs框架的模型测量功能实战项目详细的讲解，带大家一起开发实用的功能，在项目中能真正能应用的功能，主要包括三维中模型的距离测量、角度测量、面积测量、体积测量和功能的交互测量值实时显示测量值单位转换等等。
threejs-maps:使用 D3.js、Three.js 和 Mapbox 的交互式地图
06-27
Threejs-maps 使用 d3.js 和three.js 的两个地图演示。
Webgl（ThreeJS）空间测量\测距功能(附工程文件)
蒙双眼看世界
04-29 2207
Webgl（ThreeJS）空间测量功能
three.js 物体3D模型——尺寸测量标注
u014291990的博客
01-29 3222
在开发一些物联网、数字孪生Web3D可视化项目的时候，比如一个工厂、化工厂、变电站、园区等场景，有时候，需要进行一些尺寸测量，比如属于鼠标点击选择模型表面上两点，然后计算两点之间尺寸距离，然后使用箭头和数字进行标注。( 先用鼠标点击按钮进入测量状态，在通过鼠标点击拾取模型任意两点，然后会自动标注 )
threejs开发之 测量工具
huhuan123456的博客
06-13 549
测量工具很有意思，估计大家认为这个不是很容易写吗，就是几个事件，然后绘制点线面，然后用three计算长度，展示出来就可以了。怎么说那，不能说他难，也不能说，想象的那么简单，只有做过了，才知道，交互的时候，错综复杂，最起码一两天全部重新自己开发，有点难搞定，但是牛人除外。思路2：还有一种方式，就是封装成类，然后在类中做判断，将地图传值给这个控件，相互不干扰，也是可行的。思路1：设计这个工具的方式有很多，可以直接初始化地图的时候，直接创建一个方法，然后在方法里面做各种判断，但是这样用起来不方便。
threejs实现动态绘线测距 （引入即用）three实现扩撒波纹材质方法
LBY_XK的博客
04-20 952
【代码】threejs实现动态绘线测距 （引入即用）
基于WebGL/Threejs技术的测量
ALLENJIAO的专栏
08-07 7216
模型测量 体积测量 距离测量 面积测量 角度测量 更多细节和功能改进后续赘述，感兴趣的可以留言或发邮件1985692469@qq.com，欢迎一起探讨！ 基于WebGL/Threejs技术 模型测量项目实战 【课程介绍】 针对webgl的库threejs框架的模型测量功能实战项目详细的讲解，带大家一起开发实用的功能，在项目中能真正能应用的功能，主要包括三维中模...
Three.js 计算两点的距离
YanisWu的博客
05-13 5891
方法： .distanceTo ( v : Vector3 ) : Float 计算该向量到所传入的v间的距离。 示例： var pos1 = new THREE.Vector3( 0, 1, 0 ); var pos2 = new THREE.Vector3( 1, 1, 1); var distance = pos1.distanceTo(pos2);
基于Webgl(ThreeJS)实现3D空间测距技术解析
WebGL（ThreeJS）实现的3D空间测量\测距功能，就是利用WebGL和Three.js提供的强大的3D渲染和操作能力，通过换算，可以测出实际大小距离。 WebGL（ThreeJS）实现的3D空间测量\测距功能的主要原理，是基于三维空间中...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值