ThreeJs添加拖动辅助线

最新推荐文章于 2024-07-13 10:00:00 发布
最新推荐文章于 2024-07-13 10:00:00 发布
阅读量422 收藏 2
点赞数 2
分类专栏： ThreeJs 文章标签： ThreeJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26881073/article/details/137219287
版权

之前有写过一篇关于Threejs拖动的时候限制在一个轴上，使用的是原始的拖拽事件，在拖拽事件中设置其他两个轴的拖拽失效，也就是拖拽后重置为开始拖拽时的坐标点，缺点是不那么直观，而且需要写代码实现，最近发现其实是有专用的组件来实现的，也就是我们在大多数建模中使用的方式，有三个箭头，鼠标悬停对应的箭头实现固定单方向的平移。组件名是TransformControls。使用起来也非常简单。下面演示下过程：

首先创建一个场景，相机，灯光等对象，搭建出一个简单的场景，并添加两个小方块模型：

 /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * 相机设置
     */
    //窗口宽度
    var width = window.innerWidth;
    //窗口高度
    var height = window.innerHeight;
    //窗口宽高比
    var k = width / height;
    //三维场景显示范围控制系数，系数越大，显示的范围越大
    var s = 200;
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    //设置相机位置
    camera.position.set(200, 300, 200);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);

    /**
     * 光源设置
     */
        //新建点光源(常用光源分为点光源和环境光，点光源的效果类似灯泡，环境光的效果类似白天的太阳光)
    var point = new THREE.PointLight(0xffffff);
    //设置点光源的位置
    point.position.set(400, 200, 300);
    //将点光源添加到场景中
    scene.add(point);

    /**
     * 创建网格模型，也就是3D模型
     */
    //创建一个立方体几何对象Geometry
    var geometry = new THREE.BoxGeometry(10, 10, 10);
    //给几何体创建材质，这里是改为蓝色，材质对象Material
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });
    //网格模型对象Mesh
    var mesh = new THREE.Mesh(geometry, material);
    //网格模型添加到场景中，每个模型最终都要添加到场景中才会被渲染
    scene.add(mesh);
	
	
	var geometry1 = new THREE.BoxGeometry(10, 10, 10);
    //给几何体创建材质，这里是改为蓝色，材质对象Material
    var material1 = new THREE.MeshLambertMaterial({
        color: 0xff00ff
    });
    //网格模型对象Mesh
    var mesh1 = new THREE.Mesh(geometry1, material1);
    //网格模型添加到场景中，每个模型最终都要添加到场景中才会被渲染
	mesh.position.set(20,0,0)
    scene.add(mesh1);

  /**
     * 创建渲染器对象
     */
    //创建渲染器对象(渲染要等所有东西都加进去再渲染场景，创建和3D模型和光源没有先后顺序)
    var renderer = new THREE.WebGLRenderer();
    //设置渲染区域尺寸(设置的是整个屏幕的长度和宽度
    renderer.setSize(width, height);
    //设置渲染的背景色
    renderer.setClearColor(0xb9d3ff, 1);
    //body元素中插入canvas对象，也可以在页面中添加div，并加上id，通过id指定在某个div中渲染
	let container = document.getElementById("container")
	container.appendChild(renderer.domElement);
	
//循环渲染
	function render() {
		//执行渲染操作   指定场景、相机作为参数
		renderer.render(scene, camera);
		// 使用 requestAnimationFrame 函数安排下一次渲染
		requestAnimationFrame(render);
		//修改正方体网格的x轴旋转角度
	}
	render()

由此得到这样一个场景

然后开始加入拖动组件和拖动辅助组件

<!--可视化拖动控件-->
	<script src="./ThreeJs/js/DragControls.js"></script>
	<!--可视化拖动控件-->
<script src="./ThreeJs/js/TransformControls.js"></script>
	//将需要拖拽的模型放到拖拽对象中，
	let objects = [];
	objects.push(mesh)
	objects.push(mesh1)
	var dragControls = new THREE.DragControls(objects, camera, renderer.domElement);
	
	//在场景中添加拖拽辅助对象，默认对所有课拖拽模型生效
	var transformControls = new THREE.TransformControls(camera, renderer.domElement);
    scene.add(transformControls);
	

    // 鼠标略过事件
    dragControls.addEventListener('hoveron', function (event) {
        // 让变换控件对象和选中的对象绑定
        transformControls.attach(event.object);
    });
    // 开始拖拽
    dragControls.addEventListener('dragstart', function (event) {
           dragControls.enabled = false;
    });
    // 拖拽结束
    dragControls.addEventListener('dragend', function (event) {
        dragControls.enabled = true;  
	});

最终效果如下：

拖动辅助组件的效果

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入three.js，这是使用three必须的js文件，此处引入的是外网提供的three文件，如果引入有问题可以到官网下载three文件后引入本地的theee.js文件-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
	<!--可视化拖动控件-->
	<script src="./ThreeJs/js/DragControls.js"></script>
	<!--可视化拖动控件-->
<script src="./ThreeJs/js/TransformControls.js"></script>
</head>

<body>
<div id="container" style="width:100%;height:100%"></div>
<script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * 相机设置
     */
    //窗口宽度
    var width = window.innerWidth;
    //窗口高度
    var height = window.innerHeight;
    //窗口宽高比
    var k = width / height;
    //三维场景显示范围控制系数，系数越大，显示的范围越大
    var s = 200;
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    //设置相机位置
    camera.position.set(80, 80, 80);
    //设置相机方向(指向的场景对象)
    camera.lookAt(0,0,0);

    /**
     * 光源设置
     */
        //新建点光源(常用光源分为点光源和环境光，点光源的效果类似灯泡，环境光的效果类似白天的太阳光)
    var point = new THREE.PointLight(0xffffff);
    //设置点光源的位置
    point.position.set(400, 200, 300);
    //将点光源添加到场景中
    scene.add(point);

    /**
     * 创建网格模型，也就是3D模型
     */
    //创建一个立方体几何对象Geometry
    var geometry = new THREE.BoxGeometry(10, 10, 10);
    //给几何体创建材质，这里是改为蓝色，材质对象Material
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });
    //网格模型对象Mesh
    var mesh = new THREE.Mesh(geometry, material);
    //网格模型添加到场景中，每个模型最终都要添加到场景中才会被渲染
    scene.add(mesh);
	
	
	var geometry1 = new THREE.BoxGeometry(10, 10, 10);
    //给几何体创建材质，这里是改为蓝色，材质对象Material
    var material1 = new THREE.MeshLambertMaterial({
        color: 0xff00ff
    });
    //网格模型对象Mesh
    var mesh1 = new THREE.Mesh(geometry1, material1);
    //网格模型添加到场景中，每个模型最终都要添加到场景中才会被渲染
	mesh.position.set(20,0,0)
    scene.add(mesh1);

    /**
     * 创建渲染器对象
     */
    //创建渲染器对象(渲染要等所有东西都加进去再渲染场景，创建和3D模型和光源没有先后顺序)
    var renderer = new THREE.WebGLRenderer();
    //设置渲染区域尺寸(设置的是整个屏幕的长度和宽度
    renderer.setSize(width, height);
    //设置渲染的背景色
    renderer.setClearColor(0xb9d3ff, 1);
    //body元素中插入canvas对象，也可以在页面中添加div，并加上id，通过id指定在某个div中渲染
	let container = document.getElementById("container")
	container.appendChild(renderer.domElement);
	
	
	//将需要拖拽的模型放到拖拽对象中，
	let objects = [];
	objects.push(mesh)
	objects.push(mesh1)
	var dragControls = new THREE.DragControls(objects, camera, renderer.domElement);
	
	//在场景中添加拖拽辅助对象，默认对所有课拖拽模型生效
	var transformControls = new THREE.TransformControls(camera, renderer.domElement);
    scene.add(transformControls);
	

    // 鼠标略过事件
    dragControls.addEventListener('hoveron', function (event) {
        // 让变换控件对象和选中的对象绑定
        transformControls.attach(event.object);
    });
    // 开始拖拽
    dragControls.addEventListener('dragstart', function (event) {
           dragControls.enabled = false;
    });
    // 拖拽结束
    dragControls.addEventListener('dragend', function (event) {
        dragControls.enabled = true;  
	});

	//循环渲染
	function render() {
		//执行渲染操作   指定场景、相机作为参数
		renderer.render(scene, camera);
		// 使用 requestAnimationFrame 函数安排下一次渲染
		requestAnimationFrame(render);
		//修改正方体网格的x轴旋转角度
	}
	render()

</script>
</body>
</html>

baker_zhuang
关注
专栏目录
Three 之 three.js （webgl）鼠标/手指通过射线移动物体的简单整理封装
仙魁XAN
12-06 2853
目录Three 之 three.js （webgl）鼠标/手指通过射线移动物体的简单整理封装一、简单介绍二、实现原理三、注意事项四、效果预览五、案例实现步骤六、关键代码Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl） 中，PC 端移动通过鼠标移动物体，移动端通过手指交互移动物体的整理，主要是通过对应的touchstart、touchmove、touchend ，以及 Threejs 中的 Raycaster 。其中，如果有不足之处，
Three.js入门 （参考胖达老师）｜ 大帅老猿threejs特训
DisplayName2023的博客
12-31 1168
Three.js基础入门 场馆搭建 灯光阴影和角色控制
threejs第二篇添加坐标辅助线和轨道控制器
王的博客
05-14 288
threejs第二篇添加坐标辅助线和轨道控制器
jquery拖动辅助线演示
10-31
jquery拖动辅助线演示，主要演示拖动div时辅助线显示的功能
three.js官方案例（animation / skinning / ik）webgl_animation_skinning_ik.html学习记录
最新发布
hemiaoyuan1989的专栏
07-13 988
target、effector 和 link-index 是 .sculptor.bones 中的索引整数。骨骼关系从父级到子级的顺序应为“links[ n ]、 links[ n - 1 ]、...、 links[ 0 ]、effector”。CCDIKSolver 用 CCD 算法解决逆运动学问题。CCDIKSolver 设计用于与。用于 CCDIKSolver 解决 IK 问题。— 指定 IK 参数的对象。
优化Threejs的坐标辅助线,适用于更多场景
weixin_62328265的博客
05-30 448
优化Threejs中的坐标辅助线,创建一个辅助方法,使用圆锥体与圆锥体创建辅助线的线条,拓展使用场景,可指定辅助线的粗细,长度等信息
Threejs入门之五:Threejs中的辅助对象
九仞山的专栏
04-01 1472
介绍Threejs中的辅助对象，如坐标轴辅助对象、点光源辅助对象、平行光辅助对象、聚光灯辅助对象等，在开发的过程中利用这些辅助对象可以为我们开发程序提供便利
Three.js(2)---＞基础篇-Helpers(辅助对象/辅助线)
z1783883121的博客
09-22 2928
在Three.js中有许多的Helper(辅助对象)用来帮助我们的开发。 本篇例举几个常见的，方便理解。以及一些效果 文章目录前言一、AxesHelper二、BoxHelper三、Box3Helper四、CameraHelper五、DirectionalLightHelper六、GridHelper七、PolarGridHelper八、HemisphereLightHelper九、PlaneHelper十、PointLightHelper十一、SpotLightHelper总结 前言 Helper对象.
【Threejs】拖拽
DJames23的博客
07-16 959
参考博客： Three.js - 使用 THREE.DragControls 实现模型拖拽
【前端实习生入职】之-threejs实现可拖动立体框
Web_boom的博客
12-23 556
小伙伴们大家好，已经有一段时间没有更新了，这段时间匆匆忙忙来到北京实习，从一个南方的前端在校学生到北方来生活实习，一切都在慢慢适应当中，来公司之前就了解到这家公司是做自动驾驶ai方面的，到公司后果不其然疯狂学习threejs，webGL等3D开发，来第一周主管就给我发布一个任务如下：以下这张图片很好的展示了threejs的系统模块，你可以把知识点模块化加以学习～3～b站教学视频(听了好几个，这个讲的我觉得很通俗易懂)：// 监听窗口大小的变化render();}
threejs 绘制球体_3D可视化库-Threejs调研及简单示例
weixin_39760068的博客
01-13 957
0 背景WebGL是一种3D绘图协议，其允许JavaScript和OpenGL ES2.0结合在一起，为H5 Canvas提供硬件3D加速渲染，可以借助系统显卡在浏览器里更流畅地显示3D场景和模型。Threejs是一款webGL框架，由于其易用性被广泛应用。Threejs在WebGL的api接口基础上，又进行了一层封装。WebGL原生的api是一种非常低层的接口，需要一些数学和图形学的相关技术。其...
d3.js实现图形拖拽
10-15
主要为大家详细介绍了d3.js实现图形拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
threejs个人笔记
蛋蛋老公的博客
08-17 1845
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)width — X轴上面的宽度，默认值为1。 height — Y轴上面的高度，默认值为1。 depth — Z轴上面的深度，默认值为1。 widthSegments — （可选）宽度的分段数，默认值是1。 heightSegments — （可
THREE.JS 使用DragControls实现模型拖动
qq_44426236的博客
11-27 2064
DragControls 在vue项目中的应用。
Three.js 创建网格辅助线，坐标轴辅助线，模型骨骼辅助线
ZHANG_666
08-04 1091
three.js 网格辅助线（GridHelper），坐标轴辅助线（AxesHelper），模型骨骼辅助线（SkeletonHelper）的使用
THREE.JS 使用TransformControls对模型拖拽
qq_44426236的博客
12-21 2365
该类可提供一种类似于在数字内容创建工具（例如Blender）中对模型进行交互的方式，来在3D空间中变换物体。和其他控制器不同的是，变换控制器不倾向于对场景摄像机的变换进行改变。TransformControls 是由 THREE.JS 提供的一类控制器。
threejs 实现模型拖拽功能
qq_40994735的博客
11-03 5344
导入相关插件 import { DragControls } from "three/examples/jsm/controls/DragControls"; //拖拽控件 import { TransformControls } from "three/examples/jsm/controls/TransformControls"; //可视化平移控件 代码 objects 为存储移动的mesh模型。 <template> <div id="myThree" ref=
three.js 模型拖拽
哈哈一笑
02-21 3551
多模型独立拖拽 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多模型独立拖拽</title> <style> body { margin: 0; } </style> </head> <body> <script
three.js坐标轴辅助器AxesHelper
jieyucx的博客
06-20 1404
坐标轴辅助器可协助您在three.js场景中定位和定向对象，使调试和所有其他工作更加轻松。函数使用一个数值参数，该数字指定辅助器的大小。在这个例子中，我们设置大小为5。在这里，我们创建了一个坐标轴辅助器并将其添加到场景中。
使用three.js 绘制摄像头视角辅助线
03-31
要在HDRP管线中创建穿透的体积云，可以按照以下步骤进行操作： 1. 在Unity中创建一个新的场景，并将渲染管线设置为HDRP。 2. 在场景中创建一个空的GameObject，并将其命名为“Volume Cloud”。 3. 在“Volume Cloud”对象上添加一个“Volume”组件，并将其类型设置为“Global Volume”。 4. 在“Volume”组件中，将“Rendering Layer Mask”设置为“Everything”。 5. 在“Volume”组件中，将“Blend Distance”设置为一个适当的值，以确保云可以透过其他对象。 6. 在“Volume”组件中，单击“Add Override”按钮，并选择“Density Volume Override”。 7. 在“Density Volume Override”中，将“Mode”设置为“Texture”. 8. 在“Density Volume Override”中，单击“Create New Texture”按钮，并创建一个新的2D纹理。 9. 在“Texture”窗口中，绘制云的形状。可以使用任何绘图软件，如Photoshop或GIMP等。 10. 将绘制好的纹理拖动到“Density Volume Override”中的“Texture”字段中。 11. 在“Density Volume Override”中，将“Invert Texture”设置为“True”，以确保云的形状与纹理相反。 12. 在“Density Volume Override”中，将“Intensity”设置为一个适当的值，以控制云的密度。 13. 在“Density Volume Override”中，将“Tint Color”设置为适当的颜色，以控制云的颜色。 14. 在“Volume Cloud”对象上添加一个“Volumetric Light Controller”组件，并将其类型设置为“Global”. 15. 在“Volumetric Light Controller”组件中，将“Volume”设置为“Volume Cloud”。 16. 在“Volumetric Light Controller”组件中，将“Light”设置为场景中的主光源。 17. 在“Volumetric Light Controller”组件中，将“Density”设置为一个适当的值，以控制云的密度。 18. 在“Volumetric Light Controller”组件中，将“Scattering”设置为一个适当的值，以控制云的散射程度。 19. 在“Volumetric Light Controller”组件中，将“Anisotropy”设置为一个适当的值，以控制云的各向异性。 20. 最后，在场景中添加其他对象，并测试云是否可以穿透它们。 以上是在HDRP管线中创建穿透的体积云的步骤。需要注意的是，这只是一个基本的示例，可以根据需要进行进一步的调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

baker_zhuang

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

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

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

打赏作者

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

抵扣说明：

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

余额充值