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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章