Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格

这篇具有很好参考价值的文章主要介绍了Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

相关API的使用:

1 traverse (模型循环遍历方法)

2. THREE.TextureLoader(用于加载和处理图片纹理)

3. THREE.MeshLambertMaterial(用于创建材质)

4. getObjectByProperty(通过材质的属性值获取材质信息)

在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上加入onSetSystemModelMap (设置模型材质方法)和onSetModelMaterial(设置材质属性方法)
首先在 setModel 方法里获取到当前模型所有的材质 (traverse

setModel({ filePath, fileType, scale,  position }) {
		return new Promise((resolve, reject) => {
			const loader = this.fileLoaderMap[fileType]
			loader.load(filePath, (result) => {
			  //加载不同类型的文件
				switch (fileType) {
					case 'glb':
						this.model = result.scene		
						break;
					case 'fbx':
						this.model = result
						break;
					case 'gltf':
						this.model = result.scene
						break;
					case 'obj':
						this.model = result
						break;
					default:
						break;
				}
				this.model.traverse((v) => {
					const { uuid } = v
					if (v.isMesh &&  v.materia) {
					  this.modelMaterialList.push(v)
					}
				})
				// 设置模型大小
				if (scale) {
					this.model.scale.set(scale, scale, scale);
				}
				// 设置模型位置 
				if (position) {
					const { x, y, z } = position
					this.model.position.set(x, y, z)
				}
				// 设置相机位置
				this.camera.position.set(0, 2, 6)
				// 设置相机坐标系
				this.camera.lookAt(0, 0, 0)
	             // 将模型添加到场景中去   
				this.scene.add(this.model)
				resolve(true)
			}, () => {

			}, (err) => {
				console.log(err)
				reject()
			})
		})
	}

通过 getObjectByProperty 方法传入 uuid 获取到当前材质信息
设置模型贴图

	onSetSystemModelMap({ url }) {
	   // 当前uuid 
		const uuid = store.state.selectMesh.uuid
		// 通过uuid 获取需要设置的材质
		const mesh = this.scene.getObjectByProperty('uuid', uuid)
		const { name, color } = mesh.material
		// 获取到贴图 url(图片实际地址)
		const mapTexture = new THREE.TextureLoader().load(url)
		mesh.material = new THREE.MeshLambertMaterial({
			map: mapTexture,
			transparent: true, // 允许材质可透明
			color,
			name,
		})
	}

设置材质属性

	// 设置材质属性
	onSetModelMaterial(config) {
		const { color, wireframe, depthWrite, opacity } = config
		const uuid = store.state.selectMesh.uuid
		const mesh = this.scene.getObjectByProperty('uuid', uuid)
		if (mesh && mesh.material) {
			//设置材质颜色
			mesh.material.color.set(new THREE.Color(color))
			//设置网格
			mesh.material.wireframe = wireframe
			// 设置深度写入
			mesh.material.depthWrite = depthWrite
			//设置透明度
			mesh.material.transparent = true
			mesh.material.opacity = opacity
		}
	}

完整的代码可参考:https://gitee.com/ZHANG_6666/Three.js3D

界面效果:
Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格,Three.js,javascript,材质,贴图,three.js,3d模型
Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格,Three.js,javascript,材质,贴图,three.js,3d模型文章来源地址https://www.toymoban.com/news/detail-646103.html

到了这里,关于Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js Tri-panner (三面贴图) 材质 两种实现方式

    介绍 Tri-panner 在babylonjs中有支持 但是three.js目前的基础材质并不支持 需要自己定义shader 或者使用目前还没有什么完善的文档的 NodeMaterial 下面展示两种实现方式 自定义shader NodeMaterial 这是threejs新系统充满未来 目前还没有一个完善的文档 并且不太稳定 r132的时候支持这个材质

    2024年01月18日
    浏览(45)
  • 一文看懂-纹理/贴图/材质

    纹理(Texture) 应用于网格表面上的标准位图图像,即3D 对象的 2D 贴图。 贴图(Map) 指的是绘制在对象模型表面上的那些图像数据,其所使用的图像文件称为纹理。贴图还包含纹理图在对象表面的坐标(UV坐标)等其他数据信息。 可以说, 纹理是贴图的子集 。 另外。Map也

    2024年02月08日
    浏览(52)
  • 7.PBR材质与纹理贴图

    友情链接:threejs 中文文档 目录 1. PBR材质简介 光照模型 网格模型材质整体回顾 2. PBR材质金属度和粗糙度 金属度metalness 粗糙度roughness  3. 环境贴图.enMap 环境贴图反射率.envMapIntensity 场景环境属性.environment 4. MeshPhysicalMaterial清漆层 清漆层属性.clearcoat 清漆层粗糙度.clearcoatRo

    2024年02月12日
    浏览(35)
  • Three.js 实现模型材质分解,拆分,拆解效果

    原理:通过修改模型材质的 x,y,z 轴坐标 positon.set( x,y,z) 来实现拆解,分解的效果。 注意:支持模型材质position 修改的材质类型为 type=“Mesh” ,其他类型的材质修改了 position 可能没有实际效果 在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上新增一个 setModelMeshD

    2024年02月11日
    浏览(81)
  • three.js——模型对象的使用材质和方法

    BufferGeometry通过.scale()、.translate()、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。 官网的模型和材质使用 线条模式渲染,查看几何体三角形结构

    2024年02月07日
    浏览(44)
  • Three.js之几何体、高光材质、渲染器设置、gui

    阵列立方体和相机适配体验 Threejs常见几何体简介 … gui.js库(可视化改变三维场景) 注:基于Three.js v0.155.0 长方体:BoxGeometry 球体:SphereGeometry 圆柱:CylinderGeometry 矩形平面:PlaneGeometry 圆形平面:CircleGeometry 高光网格材质:MeshPhongMaterial(shininess、specular) WebGL渲染器设置:

    2024年02月11日
    浏览(54)
  • Three.js实现模型,模型材质可拖拽效果 DragControls

    DragControls:是一个用于在Three.js中实现拖拽控制的辅助类。它简化了在Three.js中实现拖拽物体的过程。 DragControls的构造函数接受三个参数: objects:一个包含需要进行拖拽的物体的数组。 camera:相机对象,用于将屏幕坐标转换为三维空间坐标。 domElement:渲染器的DOM元素,用于

    2024年02月11日
    浏览(41)
  • Three.js初识:渲染立方体、3d字体、修改渲染背景颜色

    用场景对three.js进行渲染:场景、相机、渲染器 场景 透视摄影机 参数解析: fov: 视野角度(FOV)。视野角度就是无论在什么时候,你所能在显示器上看到的场景的范围,它的单位是角度(与弧度区分开)。 aspect: 长宽比(aspect ratio)。 也就是你用一个物体的宽除以它的高的值

    2024年02月07日
    浏览(46)
  • Cesium-源码修改-gltf增加纹理贴图改变3dtiles外观

            Cesium支持加载gltf和3dtiles等三维数据模型,实现了很好的封装,往往只需要给一个uri就能加载模型文件,并实现贴图渲染等。但是好的封装带来的问题是如果开发者想要自定义贴图,那该怎么办?不得不从源码入手。         这篇文章的价值不仅仅是gltf增加纹理贴图

    2024年02月06日
    浏览(52)
  • Blender如何给fbx模型添加材质贴图并导出带有材质贴图的模型

    推荐:使用 NSDT场景编辑器快速助你搭建可二次编辑的3D应用场景 此教程适合新手用户,专业人士直接可直接绕路。   本教程中介绍了利用Blender建模软件,只需要简单几步就可以为模型添加材质贴,图,并且导出带有材质的模型文件。 1、第一步,打开Blender软件,导入模型

    2024年02月13日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包