Three.js 实战【3】—— 城市模型渲染

于 2024-09-13 14:59:13 发布
阅读量229 收藏 6
点赞数 10
分类专栏： # Three.js 文章标签： vue3 three glbf 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44973159/article/details/142208937
版权

Three.js 实战【3】—— 城市模型渲染

初始化场景

初始化场景这一块就跳过了，可以参考上一篇文章：Three.js 实战【2】—— 船模型海上场景渲染，效果是一样的。

加载模型

这里我们找一个城市的模型下来，可以上这个网站下载个模型，这里以上海市模型下载地址为例。

先加载我们下载的模型到场景当中。

const addCity = () => {
  const gltfLoader = new GLTFLoader();
  gltfLoader.load('./src/assets/glb/shanghai_city.glb', (gltf: any) => {
    model = gltf.scene.children[0];
    scene.add(model);
  });
};

在加载了第三方的模型发现模型并没有和坐标系的（0,0,0）保持重合，反而有偏移，这个时候我们可以利用Box3去拿到模型的包围盒，获取到模型的中心点坐标信息，再取反，就会得到模型中心点在3d世界的位置信息。（在上面scene.add(model)）前调用这个toCenter方法进行居中。

  • Box3：表示三维空间中的一个轴对齐包围盒
  • expandByObject(model)：扩展此包围盒的边界，使得对象及其子对象在包围盒内，包括对象和子对象的世界坐标的变换。
  • Vector3：三维向量表示的是一个有顺序的、三个为一组的数字组合（x，y，z）
  • negate：向量取反，即： x = -x, y = -y , z = -z。
const toCenter = () => {
  const box = new THREE.Box3();
  box.expandByObject(model);
  console.log('box =====', box);
  const size = new THREE.Vector3();
  const center = new THREE.Vector3();
  console.log('size,center =====', size, center);
  // 获取包围盒的中心点和尺寸
  box.getCenter(center);
  box.getSize(size);
  // 将Y轴置为0
  model.position.copy(center.negate().setY(0));
};

添加材质

这里先抽离个创建材质的方法出来，这里就简单创建一个颜色的材质。

const colorMaterial = (color: string) => {
  return new THREE.MeshPhongMaterial({
    color
  });
};

在前面加载的model模型部分，可以通过traverse方法去拿到模型里面所有的对象，可以这么理解。然后这里面的item.name和导入的模型是有关系的，可以打印出来看一下模型里面的name都是一些什么，再去进行匹配添加材质。

const addCity = () => {
  const gltfLoader = new GLTFLoader();
  gltfLoader.load('./src/assets/glb/shanghai_city.glb', (gltf: any) => {
    model = gltf.scene.children[0];
    toCenter();
    model.traverse((item: { name: string, material: any }) => {
      console.log(' =====', item.name);
      if (item.name.includes('dongfangmingzhu')) {
        item.material = colorMaterial('#f40');
      } else if (item.name.includes('shanghaizhongxin')) {
        item.material = colorMaterial('#aa21ee');
      } else if (item.name.includes('huanqiujinrongzhongxin')) {
        item.material = colorMaterial('#008000');
      } else if (item.name.includes('jinmaodasha')) {
        item.material = colorMaterial('#0000ff');
      } else if (item.name.includes('Floor')) {
        item.material = colorMaterial('#ffffff');
      } else if (item.name.includes('city')) {
        item.material = colorMaterial('#867e76');
      }
    });
    scene.add(model);
  });
};

效果：

在这里插入图片描述

纹理

创建一个纹理：

  • wrapS：这个值定义了纹理贴图在水平方向上将如何包裹
  • wrapT：这个值定义了纹理贴图在垂直方向上将如何包裹
  • .repeat：决定纹理在表面的重复次数，两个方向分别表示U和V
const ImageLoader = new THREE.ImageLoader();
let texture: { needsUpdate: boolean; };
ImageLoader.load(TextureImage, function (img: any) {
  texture = new THREE.Texture(img, {
    wraps: THREE.RepeatWrapping,
    repeat: new THREE.Vector2(10, 10),
    wrapT: THREE.RepeatWrapping
  });
  texture.needsUpdate = true;
});

将纹理添加到材质上，那么这个时候改一下前面那个创建材质的方法

  • map：纹理贴图
  • alphaMap：一张灰度纹理，用于控制整个表面的不透明度
  • aoMapIntensity：环境遮挡效果的强度。默认值为1。零是不遮挡效果
  • bumpMap：用于创建凹凸贴图的纹理
  • bumpScale：凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1
const colorMaterial = (color: string, texture: any) => {
  let options = {};
  if (texture) {
    options = {
      map: texture,
      alphaMap: texture,
      aoMapIntensity: 0,
      bumpMap: texture,
      bumpScale: 0
    };
  } else {
    options = {
      color,
      shininess: 100,
      flatShading: true
    };
  }
  return new THREE.MeshPhongMaterial(options);
};

效果示意：

在这里插入图片描述

视角限制

这个在上一个船的就解释过了，直接复制过来使用就好了，去掉了最大最小距离的配置（minDistance、maxDistance）

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI * 0.45;
// controls.minDistance = 5.0;
// controls.maxDistance = 15.0;
controls.update();

完整代码

<!-- 组件 -->
<script lang="ts" setup>
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import TextureImage from '@/assets/image/4.jpg';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 2000);
camera.position.set(2, 2, 2);
scene.add(camera);

// 环境光
const ambientLight = new THREE.AmbientLight('white', 0.5);
ambientLight.position.set(1, 1, 1);
scene.add(ambientLight);

const light = new THREE.DirectionalLight('#fff', 1);
light.position.set(1, 10, 1);
camera.add(light);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const axesHelper = new THREE.AxesHelper(1);
scene.add(axesHelper);

// 加载模型
let model: {
  scale: { set: (arg0: number, arg1: number, arg2: number) => void; };
  rotation: { z: number; };
  position: { z: number; };
  material: any;
};

const addCity = () => {
  const gltfLoader = new GLTFLoader();
  gltfLoader.load('./src/assets/glb/shanghai_city.glb', (gltf: any) => {
    model = gltf.scene.children[0];
    toCenter();
    model.traverse((item: { name: string, material: any }) => {
      console.log(' =====', item.name);
      if (item.name.includes('dongfangmingzhu')) {
        item.material = colorMaterial('#f40', null);
      } else if (item.name.includes('shanghaizhongxin')) {
        item.material = colorMaterial('#d90000', null);
      } else if (item.name.includes('huanqiujinrongzhongxin')) {
        item.material = colorMaterial('#008000', null);
      } else if (item.name.includes('jinmaodasha')) {
        item.material = colorMaterial('#0000ff', null);
      } else if (item.name.includes('Floor')) {
        item.material = colorMaterial('#ffffff', texture);
      } else if (item.name.includes('city')) {
        item.material = colorMaterial('#ffffff', texture);
      }
    });
    scene.add(model);
  });
};

const toCenter = () => {
  const box = new THREE.Box3();
  box.expandByObject(model);
  console.log('box =====', box);
  const size = new THREE.Vector3();
  const center = new THREE.Vector3();
  console.log('size,center =====', size, center);
  // 获取包围盒的中心点和尺寸
  box.getCenter(center);
  box.getSize(size);
  // 将Y轴置为0
  model.position.copy(center.negate().setY(0));
};


// 图片加载器
const ImageLoader = new THREE.ImageLoader();
let texture: { needsUpdate: boolean; };
ImageLoader.load(TextureImage, function (img: any) {
  texture = new THREE.Texture(img, {
    wraps: THREE.RepeatWrapping,
    repeat: new THREE.Vector2(10, 10),
    wrapT: THREE.RepeatWrapping
  });
  texture.needsUpdate = true;
});

const colorMaterial = (color: string, texture: any) => {
  let options = {};
  if (texture) {
    options = {
      map: texture,
      alphaMap: texture,
      aoMapIntensity: 0,
      bumpMap: texture,
      bumpScale: 0
    };
  } else {
    options = {
      color,
      shininess: 100,
      flatShading: true
    };
  }
  return new THREE.MeshPhongMaterial(options);
};


// 渲染
const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};

onMounted(() => {
  document.getElementById('home')?.appendChild(renderer.domElement);
  addCity();

  render();
});
</script>

<template>
  <div id="home" class="w-full h-full"></div>
</template>
Modify_QmQ
关注
专栏目录
基于 WEBGL和Three.js 的3D 工业物联网可视化应用
yikeson的博客
10-22 4854
一、WEBGL和Three.js的发展 国际信息技术和移动端迅猛发展，Webgl+Three.js技术得到了进一步的发展，而3D工厂厂房在数字化的今天，Webgl+Three.js已经被越来越多的公司和企业应用在虚拟工厂系统，三维数字工厂模型中，加快了工厂厂房，园区3D化中的设备，传感器、管道罐体输送、监测控制等各个环节的效率。 二、WEBGL与Three.js的背景 随着浏览器的原生能力的兴起，flash的没落。WebGL在3D方面从功能与性能方面都在逐渐加强。科技发展对应2D全面3D化应用的需求也
Three.js可视化系统课程WebGL（24年3月最新版48章）
wudawei071193的博客
08-21 277
Three.js可视化系统课程WebGL，免费领取
Three.js 实战【2】—— 船模型海上场景渲染
共勉
07-17 996
在这篇文章中，我们将探索如何将Vue 3和Three.js的强大功能结合起来，创造出令人惊叹的三维视觉效果。文章详细介绍了如何使用Vue 3框架和Three.js库来渲染一个精细的船模型到网页上。通过一系列创新的技术手段，我们不仅为船模型添加了逼真的纹理，还模拟出了波光粼粼的水面效果。这一过程不仅展示了Vue 3在前端开发中的灵活性，还彰显了Three.js在处理三维图形方面的强大能力。文章的目标是为开发者提供一种新颖、高效的方式来增强网页的交互性和视觉吸引力。
Three.js——创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化
HuoZhiyan 的博客
03-31 1051
本文我们初步认识 three.js，并学习如何创建场景、渲染三维对象、添加灯光、添加阴影及添加雾化等...
Three.js——粒子效果、粒子水波、粒子组成立方体
HuoZhiyan 的博客
06-08 1966
本篇文章介绍粒子相关内容，包括粒子效果、粒子水波和粒子组成立方体...
vue3+threejs可视化项目——引入threejs加载钢铁侠模型（第二步）
热门推荐
编程知识分享，主打前端
01-16 3万+
大家好，我是yma16，本文分享 vue3+threejs可视化项目——引入threejs加载模型（第二步）。背景搭建一个模型可视化平台，可以对3d模型进行旋转、缩放、拖拽的基础操作。threejs框架Three.js是一个用于在Web浏览器上创建和显示3D图形的JavaScript库。它使用WebGL作为其底层渲染器，提供了一套简单易用的API，使开发者能够使用JavaScript创建复杂的3D场景和动画效果。
Three.js实战常用技巧课程
03-31
课程分享——Three.js实战常用技巧，完整版视频课程下载。 课程概述 一、适合有一定的three.js基础学员学习。 二、每节课都有对应的案例源码(有注释) 三、本课程主要针对three.js实际开发中常用的一些技巧进行讲解...
three.js-r133.zip
06-16
这个名为"three.js-r133.zip"的压缩包，正是Three.js库的一个特定版本——r133。本文将全面解析这个版本中的关键特性，帮助读者深入理解Three.js的精髓，并从中发掘出无限的3D创作潜力。 一、Three.js概述 Three....
Learning Three.js The JavaScript 3D Library for WebGL, Second Edition
08-04
### 《学习Three.js——用于WebGL的JavaScript 3D库》第二版 #### 一、书籍概述 《学习Three.js——用于WebGL的JavaScript 3D库》第二版是一本深入探讨如何利用Three.js这一强大的JavaScript库创建引人入胜的三维...
3D云渲染农场为何怎么贵？主要消耗成本介绍
Renderbus瑞云渲染的博客
09-12 343
例如，Renderbus瑞云渲染配备了高性能的SSD存储，并且支持Windows、Mac和Linux的多操作系统，保证了令人印象深刻的99.99%的运行时间。渲染农场中的每台机器都必须安装并授权必要的软件以执行云渲染任务。需要不断监控、故障排除和用户协助，这会产生显著的劳动力成本，这些成本通常反映在渲染农场服务的定价中。然而，用户经常想知道为什么渲染农场的价格如此之高，理解背后的原因可以帮助艺术家做出更好的选择。渲染农场的高成本可以归因于从昂贵的硬件和维护费用到软件许可费用和劳动力成本的各种因素。
python绘制3D瀑布图
qq_40292148的博客
09-10 1427
【代码】python绘制3D瀑布图。
已开源！无限场景生成和高效数据迁移：3D金字塔扩散模型斩获ECCV24 Oral
最新发布
soaring_casia的专栏
09-12 969
扩散模型在生成二维图像和小尺度三维物体方面表现出了显著的效果。然而，它们在合成大规模三维场景中的应用却很少被探索。这主要是因为三维场景数据（尤其是户外场景）固有的复杂性和庞大的规模，以及综合真实世界数据集的有限性，使得训练一个稳定的场景扩散模型是比较困难的。在本工作中，作者探索了如何使用由粗到细的范式有效地生成大规模三维场景，他引入了一个框架，即金字塔离散扩散模型（PDD），该模型采用尺度变化的扩散模型来逐步生成高质量的户外场景。
python画图|3D垂线标记
weixin_44855046的博客
09-12 1018
本文学习了3D垂线标记图的画法，并对垂线密度、类型和起始圆圈、标记类型进行了修改，此外显示了各坐标轴的标签。
3D Gaussian Splatting 论文学习
dragonylee的博客
09-10 784
将场景中的物体投影到渲染平面：传统的渲染管线就是这种方式，主要针对Mesh数据，可以将顶点直接投影成2D的形式，配合光栅化、深度测试、Alpha混合等就可以得到渲染的图像。从相机到像素发出一条射线与场景物体交互去计算沿着射线的颜色积分：例如光线追踪，去计算光线和Mesh的光学行为（反射等）来得到像素的颜色值；或是体渲染，对于体数据或是隐式的场景表达（NeRF）通过采样的方式来计算一个光线上的离散的积分，得到最终的颜色。
利用 Zero-1-2-3 进行多视图 3D 重建：从单图像到多视图 3D 模型的生成
qq_36224726的博客
09-10 603
Zero-1-2-3是一个通过扩散模型（Diffusion Models）将单张 2D 图像转换为 3D 网格模型的项目。与传统的 3D 重建技术不同，Zero-1-2-3 采用了一个基于图像生成的多阶段流程，利用不同视角的多张图片推理，生成高精度的 3D 模型。Zero-1-2-3 模型：基于预训练的扩散模型，生成目标图像的多视角图像。：用于处理图像中的前景和背景。多视角生成：从单张输入图像开始，通过多阶段生成多个视角下的图片，再进行 3D 重建。Zero-1-2-3。
数字孪生之-3D可视化
牛牪犇
09-12 1023
数字孪生之-3D可视化大屏
博物馆如何实现3D交互控制展示?
weixin_50515446的博客
09-11 462
使用3D建模软件如3ds Max或Blender制作好模型，或者委托专业模型师制作，然后把制作好的模型导出为3D通用格式文件即可，比如FBX、DAE、OBJ、GLTF、GLB等等。博维数孪平台的这些特性使得创建3D博物馆交互展示变得简单快捷，即使是非技术人员也能轻松上手。通过这些步骤，可以为观众提供一个全方位、多角度、沉浸式的3D博物馆体验。完成配置后保存项目，可以发布并分享你的3D交互展示，博维数孪提供链接和HTML代码以便嵌入到网站或小程序。可以创建数字孪生、3D产品配置器、3D展示页等多种3D应用。
kitti数据label的2d与3d坐标转为像素坐标方法与教程(代码实现)
weixin_38252409的博客
09-09 816
kitti数据是一个通用数据，但里面标定文件或标签文件等相互关心很有可能把大家陷入其中。为此，本文分享kitti数据的label标签内容转换，特别是标签的3d坐标转换到图像像素坐标，这也是本文重点介绍内容。而本文与其它文章不太相同，我们不注重kitti原理介绍，而是使用代码将其转换，并给出完整代码。先给出调用的主函数，然后在分别讲解，直接看代码如下： 2、数据格式示意图 因为要将其2d与3d坐标展现到图像中，需要获取图像数据，其代码如下： 2、label标签数据获取 读取标签txt文件内容，将其每个目标内容
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Modify_QmQ

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

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

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

打赏作者

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

抵扣说明：

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

余额充值