Three.js_加载透明贴图模型

最新推荐文章于 2024-07-16 14:54:05 发布
最新推荐文章于 2024-07-16 14:54:05 发布
阅读量2.5k 收藏 3
点赞数
分类专栏： Three.js 文章标签： 贴图 android javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42137574/article/details/120262190
版权
本文介绍了如何使用Three.js库加载带有透明贴图的3D模型，通过关键代码展示实现透明效果的过程，并提供了完整的源码供读者参考。
摘要由CSDN通过智能技术生成

关键代码

var texture= THREE.ImageUtils.loadTexture("000874.png", null, function(t) {
   });
      // 基础Basic网格材质，不受光照影响   Phong网格材质受光照影响
      obj.children[0].material= new THREE.MeshBasicMaterial({
   
//         map:texture,//设置颜色纹理贴图
            map: texture,transparent: true,side:THREE.DoubleSide
      })

	  
	  obj.traverse(function(child)
	  {
   
	                  if (child instanceof THREE.Mesh)
	                  {
   
	                      //将贴图赋于材质
	                      child.material.map = texture;
	                      //重点，没有该句会导致PNG无法正确显示透明效果
	                      child.material.transparent = true;
	                      child.material.alphaTest = 0.7;
                          child.material.depthWrite = true;
	                  }
	   });
	  
      scene.add(obj);
      obj.children[0].scale.set(8,8,8);//网格模型缩放
    });

在这里插入图片描述

全部源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />


    <title>文物鉴赏</title>
    <style>
        *{
   
            touch-action: none;
            touch-action: pan-y;
最低0.47元/天 解锁文章
黑狗向前跑
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Threejs_显示透明贴图
weixin_42137574的博客
09-10 1968
//加载纹理贴图 var texture = new THREE.TextureLoader().load('suoyi3.png'); // 基础Basic网格材质，不受光照影响 Phong网格材质受光照影响 obj.children[0].material= new THREE.MeshBasicMaterial({ map:texture,//设置颜色纹理贴图 }) obj.traverse(function(chil.
Three.js 实战【1】—— 3D全景视图开发
共勉
05-17 3225
我们先看一下这篇文章主要要实现的一个demo效果，现如今在第三方租房、买房App、或者百度、高德地图上会出现这种全景视图，当手势操作时，他对应的景色也会发生一定的变化。又或者你最近刷抖音看到了HM玩的图寻，给了一张可以旋转的3D全景图片，然后找这张图片在哪拍摄的，你可能会好奇这种效果在前端是如何实现的。这就是这篇文章将会教会你的一个小demo。
Three.JS 使用RGBELoader和CubeTextureLoader 添加环境贴图
最新发布
this__valve的博客
07-16 667
RGBELoader和CubeTextureLoader 添加环境贴图
threejs 透明贴图，模型透明，白边
w710537643的博客
10-06 2131
模型透明贴图显示问题处理
Three.js 纹理贴图 - 环境贴图 - 纹理贴图 - 透明贴图 - 高光贴图
好好学习天天向上
01-31 2436
描述几何体的顶点坐标描述纹理贴图的坐标位置关系是一一对应的，每一个顶点位置对应一个纹理贴图的位置根据纹理坐标将纹理贴图的对应位置裁剪映射到几何体的表面上。0, 0, 0, //顶点1坐标100, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标]);0, 0, //顶点1对应位置的纹理坐标uv1, 0, //顶点2对应位置的纹理坐标uv0, 1, //顶点3对应位置的纹理坐标uv]);
three.js场景透明
想去旅行的静静的博客
03-25 1085
将alpha参数传递给WebGLRenderer alpha: true this.renderer = new Three.WebGLRenderer({ antialias: true, alpha: true }) 全部代码 const container = document.getElementById('donghua') this.camera = new Three.Persp...
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
HuoZhiyan 的博客
12-22 4144
本文主要介绍了Three.js的纹理及其常用属性，并扩展了透明纹理和环境遮挡贴图与强度的内容....
three.js加载gltf模型
09-17
在本文中，我们将深入探讨如何使用three.js库加载GLTF（GL Transmission Format）模型，并结合Vue.js框架构建一个完整的Web应用程序。GLTF是一种开放标准的3D资产交换格式，广泛用于WebGL和WebVR场景，因为它能高效...
electron_three.js_vue.zip
12-17
在这个项目中，Three.js用于生成和展示3D模型，并可以加载背景贴图和实现反光效果。 4. **index.html**: 这是应用的主HTML文件，通常包含应用的基本结构和引入的脚本。在这里，它可能包含了Vue.js的入口点以及Three...
LearningThreeJs_ThreeJS_three.jslearn_Threejs学习_
10-02
Three.js是基于JavaScript的一个强大库，它使得在浏览器中创建复杂的3D场景变得简单易行。在这个教程中，我们将深入探讨Three.js的核心概念、基本用法以及一些常见应用场景。 首先，Three.js的核心概念包括场景...
threejs加载qgis导出的区域底图
02-24
threejs加载qgis导出的区域底图
Three.js 给obj模型添加材料纹理的样例
01-15
Three.js 给obj模型添加材料纹理的样例，鼠标左键可以围绕中心点对3d物体进行旋转和缩放
使用three.js 的 交互式 3D 心脏模型
07-14
在本项目中，我们将深入探讨如何使用流行的JavaScript库three.js创建一个交互式的3D心脏模型。three.js是一个强大的WebGL库，它使得在浏览器中构建3D图形变得简单易行。通过结合HTML5 Canvas、SVG和WebGL，three.js...
three.js对模型进行透明操作以及模型进度条
weixin_44268120的博客
11-29 410
【代码】three.js对模型进行透明操作。
Three.js 实现透明背景
YanisWu的博客
04-27 3573
例如中间放一个模型,背景透明通过相机可以看到现实环境,类似AR展示的效果. 1.Renderer渲染器设置: renderer=newTHREE.WebGLRenderer({ //抗锯齿属性，WebGLRenderer常用的一个属性 antialias:true, alpha:true }); renderer...
Three.js学习8：基础贴图
九天翔龙的技术博客
02-08 2294
贴图，就是把图片贴在 3D 物体材质的表面，让它具有一定的纹理，来为 3D 物体添加细节的一种方法。这使我们能够添加表面细节，而无需将这些细节建模到我们的3D对象中，从而大大精简3D模型的多边形边数，提高模型渲染性能。
three.js 中设置透明背景
热门推荐
七岁
10-08 2万+
类似这样的，canvas感觉是透明的，里面的3D在上面，通常做地球旋转之类的效果，     webgl 设置：setClearColor（1.0,1.0,1.0,1.0） rgba格式最后一个参数就是alpha three.js设置： renderer = new THREE.WebGLRenderer( { antialias: true,alpha:true } ); rend...
Threejs_07 环境、透明度、纹理、ao、光照等贴图的渲染
a_strong_pig的博客
11-21 863
Threejs 各种贴图 环境设置的实现。
three.js加载3d模型贴图
06-03
要在three.js中加载3D模型和贴图，需要进行以下步骤： 1. 首先，需要创建一个场景和一个相机。 ``` var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); ``` 2. 然后，需要创建一个渲染器，将其附加到DOM元素上。 ``` var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 3. 接下来，需要加载模型和纹理。可以使用three.js的OBJLoader和MTLLoader来加载OBJ和MTL文件。 ``` var loader = new THREE.OBJLoader(); var mtlLoader = new THREE.MTLLoader(); mtlLoader.load('model.mtl', function(materials) { materials.preload(); loader.setMaterials(materials); loader.load('model.obj', function(object) { scene.add(object); }); }); ``` 4. 最后，需要将贴图应用于模型上。 ``` var textureLoader = new THREE.TextureLoader(); textureLoader.load('texture.jpg', function(texture) { object.traverse(function(child) { if (child instanceof THREE.Mesh) { child.material.map = texture; } }); }); ``` 以上就是加载3D模型和贴图的步骤，希望对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值