three.js 模型拖动之DragControls控制器
需求:
拖动场景内的模型
方案:
增加控制器DragControls
1、引入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TransformControls } from "three/examples/jsm/controls/TransformControls";
import { DragControls } from "three/examples/jsm/controls/DragControls";
2、加载控制器
获取场景内模型列表 ——》
var objects = [];
for (let i = 0; i < this.scene.children.length; i++) {
if (this.scene.children[i].isMesh) {
objects.push(this.scene.children[i]);
}
}
加载控制器TransformControls ——》
加载控制器DragControls ——》
this.transformControls = new TransformControls(this.camera, this.renderer.domElement);
this.scene.add(this.transformControls)
this.dragControls = new DragControls(objects, this.camera, this.renderer.domElement);
3、更改模型位置 ——》
可选监听:
dragstart 开始移动
drag
dragend 结束移动
hoveron 鼠标进入模型
hoveroff 鼠标离开模型
this.dragControls.addEventListener('hoveron', function( event ){
self.orbitControls.enabled = false
self.changeMaterial(event.object)
console.log(event.object)
self.transformControls.attach(event.object);
self.transformControls.setSize(0.4);
});
createevent() {
// 事件管理、操作控制器 ,旋转控件
this.orbitControls = new OrbitControls(
this.camera,
this.renderer.domElement
);
// this.controls = new TrackballControls(this.camera, this.renderer.domElement); // 轨迹球控件
// // controls.noRotate = true;
// this.controls.noPan = true;
// // 视角最小距离
// this.controls.minDistance = 1000;
// // 视角最远距离
// this.controls.maxDistance = 5000;
this.orbitControls.enableDamping = true;
this.orbitControls.maxDistance = 1000;
this.orbitControls.minDistance = 1;
this.transformControls = new TransformControls(this.camera, this.renderer.domElement);
this.scene.add(this.transformControls)
var objects = [];
for (let i = 0; i < this.scene.children.length; i++) {
if (this.scene.children[i].isMesh) {
objects.push(this.scene.children[i]);
}
}
this.dragControls = new DragControls(objects, this.camera, this.renderer.domElement);
var self = this
this.dragControls.addEventListener('dragstart', function (event) { //
// this.controls.enabled = false;
});
// 拖拽结束
this. dragControls.addEventListener('dragend', function (event) {
// this.controls.enabled = true;
});
this.dragControls.addEventListener('hoveron', function( event ){ //选中模型
self.orbitControls.enabled = false // 关闭orbitControls 控制器
self.changeMaterial(event.object)
console.log(event.object)
self.transformControls.attach(event.object);
self.transformControls.setSize(0.4);
});
this.dragControls.addEventListener('hoveroff',function(event){ 离开模型
self.modelnumber = event.object.position
self.orbitControls.enabled = true //启动orbitControls 控制器
}) },
three.js 模型拖动之DragControls控制器的更多相关文章
- [.net 面向对象程序设计深入](6).NET MVC 6 —— 模型、视图、控制器、路由等的基本操作
[.net 面向对象程序设计深入](6).NET MVC 6 —— 模型.视图.控制器.路由等的基本操作 1. 使用Visual Studio 2015创建Web App (1)文件>新建> ...
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- MVC(Model(模型) View(视图) Controller(控制器))
复习 1. 商品表 增删改查 index.php add.php view.php edit.php action.php 2. MVC(Model(模型) Vie ...
- 深入理解模型,视图和控制器(C#)
这篇文章向你提供ASP.NET MVC 模型,视图和控制的高度概览.换句话说,解释一下ASP.NET MVC中的 ‘M’, ‘V’, 和 ‘C’. 看完这篇文章以后,你应该就能理解ASP.NET MV ...
- 原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装 代码如下: <!DOCTYPE html> <htm ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- three.js模型
Three.js有一系列导入外部文件的辅助函数,是在three.js之外的,使用前需要额外下载, 在https://github.com/mrdoob/three.js/tree/master/exa ...
- js实现拖动验证码
效果图: Index.html <!DOCTYPE html> <html lang="en"> <head> <meta http-eq ...
- js窗口拖动 模版
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
随机推荐
- SQL 练习27
查询每门课程的平均成绩,结果按平均成绩降序排列,平均成绩相同时,按课程编号升序排列 SELECT cid,AVG(score) 平均成绩 from sc GROUP BY cid ORDER BY A ...
- springboot配置ssl-pfx
application.yml server: port: 9443 ssl: key-store: classpath:4148017_qra.meeno.net.pfx key-store-typ ...
- @ControllerAdvice注解(全局异常捕获)
背景 @ControllerAdvice 注解 通常用于定义@ExceptionHandler, @InitBinder和@ModelAttribute 适用于所有@RequestMapping方法的 ...
- Anaconda Pycharm 是怎么个事儿?
前言 许多人学习Python的经历可能很相似,写程序没有问题,最后却被各种环境困扰. 不论你是Python小白,还是学习Python有一段时间了.都可以认真的看一下ヾ(≧▽≦*)o 这篇文章让你对An ...
- .Net Core 踩坑记录--无法逐步调试类库文件
前提 新建类库 在新项目中引用该类库 将类库对应的.PDB文件 拷贝至新项目的bin文件夹下 结果 无法进行跟踪调试 狗带 分析与解决 1: 打开 工具-->选项-->调试 2: 常规-- ...
- Python环境变量配置
第一步:下载Python安装包 在Python的官网 www.python.org 中找到最新版本的Python安装包,点击进行下载,请注意,当你的电脑是32位的机器,请选择32位的安装包,如果是64 ...
- 一、vue基础语法(轻松入门vue)
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- python画循环圆
import turtle for i in range(100,0,-5): # 从100到0循环递减每次减5 turtle.circle(i,90) 不懂为啥第一次运行会出错,错了再运行一遍for ...
- 修改IDEA默认模板
然后找到你想要修改的模板就可以了
- PyPDF2.py 合并pdf时报错问题
报错如下: Traceback (most recent call last): File "./pdf_merge.py", line 68, in <module> ...