Three.js鼠标点击平面实现任意画线功能

最新推荐文章于 2024-10-30 10:27:53 发布
最新推荐文章于 2024-10-30 10:27:53 发布
阅读量7k 收藏 22
点赞数 4
CC 4.0 BY-SA版权
分类专栏： Three.js
原文链接：https://blog.youkuaiyun.com/ithanmang/article/details/81625996
本文详细介绍如何使用three.js在三维网格平面上绘制线段。通过Raycaster获取鼠标坐标，实现鼠标左键绘制线段，鼠标右键结束绘制，ESC键退回上一步。文章提供了完整的代码示例，包括场景、相机、渲染器、灯光、控制器的初始化，以及如何创建网格、射线和平面相交的计算。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

操作步骤：鼠标指针移入三维网格平面之中，按下左键即可画线，画线过程中，若鼠标移出平面则停止绘制，再次移入则进行上次继续画线，鼠标右键结束绘制，Esc键退回上一步骤。

通过Raycaster获取鼠标坐标
在网格平面上任意位置绘制线段，就需要获取点击位置的向量Vector3，获取之后就可以确定第一个点的位置，一条直线由两个点来确定，由此，需要获取鼠标点击位置。
在写代码之前，需要了解一下THREE.Raycaster这个方法。
前面文章13 - three.js 笔记 - 通过 THREE.Raycaster 实现模型选中与信息显示也曾对这个对象做过介绍但是并未介绍其中所有的方法。
因为，我们需要获取不是与射线相交的物体，而是与射线相交的点也就是一个THREE.Vector3()对象。
通过查看官方文档，可以使用Three.Raycaster类的一个属性Ray的一个方法intersectPlane()器返回值是一个Vector3对象。
Ray.intersectPlane()：将这条射线与平面相交，如果没有交点，则返回交点或null。
当然这里，不仅仅可以通过平面来获取交点还有别的方法，但是这里使用plane，别的方法请查看官方文档。
--------------------- 
版权声明：本文为优快云博主「ithanmang」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/ithanmang/article/details/81625996


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画直线</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    	<script src="../JS/ThreeJS/build/three.js"></script>
        <script src="../JS/ThreeJS/examples/js/libs/stats.min.js"></script>
        <script src="../JS/ThreeJS/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>

    var scene, camera, renderer, controls;
    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);

    }

    /* 灯光 */
    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, renderer.domElement);
        /* 其它属性默认 */

    }

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

        var geometry = new THREE.Geometry();/* 简单基础几何 */
        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);

        /* 获取射线 */
        var ray = raycaster.ray;

        /* 计算相机到射线的对象，可能有多个对象，返回一个数组，按照距离相机远近排列 */
        var intersects = ray.intersectPlane(planeGround);

        /* 返回向量 */
        return intersects;

    }

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

        /* 获取相机发出的射线与 Plane 相交点*/
        var 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;

            }

            /* 判断交点是否在 x(-100, 100) ，z(-100, 100)(平面)之间 */
            if (Math.abs(intersects.x) < length / 2 && Math.abs(intersects.z) < length / 2){

                /* 若交点此时在平面之内则创建点（Points） */
                var pointsGeometry = new THREE.Geometry();
                pointsGeometry.vertices.push(intersects);

                var pointsMaterial = new THREE.PointsMaterial({color:0xff0000, size: 3});
                var points = new THREE.Points(pointsGeometry, pointsMaterial);

                pointsArray.push(points);

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

                if (pointsArray.length >= 2) {

                    lineGeometry.vertices.push(pointsArray[0].geometry.vertices[0], pointsArray[1].geometry.vertices[0]);

                    var line = new THREE.Line(lineGeometry, lineMaterial);
                    pointsArray.shift();
                    scene.add(line);

                }

                scene.add(points);

            }

        }

        /* 鼠标右键按下时 回退到上一步的点，并中断绘制 */
        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);

        /* 判断交点是否在 x(-100, 100) ，z(-100, 100)(平面)之间 */
        if (Math.abs(intersects.x) < length / 2 && Math.abs(intersects.z) < length / 2) {

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

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

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

            if (pointsArray.length > 0){

                lineGeometry.vertices.push(pointsArray[0].geometry.vertices[0]);

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

                lineGeometry.vertices.push(mouseVector3);

                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;
            /* 按步骤移除点和先 */
            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 initStats() {

        var stats = new Stats();

        stats.setMode(0);
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.right = '0px';

        document.body.appendChild(stats.domElement);

        return stats;

    }

    /* 窗口自动适应 */
    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>
</body>
</html>

 

使用Three.JS以及A*寻路算法制作自动寻路场景（三）使用Raycaster和构造器确定鼠标点击位置
每天学习一点点
07-20 4133
本节主要内容： Three.Raycaster主要用法简介 利用Plane以及Ray构造器实现鼠标点击确定坐标位置 判断坐标位置属于网格中哪一格，并使用小球进行标注 首先放上本节完成效果： Three.Raycaster主要用法简介 根据官方文档，Three.Raycaster主要用来处理光线投射。光线投射主要用于物体选择、碰撞检测以及图像成像等方面。 援引官方文档中的案例： ...
three.js 将鼠标点击位置连线
这是个问题
05-11 1235
//首先要有raycaster控制器 mouse.x = (e.clientX / width) * 2 - 1; mouse.y = -(e.clientY / height) * 2 + 1; let raycaster = new THREE.Raycaster(); raycaster.setFromCamera(mouse, camera); let intersects = raycaster.intersectObjects(scene.children); if(intersects.l
获取Threejs画布区中点击事件的坐标
weixin_42331162的博客
05-12 363
伪造一个特别大的PlaneGeometry, 设置visiable=false,射线必然与PlaneGeometry相交。思路：通过射线与几何体之间的焦点，将像素坐标转换为世界坐标。但画布区点击的位置不一定存在几何体。采用数学库Plane，点击事件响应时，将Plane与射线相交，得到交点。根据鼠标点击事件的位置，创建part。
vue Threejs实现任意画线(鼠标点击画线)(附源码)
收集、分享
02-22 1146
vue Threejs实现任意画线(鼠标点击画线) 实时画线 动态画线
WebGL+Three.js入门与实战(一)——1.4 通过鼠标控制绘制
阿生博客
11-30 920
WebGL+Three.js入门与实战(一)——通过鼠标控制绘制
Threejs鼠标
usdnfo的专栏
12-13 732
var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseClick( event ) { //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mous...
three.js画线
hb707934728的博客
12-06 966
Three框架 div#canvas-frame{ border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } //初始化渲染器 var renderer; function initTh
案例01 - 通过鼠标点击平面实现任意画线功能
ithanmang
08-13 9403
首先，看一下案例实现的一下功能。 示例：http://ithanmang.com/drawline/index.html 操作步骤：鼠标指针移入三维网格平面之中，按下左键即可画线，画线过程中，若鼠标移出平面则停止绘制，再次移入则进行上次继续画线，鼠标右键结束绘制，Esc键退回上一步骤。 案例需求：案例可以用于在三维场景中绘制逃生路线、以及方向线绘制、测量，物体的移动路线绘制等场景。 ...
three.js 物体3D模型——尺寸测量标注
u014291990的博客
01-29 4585
在开发一些物联网、数字孪生Web3D可视化项目的时候，比如一个工厂、化工厂、变电站、园区等场景，有时候，需要进行一些尺寸测量，比如属于鼠标点击选择模型表面上两点，然后计算两点之间尺寸距离，然后使用箭头和数字进行标注。( 先用鼠标点击按钮进入测量状态，在通过鼠标点击拾取模型任意两点，然后会自动标注 )
HTML5+Three.js实现的可拖拽镜面反射与球面折射全景动画效果源码.zip
11-03
Three.js是基于JavaScript的3D库，它简化了WebGL（一种在浏览器中进行3D图形渲染的技术）的使用，让开发者能够轻松地创建复杂的3D场景。在本项目中，Three.js被用来实现镜面反射和球面折射的视觉效果，这在传统的2D...
用JavaScript实现使用鼠标画线的示例代码
12-09
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <style type="text/css"> .style
Three.js入门 （参考胖达老师）｜ 大帅老猿threejs特训
DisplayName2023的博客
12-31 1302
Three.js基础入门 场馆搭建 灯光阴影和角色控制
three.js 空间坐标绘制多边形围栏（结合react）
weixin_44242600的博客
08-08 1149
空间坐标点绘制多边形，实际上可以理解为是由 “点” 到 “线” 到 “面” 的一个过程。将空间坐标点通过`THREE.Shape`绘制多条线并闭合而得到一个封闭的二维形状平面对象，使用`THREE.ShapeGeometry`将`Shape`对象转换为`Geometry`对象添加`Mesh`，最终得到我们想要的多边形几何体。要得到一个围栏就需要添加“墙体”，“墙体”则是通过`THREE.BoxGeometry`计算偏移角度绘制多个几何体得到。
用鼠标实现屏幕绘图
lyserver的专栏
04-28 2981
一般说来，在屏幕上绘图，许多朋友首先想到的是先抓取屏幕图形到窗口，然后在窗口中进行绘图，这种思路最大的缺点是，当窗口切换时，会出现明显的闪烁现象（因为屏幕抓图和应用程序窗口再置顶这些操作比较费时），有没有更好的解决办法，从而实现更快捷的屏幕绘图呢？    其实，既然窗口支持半透明，为什么不利用此特点，创建一个置顶的接近完全透明的窗口，然后再在此窗口内绘图呢？为此，我写下了这个代码，经测
threejs创建平面几何形状
热门推荐
目尽地平线
02-16 1万+
平面几何形状有三种：点，线，面三种，下面说说用threejs创建这几种形状的方法。
Three.js添加标签、取得面与鼠标交点、画线、小地图（转）
niuge8905的博客
12-27 5429
1.Three.js添加标签 https://threejs.org/examples/?q=label#css2d_label 2.取得面与鼠标交点、画线 https://blog.csdn.net/ithanmang/article/details/81625996 3.小地图 https://threejs.org/examples/?q=line#webgl_lines_fat_...
three.js使用超炫酷的鼠标跟随案例
weixin_45439379的博客
12-14 909
three.js使用超炫酷的鼠标跟随案例 文章目录three.js使用超炫酷的鼠标跟随案例前言一、效果展示二、直接上代码1.效果代码2.注意点总结 前言 three.js在浏览器中就能够简单和轻便渲染出3D场景. 一、效果展示 二、直接上代码 1.效果代码 <!DOCTYPE html> <meta charset="utf-8"> <style> body { margin: 0; background: #111; min-width: 960px
使用three.js 实现 自定义绘制平面的效果
最新发布
10-30 534
【代码】使用three.js 实现 自定义绘制平面的效果。
threejs 根据相机参数 将 3d 框映射到图片画一个平面6面体图形
weixin_35755640的博客
01-18 404
在 Three.js 中，可以使用 THREE.BoxHelper 来绘制 3D 框，并使用相机的 projectionMatrix 和 matrixWorldInverse 将其映射到图片上。首先，创建一个 THREE.BoxHelper 并将其加入场景中。然后，在渲染循环中，使用相机的投影矩阵和世界反矩阵将其映射到屏幕空间。最后，使用 canvas 或 WebGL 绘制这个平面六面体图形。 ...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值