Three加载3D模型贴图

准备阶段

  1. 3D模型
  2. three 库文件
  3. 纹理图片

相关资料

效果图

核心代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>房屋平面室内图</title>

	</head>

	<body>

	</body>

	<script type="importmap">

		{

		"imports": {

			"three":"/js/three.module.js",

			"three/addons/": "/examples/jsm/"

			}

		}

	</script>

	<script type="module">

		import GUI from 'https://cdn.jsdelivr.net/npm/lil-gui@0.18/+esm';

		import * as THREE from 'three';

		// 加载 gltf 模型

		import {

			GLTFLoader

		} from 'three/addons/loaders/GLTFLoader.js';

		// 加载 obj 模型

		import {

			OBJLoader

		} from 'three/addons/loaders/OBJLoader.js';

		// 轨道控制器

		import {

			OrbitControls

		} from 'three/addons/controls/OrbitControls.js';

		// 创建场景

		const scene = new THREE.Scene();

		// 创建透视相机

		const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)

		camera.position.set(0, 20, 200)

		camera.scale.x = 1

		camera.scale.y = 1

		camera.scale.z = 1

		// camera.zoom=0.5

		// 更新相机

		camera.updateProjectionMatrix()

		// 创建渲染器，透明背景

		const renderer = new THREE.WebGLRenderer({

			alpha: true

		});

		// 场景灯光

		const directionalLight = new THREE.DirectionalLight()

		directionalLight.penumbra = 0.4

		directionalLight.position.set(10, 14, 5)

		directionalLight.distance = 0

		directionalLight.castShadow = true

		directionalLight.intensity = 1

		directionalLight.shadow.camera.near = 1

		directionalLight.shadow.camera.far = 25

		directionalLight.shadow.camera.right = 10

		directionalLight.shadow.camera.left = -10

		directionalLight.shadow.camera.top = 10

		directionalLight.shadow.camera.bottom = -10

		directionalLight.shadow.mapSize.width = 2048

		directionalLight.shadow.mapSize.height = 2048

		directionalLight.shadow.bias = -0.01

		scene.add(directionalLight);

		// 纹理可以加载。TextureLoader

		const textureLoader = new THREE.TextureLoader();

		textureLoader.load('/assets/wood/floor-parquet-pattern-172292.jpg', (loaded) => {

			loaded.encoding = THREE.sRGBEncoding

			scene.background = loaded

			scene.environment = null

		})

		renderer.setSize(window.innerWidth, window.innerHeight);

		document.body.appendChild(renderer.domElement);

		const gui = new GUI();

		const obj = {

			left: '/model/textures/12.jpg',

			right: '/model/textures/12.jpg',

			bottom: '/model/textures/9.jpg',

			back: '/model/textures/13.jpg',

			bed: '/model/textures/5.jpg',

			table: '/model/textures/1.jpg',

		}

		const mm = {

			'material1': '/model/textures/1.jpg',

			'material2': '/model/textures/2.png',

			'material3': '/model/textures/3.jpg',

			'material4': '/model/textures/4.png',

			'material5': '/model/textures/5.jpg',

			'material6': '/model/textures/6.jpg',

			'material7': '/model/textures/7.jpg',

			'material8': '/model/textures/8.jpg',

			'material9': '/model/textures/9.jpg',

			'material10': '/model/textures/10.jpg',

			'material11': '/model/textures/11.jpg',

			'material12': '/model/textures/12.jpg',

			'material13': '/model/textures/13.jpg',

			'material14': '/model/textures/14.jpg',

		}

		const folder = gui.addFolder( 'textures' );

		folder.add(obj, 'left', mm)

		folder.add(obj, 'right', mm)

		folder.add(obj, 'bottom', mm)

		folder.add(obj, 'back', mm)

		folder.add(obj, 'bed', mm)

		folder.add(obj, 'table', mm)

		folder.onChange(event => {

			console.log(event)

			const key = event.property;

			const value = event.value;

			const mesh = scene.getObjectByName(key);

			if (mesh) {

				const material = new THREE.MeshBasicMaterial({

					map: textureLoader.load(value)

				});

				mesh.material = material;

				mesh.castShadow=true;

			}

		});

		const backgroundColor = gui.addFolder( 'scene' );

		backgroundColor.add({'backGround':'White'},'backGround', ['White', 'Black', 'Null', 'Color', 'Texture','自定义纹理', 'Cubemap'])

			.onChange((event) => handleBackgroundChange(event, scene))

		const handleBackgroundChange = (setting, scene) => {

			switch (setting) {

				case 'White':

					scene.background = new THREE.Color(0xffffff)

					break

				case 'Black':

					scene.background = new THREE.Color(0x000000)

					break

				case 'Null':

					scene.background = null

					break

				case 'Color':

					scene.background = new THREE.Color(0x44ff44)

					break

				case 'Texture':

					textureLoader.load('/assets/wood/abstract-antique-backdrop-164005.jpg', (loaded) => {

						loaded.encoding = THREE.sRGBEncoding

						scene.background = loaded

						scene.environment = null

					})

					break

				case '自定义纹理':

					textureLoader.load('/assets/wood/floor-parquet-pattern-172292.jpg', (loaded) => {

						loaded.encoding = THREE.sRGBEncoding

						scene.background = loaded

						scene.environment = null

					})

					break

				case 'Cubemap':

					textureLoader.load('/assets/equi.jpeg', (loaded) => {

						loaded.mapping = THREE.EquirectangularReflectionMapping

						scene.background = loaded

						scene.environment = loaded

					})

					break

				default:

					break

			}

		}

		const loader = new GLTFLoader();

		// 滑轨控制

		const controller = new OrbitControls(camera, renderer.domElement)

		controller.enableDamping = true

		controller.dampingFactor = 0.05

		controller.minDistance = 1

		controller.maxDistance = 100

		controller.minPolarAngle = 0

		controller.maxPolarAngle = Math.PI

		loader.load(

			'/model/plan_room.gltf',

			function(gltf) {

				gltf.scene.traverse(function(child) {

					if (child instanceof THREE.Mesh) {

						// 加载模型时，添加对于的纹理贴图

						for (let key in obj) {

							if (child.name === key) {

								const material = new THREE.MeshBasicMaterial({

									map: textureLoader.load(obj[key])

								});

								child.material = material;

								continue;

							}

						}

					}

				})

				gltf.scene.scale.x = 0.5

				gltf.scene.scale.y = 0.5

				gltf.scene.scale.z = 0.5

				scene.add(gltf.scene);

			},

			function(xhr) {

				console.log((xhr.loaded / xhr.total * 100) + '% loaded');

			},

			function(error) {

				console.error(error);

			}

		);

		function animate() {

			requestAnimationFrame(animate);

			controller.update();

			renderer.render(scene, camera);

		}

		animate();

	</script>

</html>

源码传送

下载:https://864000.lanzouy.com/ipX7D0woxeqf 密码:3bi0

根目录执行http-server -p9001 浏览器访问 http://127.0.0.1:9001

C:\Users\mac\OneDrive\three-1>http-server -p9001

Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:

CORS: disabled

Cache: 3600 seconds

Connection Timeout: 120 seconds

Directory Listings: visible

AutoIndex: visible

Serve GZIP Files: false

Serve Brotli Files: false

Default File Extension: none

Available on:

  http://192.168.31.156:9001

  http://127.0.0.1:9001

Three加载3D模型贴图的更多相关文章

  1. 使用 Assimp 库加载 3D 模型

    前言 要想让自己的 3D 之旅多一点乐趣,肯定得想办法找一些有意思一点的 3D 模型.3D 模型有各种各样的格式,obj的,stl的,fbx的等等不一而足.特别是 obj 格式的 3D 模型,完全是纯 ...

  2. cesium加载gltf模型点击以及列表点击定位弹窗

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之 ...

  3. WPF动态加载3D 放大-旋转-平移

    原文:WPF动态加载3D 放大-旋转-平移 WavefrontObjLoader.cs 第二步:ModelVisual3DWithName.cs public class ModelVisual3DW ...

  4. 6_1 持久化模型与再次加载_探讨(1)_三种持久化模型加载方式以及import_meta_graph方式加载持久化模型会存在的变量管理命名混淆的问题

    笔者提交到gitHub上的问题描述地址是:https://github.com/tensorflow/tensorflow/issues/20140 三种持久化模型加载方式的一个小结论 加载持久化模型 ...

  5. xBIM 实战01 在浏览器中加载IFC模型文件

    系列目录    [已更新最新开发文章,点击查看详细]  一.创建Web项目 打开VS,新建Web项目,选择 .NET Framework 4.5  选择一个空的项目 新建完成后,项目结构如下: 二.添 ...

  6. OpenGL（二十二） gluBuild2DMipmaps 加载Mip纹理贴图

    当纹理被用于渲染一个面积比它本身小很多的对象时,会由于纹理图像的降采样率不足而导致混叠现象,主要的表现特征是纹理图像的闪烁,出现纹理躁动.特别是在场景远近移动变换时,这种闪烁情况更为明显,严重可能会影 ...

  7. WPF绘制深度不同颜色的3D模型填充图和线框图

    原文:WPF绘制深度不同颜色的3D模型填充图和线框图 在机械测量过程中,测量的数据需要进行软件处理.通常测量一个零件之后,需要重建零件的3D模型,便于观察测量结果是否与所测工件一致. 重建的3D模型需 ...

  8. cesium加载gltf模型

    cesium加载gltf模型 一.采用vue-cesium:在项目里加载依赖包.命令如下: npm i --save vue-cesium 在main.js中加入如下代码: https://www.n ...

  9. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  10. 使用 Babylon.js 在 HTML 页面加载 3D 对象

    五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 W ...

随机推荐

  1. 本周四晚19：00知识赋能第八期第1课丨ArkUI框架整体设计

    OpenAtom OpenHarmony(以下简称"OpenHarmony")开源开发者成长计划项目自 2021 年 10 月 24 日上线以来已经走过了7期,为开发者提供了一个良 ...

  2. [HAOI2007,P2216,BZOJ1047]理想的正方形单调队列解法

    题目描述 有一个 \(a \times b\) 的整数组成的矩阵,现请你从中找出一个 \(n \times n\) 的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入格式 第一行为 \( ...

  3. Windows wsl2支持systemd

    背景 很多Linux发行版都是使用systemd来管理程序进程,但是在WSL中默认是用init来管理进程的. 为了符合长久的使用习惯,且省去不必要的学习成本,就在WSL的发行版(我这里安装的是Ubun ...

  4. Qt：Qt自适应高分辨率屏幕

    现在的电脑分辨率越来越高,DPI也越来越大,使用Qt创建出来的界面,在小分辨率电脑上显示的很好,但是在大分辨率电脑上显示异常,感觉边框被压缩了,看起来很不协调. 从Qt 5.6 还是从Qt 5.14 ...

  5. 一个很好用的ORM库--peewee

    发现一个很好用的 ORM 库 -- peewee 以下为简单示例 from peewee import * db = SqliteDatabase('test.db') # 定义表结构 class P ...

  6. openGauss数据库扩容指导

    前置条件 当前集群状态正常 操作步骤 1.新节点创建用户和用户组,注意需要与当前集群的用户与用户组一致,密码也要保持一致.假设当前集群用户为 omm. 2.检查新节点环境变量,清理和 openGaus ...

  7. 3.1版本【HarmonyOS 第一课】正式上线！参与学习赢官方好礼>>

      [课程介绍] <HarmonyOS第一课>是跟随版本迭代不断推出的系列化课程,本期课程基于HarmonyOS 3.1版本的新技术和特性,每个课程单元里面都包含视频.Codelab.文章 ...

  8. HTML基础之input系列

    <form action=""> <div> 用户名:<input type="text" name="user&quo ...

  9. 精通中间件测试：Asp.Net Core实战指南，提升应用稳定性和可靠性

    引言 在上一章节我们实战了在Asp.Net Core中的项目实战,这一章节讲解一下如何测试Asp.Net Core的中间件. TestServer 还记得我们在集成测试中提供的TestServer吗? ...

  10. Java实现查看手机配置与功能

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 代码 `` ...