文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在javascript中翻译3D对象

问如何在javascript中翻译3D对象
EN

Stack Overflow用户

提问于 2018-10-06 16:18:12

回答 2查看 225关注 0票数 1

我正在尝试做一个简单的3d对象绕其x轴的旋转。该程序设置片段和顶点着色器以用于WebGl程序中的对象。该程序包含onLoad函数，一旦程序加载到您的web浏览器中，该函数将激活该函数中的所有内容。首先，该函数设置画布，用于保存要使用的一个或多个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();
};

javascript

list

for-loop

rotation

translation

回答 2

Stack Overflow用户

发布于 2018-10-06 17:24:38

使用它：

<!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>

票数 0

Stack Overflow用户

发布于 2018-10-11 11:24:00

您没有使用newList。您的mult函数返回经过修改的新顶点，因此将其放入新数组中是正确的，但是您将未修改的vertices数组传递给gl.bufferSubData。

以下任一项：

与vertices = vertices.map(vert => mult(trans, vert));一样，

就地将您对vertices的其他引用替换为vertices

(我假设您的mult函数来自这个模板：http://ksuweb.kennesaw.edu/~bsetzer/4722fa18/nanoc/output/assignments/4/)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52677099

复制

相似问题

问如何在javascript中翻译3D对象
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在javascript中翻译3D对象EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在javascript中翻译3D对象
EN