threeJS材质,添加透明材质、材质不拉伸、玻璃材质

添加透明材质,比如玻璃, transparent: true,
在这里插入图片描述

//纹理加载器
   const textureLoader = new THREE.TextureLoader();
   const menColorLoader = textureLoader.load('./model/fbx/house1215/texture/black.png');
   const glassMaterial = new THREE.MeshBasicMaterial({
       color: 0xffff00,
       transparent: true,
       // opacity: 1,
       alphaMap: menColorLoader
   });

材质不拉伸
在这里插入图片描述

planeTexture.wrapS = THREE.RepeatWrapping;
planeTexture.wrapT = THREE.RepeatWrapping;

const planeTexture = new THREE.TextureLoader().load('./model/fbx/house1215/texture/plane.jpg')
   planeTexture.wrapS = THREE.RepeatWrapping;
   planeTexture.wrapT = THREE.RepeatWrapping;
   const planeMaterial = new THREE.MeshStandardMaterial({
       map: planeTexture,
       roughness: 0.8,
   })

玻璃材质

const glassMaterial = new THREE.MeshPhysicalMaterial({
   color: 0x053112,
    transparent: true, // 透明度设置为 true
    opacity: 0.6, // 设置透明度
    roughness: 0,
    metalness: 0,
    envMapIntensity: 1,//需要搭配transparent
    transmission: 0.95, // 折射度,表示光线经过材料时的衰减程度
    clearcoat: 1,
    clearcoatRoughness: 0,
    refractionRatio: 1.5, // 折射率,控制光的折射程度
});

child.material = glassMaterial//赋材质

玻璃材质二:
在这里插入图片描述

材质代码如下:

const infusionMaterial = new THREE.MeshPhysicalMaterial({
     color: 0xffffff,
     metalness: 0,
     roughness: 0.1,
     transmission: 1,
     transparent: true
 })

金属材质:
在这里插入图片描述

const instrumentsMaterial =new THREE.MeshPhysicalMaterial({
    color: 0x1E1E1E,
    metalness: 1,
    roughness: 0.5,
    clearcoat: 1,//清漆
    clearcoatRoughness: 0
})

偏木制材质
在这里插入图片描述

const deskMaterial = new THREE.MeshPhysicalMaterial({
   color: 0xf1f1f1,
     metalness: 0.0,
     roughness: 0.1,
 })

在这里插入图片描述
物理材质讲解

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three.js中,可以使用不同的属性来创建玻璃材质。以下是一个示例代码,展示了如何创建一个玻璃材质: ```javascript const glassMaterial = new THREE.MeshPhysicalMaterial({ color: 0xffffff, // 玻璃的颜色 metalness: 0.25, // 金属度 roughness: 0, // 粗糙度 transmission: 1.0, // 透明度 }); ``` 在这个示例中,我们使用`MeshPhysicalMaterial`来创建玻璃材质。`color`属性定义了玻璃的颜色,`metalness`属性定义了金属度,`roughness`属性定义了粗糙度,`transmission`属性定义了透明度。 你也可以根据需要调整这些属性的值来获得不同的玻璃效果。 #### 引用[.reference_title] - *1* [threejs材质](https://blog.csdn.net/u010223072/article/details/131474735)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [threejs 相关材质属性配置](https://blog.csdn.net/qq_42987283/article/details/124008051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [threeJS材质添加透明材质材质拉伸玻璃材质](https://blog.csdn.net/c_qianxia5040/article/details/130100203)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值