vue Threejs实现任意画线(鼠标点击画线)

最新推荐文章于 2024-05-18 10:17:30 发布
最新推荐文章于 2024-05-18 10:17:30 发布
阅读量672 收藏
点赞数 3
分类专栏： Web前端 文章标签： vue.js threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao3756/article/details/136242741
版权

Threejs实现任意画线(鼠标点击画线)

  • 鼠标左键单击添加点
  • 鼠标右键回退到上一个点,并继续画
  • 按住shift可以画平行于x轴或平行于z轴的线
  • 按Esc完成画线
    在这里插入图片描述
zsd_666
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
three.js 将鼠标点击位置连线
这是个问题
05-11 1105
//首先要有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
vue项目中画出优雅的线条（虚线、直线、折线、带箭头、流动效果等）
热门推荐
donggua_123的博客
03-18 3万+
需求：运行监控图模块，模块之间用虚线或者实线连接，且带有箭头 实现方法： 1、canvas绘制 2、echarts专业的表格软件（画带箭头的虚线有难度） 3、svg方法 4、leader-line插件 5、背景图 刚开始项目比较紧急，也没时间研究怎么划线比较好，就用了最笨的方法：背景图。就是让ui出一张背景图，只留下线条和背景色，其它元素的位置通过配置数据来动态渲染 ...
Three.js鼠标点击平面实现任意画线功能
HelloEarth_的博客
08-05 6182
操作步骤：鼠标指针移入三维网格平面之中，按下左键即可画线，画线过程中，若鼠标移出平面则停止绘制，再次移入则进行上次继续画线，鼠标右键结束绘制，Esc键退回上一步骤。 通过Raycaster获取鼠标坐标 在网格平面上任意位置绘制线段，就需要获取点击位置的向量Vector3，获取之后就可以确定第一个点的位置，一条直线由两个点来确定，由此，需要获取鼠标点击位置。 在写代码之前，需要了解一下THRE...
vue3 + openlayers---流动线条（含动画效果）
最新发布
QDxin_xyz的博客
05-18 184
和上一篇博客一样使用的是 setInterval 但是处理方式不一样。
python绘制贝塞尔曲线_矢量图形，如何在PS中绘制
weixin_39521651的博客
11-03 650
文/嘉华 一周进步签约作者在本篇文章中，我将会给大家介绍如何使用 Ps 的矢量工具绘制矢量图形，由此打开丰富神奇的矢量图形世界之门。在此先强调一下，文章案例展示所用的 Ps 版本为 Adobe Photoshop CC 2019 哦，所以会加入新工具的介绍。（以上案例来自一周进步Ps高级训练营）不知道大家看了以上案例之后是什么感受，至少，我个人觉得是十分惊艳了。上面的效果图都是基于矢量图形得到的...
vue中根据位置点画线
qq_44091061的博客
06-30 1728
vue中根据位置点画线
three.js画线
hb707934728的博客
12-06 886
Three框架 div#canvas-frame{ border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } //初始化渲染器 var renderer; function initTh
WebGL+Three.js入门与实战(一)——1.4 通过鼠标控制绘制
阿生博客
11-30 686
WebGL+Three.js入门与实战(一)——通过鼠标控制绘制
Three.js添加标签、取得面与鼠标交点、画线、小地图（转）
niuge8905的博客
12-27 5188
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_...
Threejs鼠标
usdnfo的专栏
12-13 659
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...
03-threejs画线
jiuliangliang的博客
01-04 1074
3、这个时候可以看到项目中有条蓝色的线条，但是背景颜色是黑色的，我们可以在Base.js中设置一下颜色。新建Base.js文件，用来编写three.js文件，抛出一个类，这个类是用来挂载dom节点的。1、命令窗口输入以下代码，我的项目名字是drawline,大家可自行填写名称。6、创建线条对象，并将几何体和材质传递到构造函数中。5、在Base.js中写一个方法，用来添加线条。在Base.js中引入场景、相机和渲染器，2、抛出一个线条数组，并将创建一个线条数组。7、将线条添加到线条数组中去。
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字，下载图片的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue.js 实现点击展开收起动画效果
12-29
最近公司项目加了个页面，其中要求是这样的，点击对应列表，展开和收起，其实就是显示和隐藏内容部分；说来惭愧，我花了半天时间才搞出来（自黑一下~），接下来分享给大家，先上效果图： vue页面： (item,...
vue实现购物车抛物线小球动画效果的方法详解
10-17
主要介绍了vue实现购物车抛物线小球动画效果的方法,结合实例形式较为详细的分析了vue.js实现抛物线动画效果购物车功能相关原理与操作注意事项,需要的朋友可以参考下
vue实现鼠标经过动画
10-16
在Vue.js中，实现鼠标经过动画可以通过监听`@mouseenter`和`@mouseleave`这两个事件来完成，同时结合CSS3的过渡效果（transition）和动画（animation）来改变元素的样式，从而达到动态视觉效果。以下将详细介绍这个...
vue实现动画，点击实现隐藏显示
04-11
vue动画，点击实现显示隐藏。
ThreeJs绘制线
Baker的博客
08-05 343
Threejs提供了绘制线的功能，先设定多个点数据，threeJs提供方法将多个点按照顺序连接起来，并提供线的材料颜色等，在上一篇中有讲到拖拽物体的功能，如果把线加入到可拖拽数组中，也可以实现拖拽线的功能，画线功能柜常用于地图编辑等，具体源码如下： <!DOCTYPE html> <html lang="...
vue3+openlayers画点、画线
RainHg的博客
07-07 4159
vue3使用openlayers画点、线
three.js使用超炫酷的鼠标跟随案例
weixin_45439379的博客
12-14 655
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
vue threejs显示辅助线
04-29
要在Vue中使用Three.js，并显示辅助线，可以按照以下步骤进行操作： 1. 安装Three.js和vue-threejs库 ``` npm install three vue-threejs --save ``` 2. 在Vue组件中导入Three.js和vue-threejs库 ```javascript import Vue from 'vue' import * as THREE from 'three' import { ThreeBSP } from 'three-js-csg-es6' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { DragControls } from 'three/examples/jsm/controls/DragControls.js' import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js' import { VueThreejs } from 'vue-threejs' ``` 3. 在Vue组件中使用VueThreejs组件，并添加辅助线 ```html <template> <vue-threejs :renderer="renderer" :camera="camera" :scene="scene" :width="width" :height="height" :clearColor="0xffffff"> <template slot-scope="{ renderer, camera, scene, width, height }"> <OrbitControls :camera="camera" :renderer="renderer" :enableDamping="true" /> <axes-helper :size="100" /> <grid-helper :size="100" :divisions="10" /> <!-- Your 3D objects here --> </template> </vue-threejs> </template> ``` 4. 运行Vue应用，即可看到带有辅助线的Three.js场景 ```javascript new Vue({ el: '#app', components: { VueThreejs }, data() { return { width: window.innerWidth, height: window.innerHeight, renderer: null, camera: null, scene: null } }, mounted() { this.init() }, methods: { init() { this.renderer = new THREE.WebGLRenderer({ antialias: true }) this.renderer.setSize(this.width, this.height) document.body.appendChild(this.renderer.domElement) this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000) this.camera.position.z = 10 this.scene = new THREE.Scene() } } }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zsd_666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值