three.js 鼠标只有在滑动到物体上时控制物体，否则控制页面

最新推荐文章于 2023-06-19 17:26:13 发布
最新推荐文章于 2023-06-19 17:26:13 发布
阅读量677 收藏 1
点赞数 1
分类专栏： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42390878/article/details/81303280
版权

controls = new THREE.TrackballControls(camera, container);

container 指你显示图像的容器。

 

weixin_42390878
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js利用卷积法如何实现物体描边效果
10-15
主要给大家介绍了关于three.js利用卷积法如何实现物体描边效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
threejs鼠标选中物体
qq_41032991的博客
05-06 707
<script setup> // This starter template is using Vue 3 <script setup> SFCs // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup import HelloWorld from './components/HelloWorld.vue' import * as THREE from 'three' import { BoxGe.
鼠标经过三维物体时放大并旋转，离开时停止旋转，恢复到原来大小
zdmqweasdzxc的博客
07-25 723
void OnMouseEnter()//放大物体 {  transform.localScale += new Vector3(0.01f,0.01f,0.01f); } void OnMouseOver()//旋转物体 {  transform.Rotate (0,20*Time.deltaTime,0); } void OnMouseExit()//缩小还原物体 {  t
v3+three.js鼠标触碰物体高亮显示文字
m0_50884068的博客
03-12 1057
【代码】v3+three.js鼠标触碰物体高亮显示文字。
three.js轨道控制器查看物体
jieyucx的博客
06-19 307
在上一章节中我们只是将物体和场景渲染到了浏览器中，但是我们并不能实现交互，当我们想用鼠标滑动查看物体时，物体是不会动的，要实现这种交互效果，我们需要借助轨道控制器实现。
Three.js的物体点击选中拾取DEMO
05-23
Three.js的物体点击选中拾取DEMO
使用 Tensorflow.js和 SocketIO 通过 websocket 控制 Three.js 3D 模型.zip
07-14
使用 Tensorflow.js和 SocketIO 通过 websocket 控制 Three.js 3D 模型
three.js自定义第一人称键盘控制
12-27
居于three.js，实现键盘控制前进后退，上升下降的第一人称控制。
Three.js获取鼠标点击的三维坐标示例代码
10-20
本篇文章主要介绍了Three.js获取鼠标点击的三维坐标示例代码。具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
05-06
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
eNSP软件安装及拓扑结构搭建.docx
05-06
、eNSP的安装 1．安装eNSP之前必须先安装以下三个插件： VirtualBox WinPcap Wireshack eNSP作为模拟器主体，需要对应版本的VirtualBox和WinPcap提供虚拟环境，Wireshack用于实验当中测试抓取数据包使用。 安装好这三个插件，只需要点下一步选择好对应的安装位置即可，然后就可以安装eNSP软件了。 eNSP的页面
vmware虚拟机安装教程
05-06
附件是vmware虚拟机安装教程，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！
大屏网站粒子效果实现方式
05-06
大屏网站粒子效果实现方式
node-v8.11.3-sunos-x86.tar.xz
最新发布
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
KingbaseES的jar包
05-06
KingbaseES的jar包
Python编程基础: 掌握核心概念、语法与技巧，涵盖数据类型、控制结构、函数、模块等，适用于初学者及希望夯实基础的开发者
05-06
"想要快速掌握Python编程的基础知识吗？这个资源是您的最佳选择！它详细介绍了Python编程的基本知识点，包括数据类型、控制结构、函数、模块等内容，让您轻松入门Python编程。 无论您是编程初学者，还是有一定编程基础但希望深入学习Python的开发者，这个资源都适合您。它以通俗易懂的语言，配合实例演示，帮助您更好地理解和掌握Python编程的核心概念和技巧。 这个资源的使用场景非常广泛。您可以在学习Python编程的过程中，将其作为参考资料，随时查阅和巩固知识点。也可以在准备Python面试或考试时，通过这个资源进行复习和提升。此外，如果您是计算机相关专业的学生或教师，这个资源也可以作为教学资料，辅助教学和学习。 这个资源的优势在于它的全面性和实用性。它不仅涵盖了Python编程的基础知识点，还提供了一些实用的编程技巧和经验分享。通过学习这个资源，您将能够更加熟练地使用Python编程，解决实际问题和项目挑战。 如果您还在为找不到好的Python编程学习资源而苦恼，那么这个资源将是您的解决方案。它不仅能够帮助您快速入门Python编程，还能够为您的编程之路提供坚实的支持。还等什么
聚类分析（108页 PPT）.ppt
05-06
聚类分析（108页 PPT）
径硕科技：B2B企业如何一个人搭建内容营销体系？.pdf
05-06
径硕科技：B2B企业如何一个人搭建内容营销体系？.pdf
Three.js 画布上不增加其他物体，触摸滑动显示线条，触摸结束线条消失
05-25
你可以使用 Three.js 的 Raycaster 来检测触摸事件，并在触摸滑动时创建一个线条对象，触摸结束时将其删除。下面是一个简单的示例代码： ```js // 创建场景和相机 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建线条材质 var material = new THREE.LineBasicMaterial({ color: 0x0000ff }); // 创建空的线条几何体 var geometry = new THREE.Geometry(); var line = new THREE.Line(geometry, material); // 添加线条到场景中 scene.add(line); // 监听触摸事件 document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); document.addEventListener('touchend', onDocumentTouchEnd, false); // 创建射线检测器 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onDocumentTouchStart(event) { event.preventDefault(); // 设置鼠标坐标 mouse.x = (event.touches[0].clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1; // 从相机位置发射一条射线，检测是否与场景中的物体相交 raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { // 如果相交了，将线条的起点设置为相交点的位置 var point = intersects[0].point; geometry.vertices.push(point); } } function onDocumentTouchMove(event) { event.preventDefault(); // 设置鼠标坐标 mouse.x = (event.touches[0].clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1; // 从相机位置发射一条射线，检测是否与场景中的物体相交 raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { // 如果相交了，将线条的终点设置为相交点的位置 var point = intersects[0].point; geometry.vertices.push(point); geometry.verticesNeedUpdate = true; } } function onDocumentTouchEnd(event) { event.preventDefault(); // 清空线条几何体 geometry.vertices = []; geometry.verticesNeedUpdate = true; } ``` 这段代码会在 Three.js 的渲染器上创建一个空的线条，然后监听触摸事件，并使用 Raycaster 检测触摸点是否与场景中的物体相交。如果相交了，就将线条的顶点设置为相交点的位置，并在触摸滑动时更新线条的终点。当触摸结束时，清空线条的顶点，从而使线条消失。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值