[英]How to translate a 3D object in javascript
我正在嘗試繞其x軸簡單地旋轉3d對象。 該程序設置一個片段和頂點着色器,以用於WebGl程序中的對象。 該程序包含onLoad函數,一旦將其加載到Web瀏覽器中,該函數就會激活函數中的所有內容。 首先,該功能設置要用於保存3D對象或多個3D對象的畫布。 然后創建要轉換的3D塊對象,默認情況下將其設置為原點。 我正在創建一個新列表,並用舊列表中的所有向量填充它,同時還將轉換應用於每個向量。 我相信我的問題在於嘗試將翻譯應用於每個向量的for循環。
const vertex_shader = `
attribute vec4 vPosition;
attribute vec4 vColor;
uniform mat4 transform;
varying vec4 fColor;
void main()
{
gl_Position = transform * vPosition;
fColor = vColor;
gl_PointSize = 10.0;
}`;
const fragment_shader = `
precision mediump float;
varying vec4 fColor;
void main()
{
gl_FragColor = fColor;
}`;
let params = {
transform: mat4(),
transformLoc: undefined,
maxVertices: 7000,
colors: undefined
};
function params_setup(gl, program) {
params.transformLoc = gl.getUniformLocation(program, "transform");
gl.uniformMatrix4fv(params.transformLoc, false, flatten(params.transform));
// params.bands = 5;
// params.sides = 10;
}
window.onload = function init()
{
const lg = noLogging("Firebrick");
lg.insertAtEnd = false;
let canvas = document.getElementById( "gl-canvas" );
let gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.enable(gl.DEPTH_TEST);
// gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);
//
// Configure WebGL
//
gl.viewport( 0, 0, canvas.width, canvas.height );
X11.clearColor(gl, X11.AliceBlue);
// Load shaders and initialize attribute buffers
let program = initShaders( gl, vertex_shader, fragment_shader);
gl.useProgram( program );
params_setup(gl, program);
//creates the block object that will be transformed
let blk = new cs4722_objects.Block();
blk.height = .75;
blk.width = .5;
blk.depth = .25;
let vertices = blk.points;
let colors = blk.color_scheme;
let trans = rotateX(45);
// modify vertices using the transformation here
let newList = [];
//I believe my problem resides in this for loop here
for(var i = 0; i < vertices.length; i++)
{
newList.push(mult(trans, vertices[i]));
}
//to here
let bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, 16*params.maxVertices, gl.STATIC_DRAW );
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(vertices));
// Associate out shader variables with our data buffer
let vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
let cBufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBufferId );
gl.bufferData( gl.ARRAY_BUFFER, 16*params.maxVertices, gl.STATIC_DRAW );
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(colors));
let vColor = gl.getAttribLocation( program, "vColor" );
// four color components per color
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );
function render() {
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays( gl.TRIANGLES, 0, vertices.length);
};
render();
};
用它:
<!DOCTYPE html> <html> <head> <style> #myDIV { margin: auto; border: 1px solid black; width: 200px; height: 100px; background-color: coral; color: white; } </style> </head> <body> <p>Click the "Try it" button to rotate the DIV element:</p> <button onclick="myFunction()">Try it</button> <div id="myDIV"> <h1>myDIV</h1> </div> <script> function myFunction() { // Code for Safari document.getElementById("myDIV").style.WebkitTransform = "rotate(20deg)"; // Code for IE9 document.getElementById("myDIV").style.msTransform = "rotate(20deg)"; // Standard syntax document.getElementById("myDIV").style.transform = "rotate(20deg)"; } </script> <p><b>Note:</b> Internet Explorer 9 supports an alternative, the msTransform property. Newer versions of IE and Edge support the transform property (do not need the ms prefix).</p> <p><b>Note:</b> Safari supports an alternative, the WebkitTransform property.</p> </body> </html>
您沒有使用newList
。 您的mult
函數返回經過修改的新頂點,因此將其放置在新數組中是正確的,但是您gl.bufferSubData
未修改的vertices
數組傳遞給gl.bufferSubData
。
要么:
newList
替換對vertices
的其他引用 vertices = vertices.map(vert => mult(trans, vert));
這樣就地修改vertices
vertices = vertices.map(vert => mult(trans, vert));
(我假設您的mult
功能來自此模板: http : //ksuweb.kennesaw.edu/~bsetzer/4722fa18/nanoc/output/assignments/4/ )
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.