当前位置：首页 > news >正文

07.three官方示例+编辑器+AI快速学习webgl_buffergeometry_attributes_integer

news 2025/5/14 8:25:30

本实例主要讲解内容

这个Three.js示例展示了WebGL 2环境下的整数属性渲染技术。通过创建大量随机分布的三角形，并为每个三角形分配不同的整数索引，实现了基于索引动态选择纹理的效果。

核心技术包括：

WebGL 2环境下的整数属性支持
顶点着色器与片段着色器中的整数变量传递
多纹理动态切换
几何体与材质的自定义着色器实现

在这里插入图片描述

完整代码注释

<!DOCTYPE html>
<html lang="en"><head><title>three.js WebGL 2 - buffergeometry - integer attributes</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"></head><body><div id="container"></div><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGL 2 - buffergeometry - integer attributes</div><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';let camera, scene, renderer, mesh;init();function init() {// 初始化相机camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );camera.position.z = 2500;// 初始化场景scene = new THREE.Scene();scene.background = new THREE.Color( 0x050505 );scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );// 创建几何体const triangles = 10000; // 三角形数量const geometry = new THREE.BufferGeometry();// 存储顶点位置、UV坐标和纹理索引const positions = [];const uvs = [];const textureIndices = [];// 三角形分布范围和大小const n = 800, n2 = n / 2; // 三角形分布的立方体范围const d = 50, d2 = d / 2; // 单个三角形的大小// 生成随机三角形for ( let i = 0; i < triangles; i ++ ) {// 随机位置const x = Math.random() * n - n2;const y = Math.random() * n - n2;const z = Math.random() * n - n2;// 三角形的三个顶点const ax = x + Math.random() * d - d2;const ay = y + Math.random() * d - d2;const az = z + Math.random() * d - d2;const bx = x + Math.random() * d - d2;const by = y + Math.random() * d - d2;const bz = z + Math.random() * d - d2;const cx = x + Math.random() * d - d2;const cy = y + Math.random() * d - d2;const cz = z + Math.random() * d - d2;// 添加顶点位置positions.push( ax, ay, az );positions.push( bx, by, bz );positions.push( cx, cy, cz );// 添加UV坐标uvs.push( 0, 0 );uvs.push( 0.5, 1 );uvs.push( 1, 0 );// 添加纹理索引（0,1,2 循环）const t = i % 3;textureIndices.push( t, t, t );}// 设置几何体属性geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );geometry.setAttribute( 'textureIndex', new THREE.Int16BufferAttribute( textureIndices, 1 ) );geometry.attributes.textureIndex.gpuType = THREE.IntType; // 指定GPU使用整数类型geometry.computeBoundingSphere(); // 计算边界球体// 加载纹理const loader = new THREE.TextureLoader();const map1 = loader.load( 'textures/crate.gif' );const map2 = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );const map3 = loader.load( 'textures/terrain/grasslight-big.jpg' );// 创建自定义着色器材质const material = new THREE.ShaderMaterial( {uniforms: {uTextures: {value: [ map1, map2, map3 ] // 纹理数组}},vertexShader: /* glsl */`in int textureIndex; // 从几何体传入的纹理索引（整数）flat out int vIndex; // "flat" 表示不进行插值（整数属性必须）out vec2 vUv; // UV坐标void main()	{vIndex = textureIndex;vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}`,fragmentShader: /* glsl */`flat in int vIndex; // 从顶点着色器传入的纹理索引in vec2 vUv; // UV坐标uniform sampler2D uTextures[ 3 ]; // 纹理数组out vec4 outColor; // 输出颜色void main()	{// 根据索引选择不同的纹理if ( vIndex == 0 ) outColor = texture( uTextures[ 0 ], vUv );else if ( vIndex == 1 ) outColor = texture( uTextures[ 1 ], vUv );else if ( vIndex == 2 ) outColor = texture( uTextures[ 2 ], vUv );}`,side: THREE.DoubleSide, // 双面渲染glslVersion: THREE.GLSL3 // 使用GLSL 3.0} );// 创建网格并添加到场景mesh = new THREE.Mesh( geometry, material );scene.add( mesh );// 初始化渲染器（必须支持WebGL 2）renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animate );document.body.appendChild( renderer.domElement );}// 动画循环function animate() {const time = Date.now() * 0.001;// 旋转网格mesh.rotation.x = time * 0.25;mesh.rotation.y = time * 0.5;renderer.render( scene, camera );}</script></body>
</html>