three实现三维空间物体漂浮面彩色动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维空间物体漂浮面彩色动画效果代码
代码标签: three 三维 空间 物体 漂浮 面 彩色 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ overflow: hidden; margin: 0; } </style> </head> <body translate="no"> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/166/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/166/jsm/" } } </script> <script type="module"> import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; console.clear(); class ColorizedInstances extends THREE.InstancedMesh { constructor(geometry, material, amount) { super(geometry, material, amount); this.dummy = new THREE.Object3D(); this.initInstances(); this.faces = geometry.attributes.position.count / 3; let size = this.faces * amount * 4; this.faceColorData = new THREE.DataTexture(new Uint8Array(size).fill(255), this.faces, amount); this.faceColorData.needsUpdate = true; //console.log(this.faceColorData); this.material.onBeforeCompile = shader => { shader.uniforms.faceColorData = { value: this.faceColorData }; shader.vertexShader = ` varying float vIId; varying float vFId; ${shader.vertexShader} `.replace( `#include <uv_vertex>`, ` vIId = float(gl_InstanceID); vFId = floor(float(gl_VertexID) / 3. + 0.1); #include <uv_vertex>`); //console.log(shader.vertexShader); shader.fragmentShader = ` uniform sampler2D faceColorData; varying float vIId; varying float vFId; ${shader.fragmentShader} `.replace( `vec4 diffuseColor = vec4( diffuse, opacity );`, ` int u = int(floor(vFId + 0.1)); int v = int(floor(vIId + 0.1)); vec3 fColor = texelFetch(faceColorData, ivec2(u, v), 0).rgb; vec4 diffuseColor = vec4( diffuse * fColor, opacity );`); //console.l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0