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. Windows下Net6开源akstream项目vs2022调试GB28181协议对接摄像头全流程

    一.背景介绍 笔者经历多个项目对接摄像头需求,不同项目具体要求又有所不同,碰到的摄像头对接开发问题,整理记录.此篇主要用于记录备用及给有缘人提供解决思路等. 1．   同一局域网对接(海康摄像头),如 ...

  2. 手工安装部署openGauss3.0一主一备（非om工具安装）

    手工安装部署 openGauss3.0 一主一备(非 om 工具安装) 本文出处:https://www.modb.pro/db/425385 一.操作系统配置(centos7.6) 1.关闭防火墙 ...

  3. Prometheus 性能调优-水平分片

    简介 之前笔者有连续 2 篇文章: Prometheus 性能调优 - 什么是高基数问题以及如何解决? 如何精简 Prometheus 的指标和存储占用 陆续介绍了一些 Prometheus 的性能调 ...

  4. Perm 排列计数——Lucas&dfs

    思路:这道题给出的公式看明白后即可得出正解,我们可以把他想象成一颗二叉树,任意一个点的任意一个子孙一直除以2后最终都会到达一终点,终点则为以该点为根的子树的最小值. so--我们可以将根节点作为最后终 ...

  5. Python 爬虫进阶五之多线程的用法

    Python 爬虫进阶五之多线程的用法 作者 崔庆才   发表于 2016-11-03   分类于 Python   阅读次数: 60553   本文字数: 7.5k   阅读时长 ≈ 7 分钟 前言 ...

  6. python将日志生成到文件和控制台

    # 日志收集设置import logging, osfrom logging.handlers import TimedRotatingFileHandlerimport datetimecurren ...

  7. argparse命令行参数的使用

    import argparse def main(): #设置一些参数 parser = argparse.ArgumentParser() parser.add_argument('--device ...

  8. 关于<property name="hibernate.hbm2ddl.auto"></property>中的参数填写

    hibernate的数据库表自动生成参数 关于<property name="hibernate.hbm2ddl.auto"></property>中的参数 ...

  9. 剑指offer66(Java)-构建乘积数组（中等）

    题目: 给定一个数组 A[0,1,-,n-1],请构建一个数组 B[0,1,-,n-1],其中 B[i] 的值是数组 A 中除了下标 i 以外的元素的积, 即 B[i]=A[0]×A[1]×-×A[i ...

  10. Understand Abstraction and Interface

    Foreword 抽象和接口是Java中的两个关键字,也是两种最基本的优化软件项目手段.为什么说它们是一种优化项目的手段? 人分三六九等,不同等级的人,所接触的事和处理的事是不一样的.同理,项目也分大 ...