Threejs中使模型变亮或模型重新贴图

1、glb,gltf模型导入场景中是黑的

出现原因分析

首先确定是否是gltf格式出现原因：

使用glft viewer 确定gltf 能否展示

查看exposure是否为大于0的数，在webGLRender 中设置

查看emissive和emssiveMap:

如果使用环境光看到黑色（或者其他纯色），将emssive设置为material.color,如果有纹理，将纹理赋值给emssiMap。

var textureLoader = new THREE.TextureLoader();
new THREE.GLTFLoader().load("./models/gb.glb", result => {var model = result.scene;scene.add(model);model.traverse( function ( child ) {if ( child.isMesh ) {//模型变亮child.material.emissive =  child.material.color;child.material.emissiveMap = child.material.map;//模型重新赋材质贴图var texture = textureLoader.load( "./images/texture/gbmaterial.jpg" );texture .repeat.set( 1,1 );child.material.map = texture child.material.transparent = true//模型变亮，或重新赋颜色child.material.color.set(0xffffff)}} );})

示例如下：

这里我导入一个钢包的模型，在只有环境换时，是黑秋秋的，然后我尝试给加几个平行光增加亮度，如下：

效果还是不够理想，我尝试给模型本身增加亮度，效果如下：

效果仍然不够真实，最后我随便下载了一张金属材质的图片，赋值给模型，效果如下：

实际代码使用片段：

var  model = obj.scene;
model.position.set(0,0,0)
scene.add(model)
model.traverse( function ( child ) {if ( child.isMesh ) {//添加贴图           var texture = textureLoader.load( "../images/gbmaterial.jpg" );texture.repeat.set( 1,1 );child.material.map = texture//给个颜色增加亮度child.material.color.set('#ddd');}
});

2、也可以给模型赋值视频video材质

gltf.scene.traverse(child=>{console.log("name:",child.name);if(child.name=='曲面屏'){const video = document.createElement('video');video.src = "../meadis/video01.mp4";video.muted = true;video.autoplay = "autoplay";video.loop = true;video.play();const videoTexture = new THREE.VideoTexture(video);const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});child.material = videoMaterial;}})

这样就可以在一个展馆的曲面屏上投放视频，也可以在建筑物外立面添加视频起到宣传作用

Threejs中使模型变亮或模型重新贴图相关推荐

threejs中FBX格式模型的加载与克隆
最近根据项目需求需要加载和克隆带动画的FBX模型,但是发现直接用Object.clone方法无法对fbx模型进行克隆,于是查资料解决克隆问题. 废话不多说,直接正题: 所需脚本: threer97表示 ...
软件开发中的V字模型与W模型（使开发与侧试分离）
■前言关于 W字模型,以前好像听过, 但是印象不深刻,几天有听别人说了一遍, 采用W字模型的主要目的是,测试与开发分离. ■瀑布开发中的V字模型与 W模型 --- ■吐槽 ⇒ W字模型很少有项目 ...
VUE使用Three.js实现模型，点击交互，相机旋转视角跟随移动（Threejs中使用Tweenjs，含demo源码）
目录一.Three.js是什么? 二.VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8. ...
超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(三)
上一篇文章 voidjay,公众号:web前端可视化超详细--手把手教你用threejs实现一个酷炫的模型发光扫描效果(二) 上一篇文章已完成基本效果的实现,本文则完成整个项目的灵魂:发光效果以及模型 ...
html中sprite标签,Three.js模型标签
Three.js模型标签在很多的实际的项目中,你可能需要给一个Three.js的模型添加标签,标签可以通过一个包含文字图形信息的HTML元素或者一个three.js的精灵模型来表示. 层级模型复杂 ...
机器学习中的模型评价、模型选择及算法选择
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 正确使用模型评估.模型选择和算法选择技术无论是对机器学习学术研究还是工业场景应用都至关重要.本文将对这三个任务的相关技术 ...
从一张风景照中就学会的SinGAN模型，究竟是什么神操作？| ICCV 2019最佳论文
作者 | 王红成,中国海洋大学-信息科学与工程学院-计算机技术-计算机视觉方向研究生,研二在读,目前专注于生成对抗网络的研究编辑 | Jane 出品 | AI科技大本营(ID:rgznai100) ...
计算机视觉中的数据预处理与模型训练技巧总结
来源丨机器学习小王子,转载自丨极市平台导读针对图像分类任务提升准确率的方法主要有两条:一个是模型的修改,另一个是各种数据处理和训练的技巧.本文在精读论文的基础上,总结了图像分类任务的11个tric ...
独家 | 在R中使用LIME解释机器学习模型
作者:PURVAHUILGOL 翻译:陈丹校对:欧阳锦本文约3200字,建议阅读15分钟本文为大家介绍如何在R中使用LIME来解释机器学习模型,并提供了相关代码. 关键词:机器学习模型解释.R语 ...

Threejs中使模型变亮或模型重新贴图

Threejs中使模型变亮或模型重新贴图相关推荐

最新文章

热门文章