three.js 模型拖拽

已于 2022-02-21 13:39:48 修改
阅读量3.4k 收藏 16
点赞数 6
分类专栏： 前端 文章标签： javascript 前端 开发语言
于 2022-02-21 13:38:06 首次发布
欢迎转载
本文链接：https://blog.csdn.net/qq_33242956/article/details/123045412
版权

多模型独立拖拽

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多模型独立拖拽</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from "../../standard.libs/three.js/build/three.module.js"; /* three.js的module */
        import { OrbitControls } from '../../standard.libs/three.js/examples/jsm/controls/OrbitControls.js';
        import { DragControls } from '../../standard.libs/three.js/examples/jsm/controls/DragControls.js';
        import { TransformControls } from '../../standard.libs/three.js/examples/jsm/controls/TransformControls.js';

        var scene, camera, renderer, orbitControls;
        const objects = []; /* 模型数组 */

        initScene();
        createGeometry();
        createDragControls(objects);

        function initScene() {
            /* 构建场景 */
            scene = new THREE.Scene();

            /* 构建一个坐标系 */
            var axisHelper = new THREE.AxesHelper(1000);
            scene.add(axisHelper);

            /* 构建环境光, 环境光不能用来投射阴影，因为它没有方向 */
            // var ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
            // scene.add(ambientLight);

            /* 构建点光源，可以有明暗变化 */
            var pointLight = new THREE.PointLight(0xffffff);
            pointLight.position.set(400, 200, 300); //点光源位置
            scene.add(pointLight); //点光源添加到场景中

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

            /* 构建渲染器 */
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height); // 设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
            document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

            orbitControls = new OrbitControls(camera, renderer.domElement);
            orbitControls.update();
        }

        function createGeometry() {
            /* 构建正方体几何对象添加到场景中 */
            var boxGeometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个正方体几何对象
            var materialBox = new THREE.MeshLambertMaterial({
                color: 0x0000ff,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshBox = new THREE.Mesh(boxGeometry, materialBox); // 网格模型对象Mesh
            meshBox.name = "box";
            scene.add(meshBox); // 网格模型添加到场景中，未设定x/y/z坐标，默认位于坐标轴原点
            objects.push(meshBox);

            /* 圆柱体几何对象添加到场景中 */
            var cylinder = new THREE.CylinderGeometry(50, 50, 200, 25);
            var materialCylinder = new THREE.MeshLambertMaterial({
                color: 0xd0021b,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshCylinder = new THREE.Mesh(cylinder, materialCylinder); // 网格模型对象Mesh
            meshCylinder.name = "cylinder"; /* 标识符 */
            scene.add(meshCylinder);
            objects.push(meshCylinder);
        }

        function createDragControls(objects) {
            // 初始化拖拽控件
            var dragControls = new DragControls(objects, camera, renderer.domElement);

            // 鼠标略过事件
            dragControls.addEventListener('hoveron', function (event) {
                console.log("createDragControls hoveron");
                // 让变换控件对象和选中的对象绑定
            });

            // 开始拖拽
            dragControls.addEventListener('dragstart', function (event) {
                console.log("createDragControls dragstart");
                orbitControls.enabled = false;
            });

            // 拖拽过程
            dragControls.addEventListener('drag', function (event) {
                console.log("createDragControls drag");
                dragControlsRender();
            });

            // 拖拽结束
            dragControls.addEventListener('dragend', function (event) {
                console.log("createDragControls dragend");
                orbitControls.enabled = true;
            });
        }

        function dragControlsRender() {
            renderer.render(scene, camera);
        }

        function render() {
            orbitControls.update();
            /* 执行渲染 */
            requestAnimationFrame(render);
            renderer.render(scene, camera); //执行渲染操作，指定场景、相机作为参数
        }
        render();
    </script>
</body>

</html>

多模型组合拖拽

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多模型组合拖拽</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from "../../standard.libs/three.js/build/three.module.js"; /* three.js的module */
        import { OrbitControls } from '../../standard.libs/three.js/examples/jsm/controls/OrbitControls.js';
        import { DragControls } from '../../standard.libs/three.js/examples/jsm/controls/DragControls.js';
        import { TransformControls } from '../../standard.libs/three.js/examples/jsm/controls/TransformControls.js';

        var scene, camera, renderer, orbitControls;
        const objects = []; /* 模型数组 */

        initScene();
        createGeometry();
        createDragControls(objects);

        function initScene() {
            /* 构建场景 */
            scene = new THREE.Scene();

            /* 构建一个坐标系 */
            var axisHelper = new THREE.AxesHelper(1000);
            scene.add(axisHelper);

            /* 构建环境光, 环境光不能用来投射阴影，因为它没有方向 */
            // var ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
            // scene.add(ambientLight);

            /* 构建点光源，可以有明暗变化 */
            var pointLight = new THREE.PointLight(0xffffff);
            pointLight.position.set(400, 200, 300); //点光源位置
            scene.add(pointLight); //点光源添加到场景中

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

            /* 构建渲染器 */
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height); // 设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
            document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

            orbitControls = new OrbitControls(camera, renderer.domElement);
            orbitControls.update();
        }

        function createGeometry() {
            /* 构建正方体几何对象添加到场景中 */
            var boxGeometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个正方体几何对象
            var materialBox = new THREE.MeshLambertMaterial({
                color: 0x0000ff,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshBox = new THREE.Mesh(boxGeometry, materialBox); // 网格模型对象Mesh
            meshBox.name = "box";
            scene.add(meshBox); // 网格模型添加到场景中，未设定x/y/z坐标，默认位于坐标轴原点
            objects.push(meshBox);

            /* 圆柱体几何对象添加到场景中 */
            var cylinder = new THREE.CylinderGeometry(50, 50, 200, 25);
            var materialCylinder = new THREE.MeshLambertMaterial({
                color: 0xd0021b,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshCylinder = new THREE.Mesh(cylinder, materialCylinder); // 网格模型对象Mesh
            meshCylinder.name = "cylinder"; /* 标识符 */
            scene.add(meshCylinder);
            objects.push(meshCylinder);
        }

        function createDragControls(objects) {
            // 初始化拖拽控件
            var dragControls = new DragControls(objects, camera, renderer.domElement);

            // 鼠标略过事件
            dragControls.addEventListener('hoveron', function (event) {
                console.log("createDragControls hoveron");
                // 让变换控件对象和选中的对象绑定
            });

            // 开始拖拽
            dragControls.addEventListener('dragstart', function (event) {
                console.log("createDragControls dragstart");
                orbitControls.enabled = false;
            });

            // 拖拽过程
            dragControls.addEventListener('drag', function (event) {
                console.log("createDragControls drag");

                var name = event.object.name;
                // 给内部模型位置赋值
                for (var i = 0; i < objects.length; i++) {
                    if (objects[i].name != event.object.name) {
                        objects[i].position.x = event.object.position.x;
                        objects[i].position.y = event.object.position.y;
                        objects[i].position.z = event.object.position.z;
                    }
                }

                dragControlsRender();
            });

            // 拖拽结束
            dragControls.addEventListener('dragend', function (event) {
                console.log("createDragControls dragend");
                orbitControls.enabled = true;
            });
        }

        function dragControlsRender() {
            renderer.render(scene, camera);
        }

        function render() {
            orbitControls.update();
            /* 执行渲染 */
            requestAnimationFrame(render);
            renderer.render(scene, camera); //执行渲染操作，指定场景、相机作为参数
        }
        render();
    </script>
</body>

</html>
花一样的阿衰
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【three.js】如何旋转、缩放、拖动模型？
qq_38196449的博客
06-11 176
这里我们需要用到相机控件OrbitControls。
three.js加载obj模型
yuzecheng123的博客
08-25 749
其实在我们工作中用three.js最大的功能是：加载模型，然后展示在浏览器端，支持鼠标事件和键盘事件，标注等，以后的文章会详细对每个进行讲解。 今天主要给大家分享一下怎么加载obj模型（如果模型太大的话，建议转换为json然后再加载后面的文章会分享怎么加载json格式的），加载模型还是离不开那五大步骤不知道的可以查看three.js入门基础这里就不说了，也可以看下面的代码注释： if (!De
three.js使用dragControls实现拖动
最新发布
weixin_43666952的博客
03-22 747
js中文文档中是了解到这么一个控制器的，反复设置就是不生效，因为希望是在点击模型底部的一个按钮后让他切换控制器实现单独的平移操作的。本身已经在使用的是轨道控制器，所以初始化的时候又加了这个拖拽控制器，比较发现在初始化的时候，两个的传参是不一样的，常用的轨道控制器职场需要传入相机和渲染元素render.document 就可以，拖拽控制器还需传入要拖拽的模型元素，就是你要拖拽的目标。由于我的是点击模型要整体移动，我就直接是遍历一开始要存储的数组挨个添加到group 直接用上面的步骤实现的拖动。
解决three.js导入模型拖拽问题
学习ing
12-11 2813
最近在使用three.js做3D项目，要实现一个功能，就是能拖动模型，在网上找了很久，通过使用DragControls.js和TransformControls.js确实可以实现，但是遇到一个问题，使用网上的这种方式只能实现单个Mesh的拖动，而项目中经常会遇到导入的模型不是单个的Mesh，而是一个group，在这种情况下，该如何实现整个模型的拖动。 解决办法：当导入外部模型时可以在模型的外部套一...
基于Threejs 3D场景编辑器代码.zip
09-23
基于threejs完成的三维场景编辑器，提供三维资源库，三维场景模型材质替换，环境参数设置，三维场景管理等功能
ThreeJS视频教程
09-24
对整threeJS体系进行全面剖析。整理出全面的教学大纲，涵盖内容面非常广。此教学版本为threeJS107版本。关于版本不建议大家使用低于90的版本学习。以下是课程目录1-ThreeJS概览（基本图形简介，什么是点线面如何绘制点线面，什么是材质，什么是几何体，什么是相机，什么是渲染器，什么是场景）2-相机和渲染器（详解相机类型，渲染器如何使用，针对不同场景怎么用，怎么调效果，怎么渲染，怎么输出画布，如何解决透明问题等等）3-创建平面几何（常见的几何体如何使用，如何使用简单的几何体绘制出自定义自己想要的几何体，关于几何体的性能剖析，如何解决性能，几何体的渲染原理）4-高级图形算法常见库（求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等）5-sprite精灵(怎么让一个图标永远朝向屏幕，精灵的属性，精灵材质原理等，广告提示框必用)6-骨骼游戏动画（什么是模型动画，常见游戏案例，如何让人头进行各种攻击动作）7-3d模型加载（常见模型格式，如何渲染不同格式，不同格式的特点，什么格式性能优越，模型渲染异常，贴图不显示等问题详解）8-高阶动态纹理（你所不知道的纹理用法，我说你不知道，你肯定不知道）9-漫游轨迹以及其动画路径（怎么绘制贝塞尔曲线，如何使用曲线上的路径，跟随路径移动的原理，相机如何运动，物体如何运动）10-着色器（什么是着色器。初识着色器基础，着色器材质怎么用，怎么使用着色器库）11-常见渲染以及透明度问题12-对象拾取以及拖拽（3d世界里面如何拖拽物体，拖拽的原理，mousemove mouseon等的事件效果）13-世界坐标以及组的问题（什么是相对坐标，什么是世界坐标，什么是当前坐标，怎么转化父子坐标系，组的优化，为什么用组，组的优势）14-指定对象旋转中心（什么是物体的几何体中心，如何改变中心，如何绕轴转动）15-层级对象渲染（多个场景一键切换，切换的优势，针对大项目的用法）16-拓展了解系列（不定期不断更新案例，各种酷炫效果bloom,halo等，以及各种3d图表，粒子案例等,不断构建你的3d实践能力）
three.js中拖拽挣个模型
qq_29820687的博客
03-09 1418
一、使用Object3D实现 在Three.js中拖拽整个模型可以使用Object3D来实现。Object3D是Three.js中的一个基础对象，可以作为容器来包含其他对象，例如模型的网格、灯光、相机等等。 二、进行拖拽 在导入模型之后，你可以将整个模型的网格放置在一个Object3D对象中，然后将该Object3D对象作为拖拽对象。这样，当你拖动该Object3D对象时，整个模型将随之移动。 三、演示 以下是一个示例代码，演示了如何将整个模型放在一个Object3D对象中，并实现拖拽整个模型的功能： //
threejs 实现模型拖拽功能
qq_40994735的博客
11-03 5228
导入相关插件 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实现拖拽生成模型场景
acheng
05-18 1945
THREE.js 可以实现很多web 3D的效果，最近想实现一个拖拽生成场景的功能，主要用到拖拽API,draggable 的几个事件来实现，拖拽模型时记录模型属性，释放到画布时生成当前屏幕坐标对应的焦点上，最后生成模型。// 让地面网格接收阴影。// 场景可拖放，将模型放置在与地面网格相交的位置。// 创建两个球体，一个在地面上方，另一个在地面下方。// 鼠标移动事件，稍后更新交叉点。// 记录被选中的模型和交叉点。// 监听窗口大小变化。
three.js拖拽生成场景简单示例
09-06
在这个示例中，`index.html`会引入`threejs.js`和`OrbitControls.js`这两个JavaScript文件。`threejs.js`是three.js的核心库，提供了3D对象、光照、材质等元素的创建和管理功能；而`OrbitControls.js`是three.js的一...
vue+three.js展示nrrd+vtk3D模型.zip
12-22
vue+three.js展示nrrd+vtk3D模型
three.js模型剖切功能的实现
03-22
多个面剖切（xOy平面、xOz平面、yOz平面），可以随意调节，可以实现将剖切口封装（住），支持鼠标拖拽调节剖切面。 资源来自开源github网站，故不设置积分。 国内浏览github极其慢，经常由于网络原因下载失败，故将...
three.js 智慧城市模型
07-06
Three.js 是一款基于 WebGL 的 JavaScript 库，用于在浏览器中创建三维图形和动画，它在构建智慧城市模型中扮演了核心角色。本文将深入探讨如何利用 three.js 来创建智慧城市的虚拟表示，并介绍与之相关的技术知识点...
Three.js渲染GeoJSON.zip
07-13
在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...
three-dragger:拖动THREE.DragControls这样的three.js对象
04-30
三把匕首 像一样，拖动three.js对象（包括 ），但不修改原始位置。 现场演示可在。安装npm install --save three-dragger CDN版本也可以在unpkg上获得： 用法import ThreeDragger from 'three-dragger' ;const ...
【前端实习生入职】之-threejs实现可拖动立体框
Web_boom的博客
12-23 525
小伙伴们大家好，已经有一段时间没有更新了，这段时间匆匆忙忙来到北京实习，从一个南方的前端在校学生到北方来生活实习，一切都在慢慢适应当中，来公司之前就了解到这家公司是做自动驾驶ai方面的，到公司后果不其然疯狂学习threejs，webGL等3D开发，来第一周主管就给我发布一个任务如下：以下这张图片很好的展示了threejs的系统模块，你可以把知识点模块化加以学习～3～b站教学视频(听了好几个，这个讲的我觉得很通俗易懂)：// 监听窗口大小的变化render();}
threejs实现模型内标注插点/拖曳/模型呼吸灯 功能
weixin_43374521的博客
06-15 2636
threejs实现模型内标注插电/拖曳/模型呼吸灯功能
THREE.JS 使用TransformControls对模型拖拽
qq_44426236的博客
12-21 2086
该类可提供一种类似于在数字内容创建工具（例如Blender）中对模型进行交互的方式，来在3D空间中变换物体。和其他控制器不同的是，变换控制器不倾向于对场景摄像机的变换进行改变。TransformControls 是由 THREE.JS 提供的一类控制器。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值