ThreeJs的学习:贴图(三)BufferGeometry

之前学习了Face贴图,自定义着色器贴图等。

在这儿学习BufferGeometry的贴图。而且是平铺

var loader = new THREE.TextureLoader();
var texture = loader.load( "module/6.png" );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.008, 0.008 );

var geometry = new THREE.BufferGeometry();
geometry.attributes.normal = new THREE.Float32BufferAttribute([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], 3)
geometry.attributes.position = new THREE.Float32BufferAttribute( [0, 0, 0, 0, 300, 0, 300, 300, 0, 300, 0, 0], 3)
geometry.attributes.uv = new THREE.Float32BufferAttribute( [0, 0, 0, 300, 300, 300, 300, 0], 2)
geometry.index = new THREE.Uint16BufferAttribute([1, 0, 3, 3, 2, 1], 1)

var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) );

scene.add( mesh );

WebGL的提示信息

提示信息1:执行完后,会有下面这样的提示信息。不影响显示图片 

提示信息2:如果把geometry2.attributes.uv的itemSize设为3,则会有下面的提示。如果设回2,就正常了,但是会有【提示信息1】的WebGL提示信息。

uv的itemSize设为2,还得先理解什么是uv

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threejs 建筑模型贴图是指在使用threejs进行建筑模型渲染时,给建筑物的表面贴上纹理、颜色或材质等效果。在threejs中,建筑模型贴图可以通过以下几个步骤实现: 第一步,准备模型:首先需要准备好建筑模型的数据,可以使用3D建模软件(如Blender、Maya等)创建建筑模型。在模型中,每个面都是由三角形构成的,每个三角形都具有自己的顶点坐标、法线向量、纹理坐标等属性。 第二步,导入模型:将建筑模型导入到threejs中。通过加载3D模型文件(如OBJ、GLTF等),可以将建筑模型加载到threejs场景中进行渲染。在导入模型的过程中,建筑模型的顶点数据、面索引以及其他属性将被解析并存储在threejs内部的数据结构中。 第三步,创建材质:在threejs中,可以通过创建材质对象来给建筑模型的表面添加纹理。材质可以包括颜色、光照属性、纹理等信息。可以使用内置的材质类型(如MeshBasicMaterial、MeshPhongMaterial)或自定义材质类型来实现所需的效果。 第四步,贴图:将纹理图像应用到建筑模型的材质上。可以加载图片文件作为纹理,拥有纹理坐标信息的每个面将根据其顶点的纹理坐标与图像上的像素进行映射。通过修改材质的属性,如map、color、emissive等,可以实现不同的贴图效果。 第五步,渲染:最后,通过调用渲染器(Renderer)的渲染方法将建筑模型以及贴图效果显示在屏幕上。渲染器会根据光照、摄像机视角等参数对建筑模型进行光栅化,并应用贴图材质的效果,最终将建筑模型的可视化结果呈现给用户。 通过以上几个步骤,就可以实现在threejs中对建筑模型进行贴图的效果。贴图可以为建筑模型增加细节、纹理、颜色等,使其更加真实、生动。同时,通过调整材质的属性,还可以实现建筑模型的反射、折射等效果,提升模型的视觉质感。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值