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，一经查实，立即删除！

相关文章

bch纠错码 码长8_从HDMI视频数据带有BCH纠错码讨论线材对画质的影响

bch纠错码 码长8_从HDMI视频数据带有BCH纠错码讨论线材对画质的影响

一直感觉几十元的HDMI线已经可以正常传输视频信号,那么几百元应该是接近完美了,再听人说换上几千块的线就让画质黑位什么的提升一大截,认为非常不可思议.但别人又信誓旦旦的说自己是感觉到了明显改变,对这种情况产生的争论最终不会得到正确答案,所以数据党还是从科学的角度先分…
阅读更多...
element-ui 可复选树型表格

element-ui 可复选树型表格

效果 思路 自定义模板当点击某个行复选框时&#xff0c;其所有后代复选框都要同步状态&#xff0c;且其直系父辈状态需要根据所点击复选框的状态来修正点击全选复选框时&#xff0c;批量同步所有行内复选框状态 代码 非封装组件&#xff0c;按需自行改写 确保引入element-ui…
阅读更多...
linux 删除含有关键词的文件_linux下查找包含关键字的文件

linux 删除含有关键词的文件_linux下查找包含关键字的文件

在linux下如果要查找包含某个关键字的文件&#xff0c;如要在nagios目录下搜索带有关键字“store-rd-sys”的文件&#xff0c;在终端下运行命令&#xff1a;/usr/local/nagios/etc/* (nagios目录)法1&#xff1a;grep -r “关键字” 路径[rootnagios01 ~]#grep -r "store-…
阅读更多...
树形可拖拽排序配置组件

树形可拖拽排序配置组件

效果 使用场景 vue2下自定义表格表头配置: 列排序&#xff0c;显示/隐藏等。确保表头以配置项的形式加载&#xff0c;这样表格才能对修改后的配置作响应 思路 1、表格使用render函数加载(如有疑问可私信)&#xff0c;通过类似如下的columns配置表头 columns: [{ label: 姓名…
阅读更多...
maven 打包指定依赖包_Maven打包成Jar文件时依赖包的问题

maven 打包指定依赖包_Maven打包成Jar文件时依赖包的问题

我们项目中使用到第三方的库文件&#xff0c;这些jar库文件并没有放到Maven中央库上&#xff0c;导致我们需要在项目中自己配置使用。我们的两三个开发人员对Java都是很熟&#xff0c;因此在使用中遇到了一些问题&#xff0c;表现在&#xff1a;在本地中引入第三方jar包后&…
阅读更多...
自适应浮动表单填充布局脚本

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

效果 1、适合搜素表单布局&#xff0c;查询重置等功能块始终位于最后一行的最后一列 2、适合普通多行两端对齐&#xff0c;未填充满的行左对齐 思路 此脚本目的为实现整齐风格的表单布局&#xff0c;为了达到整齐的效果&#xff0c;每个表单元素或者块都要设置一致的 宽度…
阅读更多...
rstudio导入txt文件_R语言 | 读写txt、csv、excel文件

rstudio导入txt文件_R语言 | 读写txt、csv、excel文件

前段时间看到plotnine库(封装的R语言ggplot2)作的图太美了&#xff0c;有点想重新拾起R语言^_^R语言代码略带凌乱&#xff0c;讲真的还是更喜欢Python代码简洁。不过好几年不琢磨R语言&#xff0c;对R语言代码的凌乱美有些新奇&#xff0c;很好玩&#xff0c;这也许就是久别胜新…
阅读更多...
erp采购总监个人总结_erp采购总监总结.docx

erp采购总监个人总结_erp采购总监总结.docx

erp采购总监总结ERP沙盘模拟心得体会——采购总监　　刚开始接触ERP&#xff0c;就从学长们那里了解到这门课比较有意思&#xff0c;然后又听老师说我们还有一个为期两周的ERP沙盘模拟&#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…
阅读更多...
django 套vue 模板_Vue admin template + Django 快速进行Web开发

django 套vue 模板_Vue admin template + Django 快速进行Web开发

本文教大家如何使用Vue admin template和Django快速进行Web开发&#xff0c;旨在帮助我们使用现有的工具、框架及开源UI&#xff0c;让我们在基础较为薄弱的情况下&#xff0c;能进行Web开发。本文不会介绍过多的原理&#xff0c;实践为主。Vue admin template的简单使用Vue ad…
阅读更多...
js浮点运算式

js浮点运算式

结果 calc(0.23*-0.03(4*0.2)) >0.7931 代码 //加|减|乘|除 浮点运算 const floatMulti (a, b) > {let m 0, s1 a.toString(), s2 b.toString(), s1l s1.split(.)[1], s2l s2.split(.)[1]m (s1l ? s1l.length : 0) (s2l ? s2l.length : 0)return Number(s1…
阅读更多...
悬浮球多功能_一个悬浮球，怎么可以这么贴心~

悬浮球多功能_一个悬浮球，怎么可以这么贴心~

原标题&#xff1a;一个悬浮球&#xff0c;怎么可以这么贴心~一个悬浮球 满足你N个愿望※ 专题&#xff5c;图文&#xff5c;悬浮球上手指南这个小蛋蛋是不少小朋友喜爱的零食&#xff0c;因为它能满足小朋友好几个愿望&#xff0c;能吃又能玩的零食哪个小朋友会不喜欢&#xf…
阅读更多...
python 字典添加元素乱序了_Python有序字典的两个小“惊喜”

python 字典添加元素乱序了_Python有序字典的两个小“惊喜”

从 Python 3.6 开始&#xff0c;常规的字典会记住其插入的顺序&#xff1a;就是说&#xff0c;当遍历字典时&#xff0c;你获得字典中元素的顺序跟它们插入时的顺序相同。在 3.6 之前&#xff0c;字典是无序的&#xff1a;遍历顺序是随机的。关于有序字典&#xff0c;这里有两件…
阅读更多...
el-table跨页选中

el-table跨页选中

以id作为唯一标识 模板 <el-table :data"data" ref"table"select-all"selectAll"select"select"style"width:100%"><el-table-column type"selection"></el-table-column><el-table-colum…
阅读更多...
bsc是指什么_为什么KPI令人厌恶？中小企业不要乱用KPI！

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

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

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

阅读更多...
js原生popup_JavaScript的popup框

js原生popup_JavaScript的popup框

确认框用于使用户可以验证或者接受某些信息。当确认框出现后&#xff0c;用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认&#xff0c;那么返回值为 true。如果用户点击取消&#xff0c;那么返回值为 false。语法&#xff1a;confirm("文本")functi…
阅读更多...
解决微信小程序 [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;总之满眼看到的都是一些缺陷…
阅读更多...
最新文章

Copyright @ 2022~2023