three.js多模型居中

最新推荐文章于 2024-06-24 17:53:51 发布
最新推荐文章于 2024-06-24 17:53:51 发布
阅读量857 收藏 2
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62421844/article/details/130913382
版权

目录

前言

案例

 加载模型

分析问题

解决思路

最终代码

前言

        我们使用three时候，大多数都是加载外部的模型的，这样可以配合模型编辑软件合作，从而高质量完成项目（three内置的模型就那么点，能展示啥呢？）。有时候我们不经好奇，为什么模型加载之后直接放入到场景中不是在坐标中心而是有自己的位置呢?明明自己没有给mesh设置位置，这是因为建模师在编辑该模型时候并没有在坐标中心制作模型的，所以就会有这种现象。

        所以问题来了，建模师给我们的模型都有自己的位置，而且还不知道有多少，我们不仅需要正确放置他们的相对位置，也要让所有模型整体居中，我们该如何实现呢？

案例

        说理论还不如实操好，这里我就搭建一个环境试验一下，业务需求是这样的：后端传入stl人体器官模型，前端居中加载。（人体器官的位置可就不能乱放了，你也不想肾脏在头顶吧？）

 加载模型

<template>
  <div class="container" ref="container">

  </div>
</template>

<script setup>
import ThreeManager from '@/js/ThreeManager';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import * as THREE from "three";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";

const container = ref()
let threeObj
const fileList = [
  {
    path: "/STL/动脉.stl"
  },
  {
    path: "/STL/病灶.stl"
  },
  {
    path: "/STL/胆囊胆管.stl"
  },
  {
    path: "/STL/肝静脉.stl"
  },
  {
    path: "/STL/肝脏.stl"
  },
  {
    path: "/STL/淋巴结.stl"
  },
  {
    path: "/STL/门静脉.stl"
  },
  {
    path: "/STL/肾脏.stl"
  },
  {
    path: "/STL/下腔静脉.stl"
  }
]
onMounted(() => {
  threeObj = new ThreeManager(container.value)
  for (let i = 0; i < fileList.length; i++) {
    const loader = new STLLoader()
    loader.load(fileList[i].path, function (geometry) {
      console.log(geometry);
      const material = new THREE.MeshPhongMaterial({
        color: "#e5a83d",
        opacity: 1,
        transparent: true,
        visible: true,
        depthTest: true,
      })
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.set(0, 0, 0);
      mesh.rotation.set(-Math.PI / 2, 0, 0);
      threeObj.add(mesh)
      threeObj.add(new THREE.AmbientLight(0x444444))
      // mesh.castShadow = true
      // mesh.receiveShadow = true
      // resolve(mesh)
    })
  }
  // threeObj.add(cube)
})
onBeforeUnmount(() => {
  threeObj.destory()
  threeObj = null
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

 （源码和效果如上）

      mesh.position.set(0, 0, 0);
      mesh.rotation.set(-Math.PI / 2, 0, 0);

        下面两行代码是对所有模型进行一个调整，让我们打开three页面时候，器官是对着我们自己的，上面效果图其实是蓝色轴正对着自己的，我移动了一下，好展示出效果。

threeObj = new ThreeManager(container.value)

        这个ThreeManager类内部只是创建了一个场景，然后把画布渲染到传入构造函数的元素中，并没有什么特别的地方。

分析问题

        基本环境搭建好了，问题就浮现了，模型加载并没有在坐标轴中心，如果客户想进入页面第一眼就可以看到居中的模型怎么办？而且后续不仅仅只有上图那么点模型，以后还会有胸骨，头颅怎么办，怎么动态整合所有模型，然后调整位置到坐标轴上呢？

解决思路

        不知道大家有没有了解过THREE.Object3D类，他是可以将所有模型添加到一个变量上，然后在利用scene的add函数将多个模型整体添加到场景中，而不用像我们这样一个一个添加，况且，我们还可以利用THREE.Object3D()进行模型分组，可以同时管理多个模型（当然我们现在不关注这个），我们可以利用他来计算出所有模型的整体中心点位置，有了中心点，我们就可以动态的将后端返回的任意多个模型放置到坐标轴上了。所以我们先将代码修改如下：

<template>
  <div class="container" ref="container">

  </div>
</template>

<script setup>
import ThreeManager from '@/js/ThreeManager';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import * as THREE from "three";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";

const container = ref()
let threeObj
const fileList = [
  {
    path: "/STL/动脉.stl"
  },
  {
    path: "/STL/病灶.stl"
  },
  {
    path: "/STL/胆囊胆管.stl"
  },
  {
    path: "/STL/肝静脉.stl"
  },
  {
    path: "/STL/肝脏.stl"
  },
  {
    path: "/STL/淋巴结.stl"
  },
  {
    path: "/STL/门静脉.stl"
  },
  {
    path: "/STL/肾脏.stl"
  },
  {
    path: "/STL/下腔静脉.stl"
  }
]
onMounted(async () => {
  threeObj = new ThreeManager(container.value)
  const group = new THREE.Object3D()
  for (let i = 0; i < fileList.length; i++) {
    const loader = new STLLoader()
    const mesh = await new Promise((resolve, reject) => {
      loader.load(fileList[i].path, function (geometry) {
        const material = new THREE.MeshPhongMaterial({
          color: "#e5a83d",
          opacity: 1,
          transparent: true,
          visible: true,
          depthTest: true,
        })
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        mesh.rotation.set(-Math.PI / 2, 0, 0);
        resolve(mesh)
        // group.add(mesh)

        // mesh.castShadow = true
        // mesh.receiveShadow = true
        // resolve(mesh)
      })
    })
    group.add(mesh)
  }
  threeObj.add(group)
  threeObj.add(new THREE.AmbientLight(0x444444))
  // threeObj.add(cube)
})
onBeforeUnmount(() => {
  threeObj.destory()
  threeObj = null
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

    const mesh = await new Promise((resolve, reject) => {
      loader.load(fileList[i].path, function (geometry) {
        const material = new THREE.MeshPhongMaterial({
          color: "#e5a83d",
          opacity: 1,
          transparent: true,
          visible: true,
          depthTest: true,
        })
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        mesh.rotation.set(-Math.PI / 2, 0, 0);
        resolve(mesh)
        // group.add(mesh)

        // mesh.castShadow = true
        // mesh.receiveShadow = true
        // resolve(mesh)
      })
    })

        这里为什么要使用promise呢？是因为这个模型加载是发送网络请求获取模型的，是异步的，所以需要我们用promise装修一下，不然scene可能获取不到模型，加了个空的group上去。

所以效果如下：

        没错问题还是这样，那么我们怎么计算这个group也就是多个模型整体的中心点呢？

最终代码

         我们将代码修改成如下：

<template>
  <div class="container" ref="container">

  </div>
</template>

<script setup>
import ThreeManager from '@/js/ThreeManager';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import * as THREE from "three";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";

const container = ref()
let threeObj
const fileList = [
  {
    path: "/STL/动脉.stl"
  },
  {
    path: "/STL/病灶.stl"
  },
  {
    path: "/STL/胆囊胆管.stl"
  },
  {
    path: "/STL/肝静脉.stl"
  },
  {
    path: "/STL/肝脏.stl"
  },
  {
    path: "/STL/淋巴结.stl"
  },
  {
    path: "/STL/门静脉.stl"
  },
  {
    path: "/STL/肾脏.stl"
  },
  {
    path: "/STL/下腔静脉.stl"
  }
]
onMounted(async () => {
  threeObj = new ThreeManager(container.value)
  const group = new THREE.Object3D()
  for (let i = 0; i < fileList.length; i++) {

    const loader = new STLLoader()
    const mesh = await new Promise((resolve, reject) => {
      loader.load(fileList[i].path, function (geometry) {
        // geometry.computeBoundingBox()
        const material = new THREE.MeshPhongMaterial({
          color: "#e5a83d",
          opacity: 1,
          transparent: true,
          visible: true,
          depthTest: true,
        })
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        mesh.rotation.set(-Math.PI / 2, 0, 0);
        resolve(mesh)
        // group.add(mesh)

        // mesh.castShadow = true
        // mesh.receiveShadow = true
        // resolve(mesh)
      })
    })
    group.add(mesh)

  }
  var box = new THREE.Box3();
  const groupBox = box.expandByObject(group)
  // 通过传入的object3D对象来返回当前模型的最小大小，值可以使一个mesh也可以使group
  const centerX = (groupBox.max.x + groupBox.min.x) / 2
  const centerY = (groupBox.max.y + groupBox.min.y) / 2
  const centerZ = (groupBox.max.z + groupBox.min.z) / 2
  group.position.set(-centerX, -centerY, -centerZ)
  threeObj.add(group)
  threeObj.add(new THREE.AmbientLight(0x444444))
  // threeObj.add(cube)
})
onBeforeUnmount(() => {
  threeObj.destory()
  threeObj = null
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

 模型居中了，所以我们干了啥？...

  var box = new THREE.Box3();
  const groupBox = box.expandByObject(group)

上面的代码利用box3类，的expandByObject方法，可以计算出多模型整体group的边界向量，什么意思呢？

我们先打印一下这个groupBox是什么：

         这个max就是模型整体离坐标轴中心最远的点的向量，min就是模型整体离坐标轴中心最近的点的向量（我还是先解释一下变量是啥吧，我也是最近才知道的，读者学过但是可能忘了）

        

 图片如上（有些粗糙见谅...）

        这张图相当于scene场景中有一个棍子模型(AB)，我们想让这根棍子中心点移动到坐标轴原点上，根据上面的groupBox可知我们相当于已经知道了A点(最近)B点(最远)的两个向量0A,0B，而我们如果计算出中心点的向量是不是相当于知道了，而模型的中心点向量等于(0A-0B)/2。在项目中相当于:

  const centerX = (groupBox.max.x + groupBox.min.x) / 2
  const centerY = (groupBox.max.y + groupBox.min.y) / 2
  const centerZ = (groupBox.max.z + groupBox.min.z) / 2

然后在移动模型group:

group.position.set(-centerX, -centerY, -centerZ)

完美收工... 

m0_62421844
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【赏】three.js如何确定3dtile格式的模型的中心点和缩放比例
走向CTO的路上...
05-31 2054
综上所述，通过以上步骤可以确定3D模型的中心点和缩放比例，并设置相机的位置和朝向，以便在屏幕上正确显示模型。对于3dtile格式的模型，可以使用Tileset3DLoader加载器加载，然后按照上述方法计算模型的中心点和缩放比例，设置相机位置等。其中，camera是three.js的摄像机对象，cameraDistanceFactor是相机距离模型的距离因子，可以根据实际需求进行设置，cameraDirection是相机的朝向向量，可以根据实际需求进行设置。其中，model是加载的3D模型对象。
three.js加载json三维模型.zip
11-14
在三维Web开发领域，Three.js是一个非常流行的JavaScript库，它为浏览器提供了强大的3D图形渲染功能。本主题将深入探讨如何使用Three.js加载JSON格式的三维模型，以及与BIM（建筑信息模型）相关的应用。 一、Three....
threejs 模型居中显示方法
Ttowx的博客
04-14 2764
介绍了threejs模型居中的两种显示方法
Three.js不同模型在不同轨道上的动画和移动
Mr_Bobcp的博客
03-26 3464
Three.js不同模型在不同轨道上的动画和移动
vue+three.js渲染3D模型
最新发布
Play_Sai的博客
06-24 549
【代码】vue+three.js渲染3D模型。
Threejs 多个模型对象自动居中显示
qq_27080351的博客
06-12 413
【代码】Threejs 多个模型对象自动居中显示
THREEJS - 模型居中
Kreme的博客
03-02 4833
在使用THREEJS的过程中，我们常常会遇到关于模型的处理，有时候建模的同事会帮我们将模型归零后给我们，有时候是没有归零的，但这时候需要将模型在场景中居中展示。 这里采用的办法是包围盒的方式，具体代码如下： // 将模型的中心点设置到canvas坐标系的中心点，保证模型显示是居中的，object就是操作的目标模型 let box = new THREE.Box3().setFromObject(object); // 获取模型的包围盒 let mdlen = box.max.x - box.min.x
threejs加载模型,实现模型自适应大小
weixin_58737883的博客
04-14 4863
获取最大的尺寸值，也就是模型在三个轴向上的最大值。然后，我们通过除以这个值来计算出每个轴需要缩放的比例。最后，我们将每个轴上的缩放比例应用到模型的。请注意，计算出的比例可能需要根据实际需要进行微调。另外，如果在场景中同时展示了多个模型，需要对每个模型都进行以上的操作。，并获取模型的边界盒。接下来，计算得到获取边界盒的尺寸，然后使用。4.计算出最大的尺寸值，即在三个轴向上的最大值。6.将每一个轴的缩放比例应用到模型的。5.计算出每一个轴需要缩放的比例。方法将其设置为模型的边界盒。加载模型，并获取模型的。
three.js引入obj模型，将位置设置为（0,0,0），但场景显示不是（0,0,0）的位置
m0_54070657的博客
01-12 921
我在网上下载了一个obj格式的模型，加载模型的时候，发现我的模型不在坐标原点，于是我就把模型位置设置为（0,0,0），但还是不行，我在控制台打印出模型信息，位置信息也为（0,0,0），但模型本身并不在原点。另外一种方法，就是将模型导入blender或其他建模软件，选中模型，鼠标右键，选择将模型的原点改为模型的自身，然后导出。（这个模型我在网上下载的，准备弄个2024粒子合成动画，模型缺失几块，请忽略)兜兜转转，于是我查看了模型的包围盒，查看包围盒的中点。
three.js加载gltf模型
09-17
在本文中，我们将深入探讨如何使用three.js库加载GLTF（GL Transmission Format）模型，并结合Vue.js框架构建一个完整的Web应用程序。GLTF是一种开放标准的3D资产交换格式，广泛用于WebGL和WebVR场景，因为它能高效...
three.js 智慧城市模型
07-06
Three.js 是一款基于 WebGL 的 JavaScript 库，用于在浏览器中创建三维图形和动画，它在构建智慧城市模型中扮演了核心角色。本文将深入探讨如何利用 three.js 来创建智慧城市的虚拟表示，并介绍与之相关的技术知识点...
使用three.js 的 交互式 3D 心脏模型
07-14
在本项目中，我们将深入探讨如何使用流行的JavaScript库three.js创建一个交互式的3D心脏模型。three.js是一个强大的WebGL库，它使得在浏览器中构建3D图形变得简单易行。通过结合HTML5 Canvas、SVG和WebGL，three.js...
三维模型-three.js-PCD模型文件，用于three.js显示pcd文件
07-25
在三维可视化领域，Three.js是一个非常流行的JavaScript库，它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在...
Three.js系列：坐标信息
betty_grant的博客
12-25 5137
1. 层级结构 Three.js描述的场景Sence，是一个以Sence为根节点的层级结构，如下图所示。其中Group不是必须的，并且可嵌套的。 2. 坐标差异 2.1.概念 世界坐标和本地坐标 根据参照物的不同，Three.js将坐标分为世界坐标和本地坐标。即世界坐标是以Sence为参照进行描述的坐标信息，本地坐标是以父层级为参照进行描述的坐标信息。 一般，不明确指明是世界坐标，大多说的是本地坐标信息。 屏幕坐标和世界坐标 在屏幕上，对于用户的操作我们能获取的只能是屏幕坐标。在处理其与
46 Three.js使用THREE.ExtrudeGeometry拉伸SVG为三维图形
现在学习也不晚
12-20 5770
简介 SVG是可缩放矢量图（Scalable Vector Graphics）。它基于XML的标准，用来在网页上创建二维矢量图。该标准是一个所有现代浏览器都支持的开房标准。我们可以使用Three.js的THREE.ExtrudeGeometry来将SVG格式的图形转换成三维图形。 实现方式 首先，将库文件引入到页面当中 &lt;script src="https://johns...
Three.js加载模型自动居中
qq_39503511的博客
12-08 6065
Three.js加载模型自动居中Three.js加载模型自动居中概述解决方案 Three.js加载模型自动居中 概述 有时会出现这样得场景，在加载模型成功后，在场景中很难找到模型具体加载到了哪个位置，我们在打印出模型后可以看到模型得定位是(0,0,0)，但加载的模型并不是在(0, 0, 0)位置，这是由于建模师在处理模型的时候就不是在(0, 0, 0)处进行建模的。 解决方案 此处有两种解决方案 建模师处理模型，将模型的位置移动到（0， 0， 0）处即可 使用代码进行模型强制居中处理 /** * 设置
Three.js的gltf模型自动居中
Fantasywt的博客
11-23 547
toSceneCenter 方法是自定义的一个让模型居中的方法，通过# Box3获取到模型的包围盒，获取到模型的中心点坐标信息，再取反，就会得到模型中心点在3d世界的位置信息。在使用第三方模型的时候，总有一些不尽人意的地方，比如模型加载后，模型中心并不在3d世界的中心位置，所以就需要调整一下模型整体的位置。
Threejs导入object模型，原点调整到模型中心点
qq_31107521的博客
05-12 1591
threejs导入模型中心点
three.js 模型 居中
w710537643的博客
12-27 850
【代码】three.js 模型 居中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值