ThreeJs的学习：贴图（三）BufferGeometry

最新推荐文章于 2024-09-13 20:00:00 发布

原创最新推荐文章于 2024-09-13 20:00:00 发布 · 7.1k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Canvas与WebGL 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何使用Three.js中的BufferGeometry进行平铺贴图的实践过程，包括加载纹理、设置重复模式及调整UV坐标等内容，适用于WebGL场景构建。

之前学习了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 );