Three加载3D模型贴图

准备阶段

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

效果图

核心代码

<!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模型贴图的更多相关文章

使用 Assimp 库加载 3D 模型
前言要想让自己的 3D 之旅多一点乐趣,肯定得想办法找一些有意思一点的 3D 模型.3D 模型有各种各样的格式,obj的,stl的,fbx的等等不一而足.特别是 obj 格式的 3D 模型,完全是纯 ...
cesium加载gltf模型点击以及列表点击定位弹窗
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之 ...
WPF动态加载3D 放大-旋转-平移
原文:WPF动态加载3D 放大-旋转-平移 WavefrontObjLoader.cs 第二步:ModelVisual3DWithName.cs public class ModelVisual3DW ...
6_1 持久化模型与再次加载_探讨(1)_三种持久化模型加载方式以及import_meta_graph方式加载持久化模型会存在的变量管理命名混淆的问题
笔者提交到gitHub上的问题描述地址是:https://github.com/tensorflow/tensorflow/issues/20140 三种持久化模型加载方式的一个小结论加载持久化模型 ...
xBIM 实战01 在浏览器中加载IFC模型文件
系列目录 [已更新最新开发文章,点击查看详细] 一.创建Web项目打开VS,新建Web项目,选择 .NET Framework 4.5 选择一个空的项目新建完成后,项目结构如下: 二.添 ...
OpenGL（二十二） gluBuild2DMipmaps 加载Mip纹理贴图
当纹理被用于渲染一个面积比它本身小很多的对象时,会由于纹理图像的降采样率不足而导致混叠现象,主要的表现特征是纹理图像的闪烁,出现纹理躁动.特别是在场景远近移动变换时,这种闪烁情况更为明显,严重可能会影 ...
WPF绘制深度不同颜色的3D模型填充图和线框图
原文:WPF绘制深度不同颜色的3D模型填充图和线框图在机械测量过程中,测量的数据需要进行软件处理.通常测量一个零件之后,需要重建零件的3D模型,便于观察测量结果是否与所测工件一致. 重建的3D模型需 ...
cesium加载gltf模型
cesium加载gltf模型一.采用vue-cesium:在项目里加载依赖包.命令如下: npm i --save vue-cesium 在main.js中加入如下代码: https://www.n ...
WebGL three.js学习笔记加载外部模型以及Tween.js动画
WebGL three.js学习笔记加载外部模型以及Tween.js动画本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
使用 Babylon.js 在 HTML 页面加载 3D 对象
五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 W ...

随机推荐

Python读写json文件--json
import json # 将数据写入json文件 def json_write_file(): data={'name':'张三','age':12} with open('json.json',' ...
Native Rawfile开发指导
场景介绍开发者可以通过本指导了解在HarmonyOS应用中,如何使用Native Rawfile接口操作Rawfile目录和文件.功能包括遍历.打开.搜索.读取和关闭Rawfile. 接口说明 ...
SQL 转置计算
转置即旋转数据表的横纵方向,常用来改变数据布局,以便用新的角度观察.有些转置算法比较简单,比如行转列.列转行.双向转置:有些算法变化较多,比如动态转置.转置时跨行计算.关联转置等.这些转置算法对日常工 ...
Linux systemd 定时任务
哈喽大家好,我是咸鱼. 说到 Linux 定时任务,大家用得最多的就是 crond 服务,但其实 systemd 也有类似的功能.我们不但可以通过 systemd 来管理服务,还能设置定时任务,那就是 ...
ImportError: Cannot load backend 'TkAgg' which requires the 'tk' interactive framework, as 'headless' is currently running
MMdetection多卡训练常遇到的两个错误,百度无果,没解决,去github里mmdetection的issue模块搜索了一下找到正解. 这里记录一下,方便后者. 1️⃣ ImportError: ...
Pytorch-卷积神经网络CNN之lenet5的Pytorch代码实现
先说一个小知识,助于理解代码中各个层之间维度是怎么变换的. 卷积函数:一般只用来改变输入数据的维度,例如3维到16维. Conv2d() Conv2d(in_channels:int,out_chan ...
dbeaver导出结果集中乱码
重要的一步需要点击
Serverless 在阿里云函数计算中的实践
简介: 近日,阿里云 aPaaS&Serverless 前端技术专家袁坤在 CSDN 云原生 meetup 长沙站分享了 Serverless 在阿里云函数计算 FC 的实践. 作者:CSDN ...
SysOM 案例解析：消失的内存都去哪了！| 龙蜥技术
简介: 这儿有一份"关于内存不足"排查实例,请查收. 文/系统运维 SIG 在<AK47 所向披靡,内存泄漏一网打尽>一文中,我们分享了slab 内存泄漏的排查方式和工 ...
持续定义Saas模式云数据仓库+BI
云数据仓库概述今天和大家一起探讨一下我们Saas模式下云数据仓库加上商业智能BI能有什么新的东西出来.我们先来看一下云数据仓库的一些概述.预测到2025年, 全球数据增长至175ZB, 中国数据量增 ...

Three加载3D模型贴图

Three加载3D模型贴图

准备阶段

相关资料

效果图

核心代码

源码传送

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

随机推荐

热门专题