three.js 拖动场景中物体(原生|拖拽控制器)

非控制器版

请添加图片描述
拖动场景中的物体实际上是在一个平行于窗口的平面中进行拖动，确定这个平面并确定鼠标在该平面中的位置变化，就将问题转换成简单的2d移动物体了

<!DOCTYPE html>
<html>
<head><meta charset=utf-8><title>015-拖动物体</title><link rel="stylesheet" href="./common.css">
</head>
<body onload="init()">
<script src="../lib/three94.js"></script>
<script src="../lib/stats.min.js"></script>
<script src="../lib/dat.gui.min.js"></script>
<script src="../lib/controls/OrbitControls.js"></script>
<script>/*** 3D场景中进行平移，在不旋转的情况下，只看到物体跟随鼠标以平行于窗口的轨迹运动*/let renderer, camera, scene,light, mesh,cameraControls;function initGui() {//声明一个保存需求修改的相关数据的对象let gui = {};let datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add}function init() {initGui();//GUIinitRenderer();//初始化渲染器initScene();//初始化场景initLight();//初始化光initCamera();//初始化相机initMesh();//初始化模型addEvent();initControls();//轨道相机控制器animate();//帧动画window.onresize = onWindowResize;}let ac,//当前活动对象plane,//平移平面由活动对象初始位置和当前相机方向向量确定startPosition,//目标位置,使用终末位置计算平移量，当然也可以使用递增量startMouseWorldPosition,//拖动起始点射线与平移平面的交点endMouseWorldPosition;//拖动结束点射线与平移平面的交点function addEvent() {renderer.domElement.addEventListener('mousedown', function (e) {//鼠标落点处创建射线let raycaster = screenToWorld(e.clientX, e.clientY);//获取射线经过的在指定范围内的物体集合let intersect = raycaster.intersectObjects(scene.getObjectByName('moveable').children);if (intersect.length > 0) {ac = intersect[0].object;//创建经过物体中心点的垂直于相机方向的平面plane = new THREE.Plane();plane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(plane.normal), ac.position);//如果使用世界原点构建平面会导致物体位移和鼠标位移不对等，应该使用物体的初始位置中心作为视角切面平面// plane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(plane.normal), new THREE.Vector3());startMouseWorldPosition = new THREE.Vector3();raycaster.ray.intersectPlane(plane, startMouseWorldPosition);//备份物体初始点startPosition = ac.position.clone();}});renderer.domElement.addEventListener('mousemove', function (e) {if (ac) {e.preventDefault();e.stopPropagation();//鼠标移动点处创建射线let raycaster = screenToWorld(e.clientX, e.clientY);endMouseWorldPosition = new THREE.Vector3();//目标点射线与平移平面的焦点即为平移目标点raycaster.ray.intersectPlane(plane, endMouseWorldPosition);//计算平移向量let addVector3 = endMouseWorldPosition.sub(startMouseWorldPosition);let target = startPosition.clone().add(addVector3).clone();ac.position.copy(target)}});renderer.domElement.addEventListener('mouseup', function (e) {ac = false})}function initRenderer() {renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}function initScene() {scene = new THREE.Scene();}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);camera.position.set(0, 0, 35);//x,y,zcamera.lookAt(0, 0, 0);scene.add(camera);}function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.DirectionalLight(0xffffff);light.position.set(60, 30, 0);//平行光开启阴影投射light.castShadow = true;scene.add(light);}function initMesh() {let group = new THREE.Group();group.name = 'moveable';material = new THREE.MeshLambertMaterial({color: 'red'});geometry = new THREE.BoxGeometry(20, 2, 2);mesh = new THREE.Mesh(geometry, material);group.add(mesh);scene.add(group);let helper = new THREE.AxesHelper(50);scene.add(helper);}function initControls() {cameraControls = new THREE.OrbitControls(camera, renderer.domElement);}function render() {renderer.render(scene, camera);}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}/**** @param offsetX 鼠标相对于画布左上角横向坐标* @param offsetY 鼠标相对于画布左上角纵向坐标* @returns {Raycaster|Raycaster}*/function screenToWorld(offsetX, offsetY) {let x = (offsetX / window.innerWidth) * 2 - 1,y = -(offsetY / window.innerHeight) * 2 + 1;let raycaster = new THREE.Raycaster();raycaster.setFromCamera(new THREE.Vector2(x, y), camera);return raycaster;}function animate() {requestAnimationFrame(animate);cameraControls.update();render()}</script>
</body>

控制器版

DragControls
在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset=utf-8><title>001-拖放控制器</title><link rel="stylesheet" href="../common.css">
</head>
<body onload="init()">
<script src="../../lib/three94.js"></script>
<script src="../../lib/stats.min.js"></script>
<script src="../../lib/dat.gui.min.js"></script>
<script src="../../lib/controls/DragControls.js"></script>
<script src="../../lib/controls/OrbitControls.js"></script>
<script>/*** 3D场景中进行平移，在不旋转的情况下，只看到物体跟随鼠标以平行于窗口的轨迹运动*/let renderer, camera, scene,light, mesh,cameraControls;function initGui() {//声明一个保存需求修改的相关数据的对象let gui = {};let datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add}function init() {initGui();//GUIinitRenderer();//初始化渲染器initScene();//初始化场景initLight();//初始化光initCamera();//初始化相机initMesh();//初始化模型initControls();//轨道相机控制器animate();//帧动画window.onresize = onWindowResize;}function initRenderer() {renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}function initScene() {scene = new THREE.Scene();}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);camera.position.set(0, 0, 35);//x,y,zcamera.lookAt(0, 0, 0);scene.add(camera);}function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.DirectionalLight(0xffffff);light.position.set(60, 30, 0);//平行光开启阴影投射light.castShadow = true;scene.add(light);}function initMesh() {let group = new THREE.Group();group.name = 'moveable';material = new THREE.MeshLambertMaterial({color: 'red'});geometry = new THREE.BoxGeometry(20, 2, 2);mesh = new THREE.Mesh(geometry, material);group.add(mesh);scene.add(group);let helper = new THREE.AxesHelper(50);scene.add(helper);}function initControls() {let dragControls = new THREE.DragControls(scene.getObjectByName('moveable').children, camera, renderer.domElement);dragControls.addEventListener('dragstart', function (event) {cameraControls.enabled =false;event.object.material.emissive.set(0xaaaaaa);});dragControls.addEventListener('dragend', function (event) {event.object.material.emissive.set(0x000000);cameraControls.enabled =true;});cameraControls = new THREE.OrbitControls(camera, renderer.domElement);}function render() {renderer.render(scene, camera);}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {requestAnimationFrame(animate);cameraControls.update();render()}</script>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/506996.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

element-ui 可复选树型表格

element-ui 可复选树型表格

效果 思路 自定义模板当点击某个行复选框时&#xff0c;其所有后代复选框都要同步状态&#xff0c;且其直系父辈状态需要根据所点击复选框的状态来修正点击全选复选框时&#xff0c;批量同步所有行内复选框状态 代码 非封装组件&#xff0c;按需自行改写 确保引入element-ui…
阅读更多...
树形可拖拽排序配置组件

树形可拖拽排序配置组件

效果 使用场景 vue2下自定义表格表头配置: 列排序&#xff0c;显示/隐藏等。确保表头以配置项的形式加载&#xff0c;这样表格才能对修改后的配置作响应 思路 1、表格使用render函数加载(如有疑问可私信)&#xff0c;通过类似如下的columns配置表头 columns: [{ label: 姓名…
阅读更多...
自适应浮动表单填充布局脚本

自适应浮动表单填充布局脚本

效果 1、适合搜素表单布局&#xff0c;查询重置等功能块始终位于最后一行的最后一列 2、适合普通多行两端对齐&#xff0c;未填充满的行左对齐 思路 此脚本目的为实现整齐风格的表单布局&#xff0c;为了达到整齐的效果&#xff0c;每个表单元素或者块都要设置一致的 宽度…
阅读更多...
矩阵字符串配置任意合并表格布局

矩阵字符串配置任意合并表格布局

效果 核心 布局配置矩阵&#xff08;以下为多个模式),可以使用|或\n表示矩阵行 const gridArr [1,2,a,b 3,4,a,b 5,6,a,b ,1,2 3,4 5,6 ,1,2,3,4 3,4]任意横向或者纵向相同的字符表示一个合并块 使用 <CalcTable grid"1,2,a,b|3,4,a,b|5,6,a,b" ><span…
阅读更多...
bsc是指什么_为什么KPI令人厌恶？中小企业不要乱用KPI！

bsc是指什么_为什么KPI令人厌恶？中小企业不要乱用KPI！

私信小编“绩效”两字&#xff0c;免费发送60分钟薪酬绩效管理内部培训视频。导读现在很多的企业都会对员工做一些绩效考核&#xff0c;大多数还是采用KPI的方式。但是员工对KPI的考核越来越反感&#xff0c;甚至出现抵触的情况。为什么会出现这种想象呢&#xff1f;其实很简单…
阅读更多...
微信小程序原生 地区选择器

微信小程序原生 地区选择器

阅读更多...
解决微信小程序 [Component] slot ““ is not found.

解决微信小程序 [Component] slot ““ is not found.

解决方式 当使用自定义组件或者slot标签作为组件A的插槽内容时&#xff0c;在组件A中必须定义一个默认插槽&#xff0c;对普通view等标签无限制。且因为wx:if为false的插槽等同没有定义 场景复现&#xff08;仅以自己遇到情况为例&#xff09; 1、调试基础库2.19.4 2、使用w…
阅读更多...
列表排序应用FLIP动画（vue）

列表排序应用FLIP动画（vue）

效果 原理详解 链接 1.beforeUpdate 获取first 变化前位置 (以id建立map映射) 2.updated 获取变化后位置 last 3.禁用transition并transform元素回初始位置 4.异步恢复transition 并取消 transform 代码 <template><div ref"container"><div style&…
阅读更多...
面试项目亮点_码农：面试被问到自己项目亮点时，感觉自己的回答虚伪的不行！...

面试项目亮点_码农：面试被问到自己项目亮点时，感觉自己的回答虚伪的不行！...

据我个人观察&#xff0c;大多数程序员都对自己现有的项目有吐糟的习惯&#xff0c;比如吐糟代码逻辑混乱&#xff0c;代码规范问题&#xff0c;代码可读性差&#xff0c;代码没有注释&#xff0c;没有文档&#xff0c;代码极度冗余等等&#xff0c;总之满眼看到的都是一些缺陷…
阅读更多...
微信小程序 仿 SwipeCell 的滑动单元格 SwipeBox

微信小程序 仿 SwipeCell 的滑动单元格 SwipeBox

效果 代码 页面 调用Page <block wx:for"{{4}}" wx:key"{{item}}"><view style"text-align:center;padding:20px"><swipe-box><view slot"left" style"">左侧内容</view><view class&q…
阅读更多...
u852日期限制解决补丁_《赛博朋克》1.06补丁出炉：进一步提升主机版本稳定性...

u852日期限制解决补丁_《赛博朋克》1.06补丁出炉：进一步提升主机版本稳定性...

《赛博朋克2077》虽说是出师不利&#xff0c;但是开发商CDPR承诺自己会持续优化这款“尚待打磨”的作品&#xff0c;这种态度还是要稍微肯定一下的。我们看到之前CDPR就已经推送了1.05补丁&#xff0c;修复了大量的BUG以及问题&#xff0c;并且以游戏主机的BUG修复为重点&#…
阅读更多...
微信小程序原生横向步骤条steps

微信小程序原生横向步骤条steps

效果 代码 调用 <rug-step options"{{steps}}" active"{{stepActive}}"></rug-step>steps: [{ label: 步骤1 },{ label: 步骤步骤步骤步骤2 },{ label: 步骤3 },{ label: 步骤步骤步骤步骤步骤4 },{ label: 步骤4 },{ label: 步骤4 },{ label…
阅读更多...
华为云 手机 电脑登录不了怎么办 账户_华为云手机能解决芯片困难，是否真的实在，来西瓜视频找答案...

华为云 手机 电脑登录不了怎么办 账户_华为云手机能解决芯片困难，是否真的实在，来西瓜视频找答案...

最近&#xff0c;网上到处流传着华为发布鲲鹏云手机的信息&#xff0c;有人说这个云手机能化解华为眼下的芯片燃眉之急的样子。事实真的如此吗?小编最近关注到&#xff0c;华为的鲲鹏云手机又成为大家关注和谈论的热点&#xff0c;甚至还有人说&#xff0c;华为有了云手机&…
阅读更多...
单选复选状态控制类

单选复选状态控制类

场景 不同的平台写基础组件&#xff0c;写累了&#xff0c;对于单选复选这种逻辑闭合的组件&#xff0c;javascript 控制脚本是可以完全独立出来的&#xff0c;仅对外暴露状态即可根据不同的平台和环境进行视图的渲染 效果 使用 初始化 let selector new Selector({key: va…
阅读更多...
康普顿效应是弹性碰撞吗_如何正确解读物理实验结果系列之十二——康普顿效应与光子...

康普顿效应是弹性碰撞吗_如何正确解读物理实验结果系列之十二——康普顿效应与光子...

作者&#xff1a;彭晓韬日期&#xff1a;2020年01月10日[文章摘要]&#xff1a;康普顿效应和光电效应一样&#xff0c;被广泛认定为支持光为光子的重要证据之一。但光电效应因无法解释紫限&#xff08;高于一定频率的光也不能产生光电效应&#xff09;现象而倍受质疑。同样地&a…
阅读更多...
前端 滑动拼图校验 纯js组合式调用

前端 滑动拼图校验 纯js组合式调用

前端 滑动拼图校验 纯js组合式调用效果思路代码效果 思路 独立滑块和拼图&#xff0c;通过实例方法组合使用,滑块和拼图均通过指定元素容器加载内容通过canvas 路径切片 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF…
阅读更多...
前端处理取消选择文件动作

前端处理取消选择文件动作

背景 项目中用到各种选择文件&#xff0c;且有很大一部分操作几乎相同&#xff0c;想要尽可能的简化选择上传文件的步骤&#xff0c;因此选择脚本生成 <input type"file"/> 标签的形式完成函数式的上传文件调用&#xff0c;但是如果打开了文件管理器但是并未选…
阅读更多...
methods vue过滤器 和_数据动态过滤技巧在 Vue 项目中的实践

methods vue过滤器 和_数据动态过滤技巧在 Vue 项目中的实践

这个问题是在下在做一个 Vue 项目中遇到的实际场景&#xff0c;这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -。-)&#xff0c;过程中会涉及到一些Vue源码的概念比如 $mount、 render watcher等&#xff0c;如果不太了解的话可以瞅瞅 Vue源码阅读系列…
阅读更多...
两条边延长角会有什么变化_田园易经：什么样的风水环境会影响人的健康？

两条边延长角会有什么变化_田园易经：什么样的风水环境会影响人的健康？

“气之聚&#xff0c;有水以界之&#xff0c;无风以散之。皆言风与水&#xff0c;故谓之风水”这是古人对于风水的解释。风水&#xff0c;其实是《伏羲先天六十四卦方圆图》中的一个卦&#xff0c;西晋的郭璞&#xff0c;第一次把它单独提出来&#xff0c;风水是65涣卦&#xf…
阅读更多...
afm原子力分析软件_牛津仪器发布全新大样品原子力显微镜Jupiter XR

afm原子力分析软件_牛津仪器发布全新大样品原子力显微镜Jupiter XR

2月27日&#xff0c;牛津仪器Asylum Research宣布推出新型原子力显微镜(AFM)——Jupiter XR™ AFM&#xff0c;这是一款能够利用单一扫描器同时提供全自动、多功能、高扫描速度和高精度的大样品AFM。全新大样品原子力显微镜Jupiter XR™ AFMJupiter XR™提供超过210 mm的样品空…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023