three.js入门三：buffergeometry贴图属性（position、index和uvs）

共9个文件

jpg：7个

png：1个

html：1个

13 浏览量 2023-12-08 11:53:13 上传评论收藏 360KB ZIP 举报

在本篇关于“three.js 入门三：buffergeometry贴图属性（position、index和uvs）”的文章中，我们将深入探讨如何使用three.js库在3D场景中应用纹理贴图，特别是关注BufferGeometry对象中的关键属性。BufferGeometry是一种优化的几何数据结构，用于减少内存消耗和提高渲染性能。 `position`属性是BufferGeometry的核心部分，它存储了每个顶点的位置坐标。在3D空间中，每个顶点都有三个坐标值（x, y, z），定义了它的位置。通过设置不同的位置坐标，我们可以创建出各种复杂的几何形状。 `index`属性用于定义多边形的边。在3D图形中，多边形是由三个或四个边连接的顶点组成的。index数组指定了哪些顶点组成一个面，使得渲染引擎知道应该如何连接这些顶点以绘制出3D模型。如果没有index属性，渲染引擎将默认按顺序连接所有顶点，可能导致不期望的几何形状。接下来，我们讨论`uv`（纹理坐标）属性。在3D模型上应用贴图时，uv坐标至关重要。每个顶点都有一个对应的uv坐标，它们定义了该顶点在2D纹理图像上的位置。uv坐标通常介于0到1之间，(0,0)表示纹理左下角，(1,1)表示右上角。通过映射uv坐标，可以将2D纹理平滑地贴合到3D模型的表面。在JavaScript中，创建BufferGeometry对象并设置这些属性的代码可能如下： ```javascript const geometry = new THREE.BufferGeometry(); const positions = new Float32Array([ /* 顶点位置数组 */ ]); const indices = new Uint16Array([ /* 顶点索引数组 */ ]); const uvs = new Float32Array([ /* uv坐标数组 */ ]); geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); geometry.setIndex(indices); geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2)); ``` 在本例中，提供的压缩包文件包含了多个jpg和png图片，它们可能是用于3D场景的贴图。例如，`panorama.jpg`可能是一个全景图像，用于创建环境贴图，而`number.png`可能是数字纹理，用于在3D模型上显示数字信息。将这些贴图应用到BufferGeometry上的方法是创建材质（Material），并将纹理映射到材质属性上。例如，对于`THREE.MeshBasicMaterial`，可以这样设置： ```javascript const material = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('texture.jpg') }); ``` 将材质和几何体结合，创建Mesh对象，并添加到场景中： ```javascript const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` 理解并正确使用three.js中的`position`、`index`和`uv`属性，以及如何加载和应用贴图，是创建动态、丰富的3D场景的关键步骤。通过熟练掌握这些概念和技巧，你可以创造出各种逼真的3D视觉效果。

资源推荐

资源详情

资源评论

收起资源包目录

three-demo.zip （9个子文件）

panorama_b.jpg 41KB

panorama_u.jpg 34KB

panorama_f.jpg 45KB

panorama_d.jpg 40KB

number.png 5KB

index.html 5KB

panorama.jpg 127KB

panorama_l.jpg 37KB

panorama_r.jpg 39KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } </style> <script type="importmap"> { "imports": { "three": "https://unpkg.com/[email protected]/build/three.module.js", "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/" } } </script> </head> <body> <script type="module"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, scene, renderer; //基础对象 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000); camera.position.set(500, 500, 500); camera.updateProjectionMatrix(); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); controls.minDistance = 5; controls.maxDistance = 100000; controls.update() scene = new THREE.Scene(); // 环境光 const light = new THREE.AmbientLight(0x404040); // soft white light scene.add(light); //坐标轴 const axesHelper = new THREE.AxesHelper(5); scene.add(axesHelper); //准备geometry /* y * * * 0 * * * * x * * z 7--------------6 /. /| / . / | / . / | / . / | 2--------------3 | | 5 . . . . |. . 4 | . | / | . | / | . | / |. |/ 0--------------1 */ //点位 let len = 100; //先假设点5 在原点, 然后整体向 (-1,-1,-1) 移动 len/2, 这样就让立方体的中心在原点 var totalPosition = [ [0, 0, len],//0 [len, 0, len],//1 [0, len, len],//2 [len, len, len],//3 [len, 0, 0],//4 [0, 0, 0],//5 [len, len, 0],//6 [0, len, 0],//7 ]; totalPosition.forEach(arr => { arr[0] -= len / 2; arr[1] -= len / 2; arr[2] -= len / 2; }) // 人站在里面向外看 // 注意: // up面是当人面向前,仰头看到的 // down面是当人面向前,低头看到的 let vertices = [ [4, 1, 3, 6], //right [0, 5, 7, 2], //left [7, 6, 3, 2], //up [0, 1, 4, 5], //down [5, 4, 6, 7], //front [1, 0, 2, 3], //back ] //贴图 // // v // (0,1)---------(1,1) // | | // | | // | image | // | | // | | // (0,0)---------(1,0) u // var uv = [ 0, 0, 1, 0, 1, 1, 0, 1, ] //点位序号 var index = [ 0, 1, 2, 0, 2, 3 ] const addMesh = (img, position, index, uv) => { //构造geometry let geometry = new THREE.BufferGeometry(); geometry.setIndex(index); geometry.setAttribute('position', new THREE.Float32BufferAttribute(position, 3)); geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2)); //加载贴图 const texture = new THREE.TextureLoader().load(img); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(1, 1); //准备material const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, map: texture, transparent: true, opacity: 0.7, }); //组成mesh const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); } //全景图切六面图示例 let imgs = ['r', 'l', 'u', 'd', 'f', 'b'].map(i => `panorama_${i}.jpg`); //right addMesh(imgs[0], vertices[0].flatMap(i => totalPosition[i]), index, uv); //left addMesh(imgs[1], vertices[1].flatMap(i => totalPosition[i]), index, uv); //up addMesh(imgs[2], vertices[2].flatMap(i => totalPosition[i]), index, uv); //down addMesh(imgs[3], vertices[3].flatMap(i => totalPosition[i]), index, uv); //front addMesh(imgs[4], vertices[4].flatMap(i => totalPosition[i]), index, uv); //back addMesh(imgs[5], vertices[5].flatMap(i => totalPosition[i]), index, uv); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); </script> </body> </html>

评论收藏

内容反馈