凡科建设网站还用买服务器吗,用什么做网站好,深圳市房屋管理局官网,珠宝钻石网站建站矩阵库
手写矩阵#xff0c;其实很麻烦#xff0c;可以将其模块化市面上已经有许多开源的矩阵库 比如《WebGL 编程指南》里的 cuon-matrix.jsthree.js 的 Matrix3 和 Matrix4 对象
three.js的 Matrix4 对象的用法
1 #xff09;核心代码 1.引入Matrix4对象 import { Mat…矩阵库
手写矩阵其实很麻烦可以将其模块化市面上已经有许多开源的矩阵库 比如《WebGL 编程指南》里的 cuon-matrix.jsthree.js 的 Matrix3 和 Matrix4 对象
three.js的 Matrix4 对象的用法
1 核心代码 1.引入Matrix4对象 import { Matrix4 } from https://unpkg.com/three/build/three.module.js;2.实例化矩阵对象在其中写入旋转信息 const matrix new Matrix4()
matrix.makeRotationZ(Math.PI/6)3.基于matrix 对象的elements 属性修改uniform 变量 const u_Matrixgl.getUniformLocation(gl.program,u_Matrix)
gl.uniformMatrix4fv(u_Matrix,false,matrix.elements)2 完整代码
canvas idcanvas/canvas
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;// 列主序uniform mat4 u_Matrix;void main() {gl_Position u_Matrix * a_Position;}
/script
script idfragmentShader typex-shader/x-fragmentvoid main() {gl_FragColor vec4(1.0, 1.0, 0.0, 1.0);}
/script
script typemoduleimport { initShaders } from ./utils.js;import { Matrix4 } from https://unpkg.com/three/build/three.module.js;const canvas document.getElementById(canvas);canvas.width window.innerWidth;canvas.height window.innerHeight;const gl canvas.getContext(webgl);const vsSource document.getElementById(vertexShader).innerText;const fsSource document.getElementById(fragmentShader).innerText;initShaders(gl, vsSource, fsSource);const vertices new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1]);const vertexBuffer gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position gl.getAttribLocation(gl.program, a_Position);gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);const u_Matrix gl.getUniformLocation(gl.program, u_Matrix);let angle 0.1;const m4 new Matrix4();m4.makeRotationZ(angle);gl.uniformMatrix4fv(u_Matrix, false, m4.elements);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);!(function animate() {angle 0.05;m4.makeRotationZ(angle);gl.uniformMatrix4fv(u_Matrix, false, m4.elements);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate);})()
/script
