【基础】Three.js加载纹理贴图、加载外部gltf格式文件

2024-09-02 19:28

本文主要是介绍【基础】Three.js加载纹理贴图、加载外部gltf格式文件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

请添加图片描述

1. 模型使用纹理贴图

const geometry = new THREE.BoxGeometry(10, 10, 10);const textureLoader = new THREE.TextureLoader(); // 创建纹理贴图加载器const texture = textureLoader.load("/crate.gif"); // 加载纹理贴图const material = new THREE.MeshLambertMaterial({map: texture,side: THREE.DoubleSide, //两面可见});

2. 加载外部gltf格式

GLTF(GL Transmission Format)是一种高效、开放的3D文件格式,专为Web和移动端实时渲染而设计。GLTF文件格式旨在传输3D模型数据,具有快速加载、渲染效率高、支持丰富的材质和动画等优点,被称为“3D领域的JPEG”。

GLTF文件结构:
.gltf(JSON文件): 描述模型的主要结构,包括几何体、材质、动画、场景等。
.bin(二进制文件): 存储顶点数据、法线、UV坐标等二进制数据。
纹理(.png, .jpg): 存储模型使用的纹理贴图。
.glb(单文件格式): GLB是GLTF的二进制版本,将所有数据(JSON、二进制和纹理)合并到一个文件中,方便传输和使用。

可以用Blender软件导出绘制好的三维模型,也可以打开和预览gltf格式文件模型

注意: 纹理贴图和gltf格式存放在public目录下

  // 创建GLTFLoader实例const loader = new GLTFLoader();// 加载.gltf文件loader.load("/models/Parrot.glb", function (gltf) {const model = gltf.scene;// 修改模型的位置model.position.set(0, 15, 0); // 设置为(x, y, z),可根据需要调整// 修改模型的旋转model.rotation.set(Math.PI / 4, Math.PI / 4, 0); // 设置旋转角度(弧度),如(x, y, z)// 修改模型的缩放model.scale.set(0.2, 0.2, 0.2); // 设置缩放比例 (x, y, z)scene.add(model);});

3. 光源辅助查看

1.点光源辅助查看:
PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )
light – 要模拟的光源.
sphereSize – (可选的) 球形辅助对象的尺寸. 默认为 1.
color – (可选的) 如果没有赋值辅助对象将使用光源的颜色.

const pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
pointLight.position.set( 10, 10, 10 );
scene.add( pointLight );const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );

2.平行光源辅助查看:
DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )
light-- 被模拟的光源.
size – (可选的) 平面的尺寸. 默认为 1.
color – (可选的) 如果没有设置颜色将使用光源的颜色.

const light = new THREE.DirectionalLight( 0xFFFFFF );
const helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );

4. 案例代码

在这里插入图片描述

<template><div class="wrapper"><div ref="threeRef"></div></div>
</template>
<script setup lang="ts">
// 引入three.js
import * as THREE from "three";
// 引入扩展库OrbitControls.js
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 引入dat.gui.js的一个类GUI
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";import { onMounted, ref } from "vue";
const threeRef = ref();
// 模型1
const createMesh1 = () => {const geometry = new THREE.BoxGeometry(10, 10, 10);const textureLoader = new THREE.TextureLoader(); // create a texture loader.const texture = textureLoader.load("/crate.gif"); // load a textureconst material = new THREE.MeshLambertMaterial({// color: 0xff0000,map: texture,side: THREE.DoubleSide, //两面可见});return new THREE.Mesh(geometry, material);
};
// 模型2
const createMesh2 = () => {const geometry = new THREE.BoxGeometry(3, 3, 3);const textureLoader = new THREE.TextureLoader(); // create a texture loader.const texture = textureLoader.load("/grid.png"); // load a texturetexture.repeat.set(2, 2); // 设置纹理的重复次数texture.rotation = Math.PI / 4; // 旋转纹理(以弧度为单位)texture.center.set(0.5, 0.5); // 设置旋转的中心texture.center.set(0.5, 0.5); // 设置旋转的中心const material = new THREE.MeshStandardMaterial({map: texture,});return new THREE.Mesh(geometry, material);
};// 添加光源
const createDictionLight = (target) => {// 平行光const directionalLight = new THREE.DirectionalLight(0xffffff, 1);// 设置光源的方向:通过光源position属性和目标指向对象的position属性计算directionalLight.position.set(10, 15, 25);// 方向光指向对象网格模型mesh,可以不设置,默认的位置是0,0,0directionalLight.target = target;return directionalLight;
};// 添加渲染器
const createRenderer = (dom: HTMLElement) => {const renderer = new THREE.WebGLRenderer({antialias: true, // 设置锯齿属性,为了获得更好的图像质量});// 定义threejs输出画布的尺寸(单位:像素px)renderer.setSize(window.innerWidth, window.innerHeight);// 为了适应不同的硬件设备屏幕,设置设备像素比renderer.setPixelRatio(window.devicePixelRatio);// 插入到任意HTML元素中dom.append(renderer.domElement);return renderer;
};
// 响应式窗口处理
const onResize = (camera, renderer) => {window.onresize = function () {// 更新相机纵横比camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();// 更新渲染器的大小renderer.setSize(window.innerWidth, window.innerHeight);};
};// 添加操作面板
const createGui = (mesh, light) => {// 实例化一个gui对象const gui = new GUI();//设置操作面板位置gui.domElement.style.right = "0px";gui.domElement.style.width = "300px";//添加光照强度,并使用name重命名,step设置步长gui.add(light, "intensity", 0, 2.0).name("平行光强度").step(0.1);// 添加颜色gui.addColor({color: 0xff0000,},"color").name("颜色").onChange(function (value) {mesh.material.color.set(value);});
};
// 添加了一个相机控制插件,实现平移、旋转和缩放/推拉相以从任何角度查看场景
// 改变的实际上时相机的位置,并不是物体
const createControls = (scene, camera, renderer) => {const controls = new OrbitControls(camera, renderer.domElement);// 这个插件允许您controls.addEventListener("change", function () {renderer.render(scene, camera); //执行渲染操作});
};const init = () => {//! 1.创建场景// 创建3D场景对象Sceneconst scene = new THREE.Scene();scene.background = new THREE.Color("#c1c5d8"); // 设置场景颜色// 物体const mesh1 = createMesh1();mesh1.position.set(0, 0, 0);scene.add(mesh1); // 将模型添加到场景中const mesh2 = createMesh2();mesh2.position.set(0, 8, 0);scene.add(mesh2);//! 2.创建相机// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000:远裁截面const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,3000);camera.position.set(10, 10, 10); // 相机位置camera.lookAt(mesh1.position); //指向mesh对应的位置camera.lookAt(mesh2.position); //指向mesh对应的位置// !AxesHelper:辅助观察的坐标系// const axesHelper = new THREE.AxesHelper(20);//  scene.add(axesHelper);//渲染const renderer = createRenderer(threeRef.value);renderer.render(scene, camera);// 添加光源const dictionLight = createDictionLight(mesh1);// 将光源添加到场景中scene.add(dictionLight);// 查看平行光const helper = new THREE.DirectionalLightHelper(dictionLight, 5);scene.add(helper);//环境光:没有特定方向,整体改变场景的光照明暗const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);scene.add(ambientLight);// 设置相机控件轨道控制器createControls(scene, camera, renderer);// !  创建循环动画,使物体可以动起来function rotateRender() {renderer.render(scene, camera); //执行渲染操作mesh1.rotateY(0.01); //每次绕y轴旋转0.01弧度mesh2.rotateX(0.01);requestAnimationFrame(rotateRender); //请求再次执行渲染函数render,渲染下一帧}// 创建GLTFLoader实例const loader = new GLTFLoader();// 加载.gltf文件loader.load("/models/Parrot.glb", function (gltf) {const model = gltf.scene;// 修改模型的位置model.position.set(0, 15, 0); // 设置为(x, y, z),可根据需要调整// 修改模型的旋转model.rotation.set(Math.PI / 4, Math.PI / 4, 0); // 设置旋转角度(弧度),如(x, y, z)// 修改模型的缩放model.scale.set(0.2, 0.2, 0.2); // 设置缩放比例 (x, y, z)scene.add(model);});rotateRender();// 添加操作面板createGui(mesh2, dictionLight);onResize(camera, renderer);
};onMounted(() => {init();
});
</script>
<style scoped></style>

案例纹理图片:位置放在/public
https://github.com/mrdoob/three.js/blob/dev/examples/textures/crate.gif
在这里插入图片描述
案例gltf文件: 位置放在/public/models
https://github.com/mrdoob/three.js/blob/dev/examples/models/gltf/Parrot.glb

这篇关于【基础】Three.js加载纹理贴图、加载外部gltf格式文件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1130857

相关文章

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

mysql的基础语句和外键查询及其语句详解(推荐)

《mysql的基础语句和外键查询及其语句详解(推荐)》:本文主要介绍mysql的基础语句和外键查询及其语句详解(推荐),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录一、mysql 基础语句1. 数据库操作 创建数据库2. 表操作 创建表3. CRUD 操作二、外键

Python基础语法中defaultdict的使用小结

《Python基础语法中defaultdict的使用小结》Python的defaultdict是collections模块中提供的一种特殊的字典类型,它与普通的字典(dict)有着相似的功能,本文主要... 目录示例1示例2python的defaultdict是collections模块中提供的一种特殊的字

Python基础文件操作方法超详细讲解(详解版)

《Python基础文件操作方法超详细讲解(详解版)》文件就是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位,文件的核心操作就是读和写,:本文主要介绍Python基础文件操作方法超详细讲解的相... 目录一、文件操作1. 文件打开与关闭1.1 打开文件1.2 关闭文件2. 访问模式及说明二、文件读写1.

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》:本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托(Multicast Delegates)4. 委托的用途事件处理回调函数LINQ