how can draw simple square using buffergeometry? example buffergeometry draws 120000 triangles , want knock down 2 form simple square.
<html> <head> <title>test app</title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <script src="three.min.js"></script> <script> var scene = new three.scene(); var camera = new three.perspectivecamera(75, window.innerwidth/window.innerheight, 0.1, 1000); var renderer = new three.webglrenderer(); renderer.setsize(window.innerwidth, window.innerheight); document.body.appendchild(renderer.domelement); //var geometry = new three.cubegeometry(1,1,1); var triangles = 2; var geometry = new three.buffergeometry(); geometry.attributes = { index: { itemsize: 1, array: new uint16array( triangles * 3 ), numitems: triangles * 3 }, position: { itemsize: 3, array: new float32array( triangles * 3 * 3 ), numitems: triangles * 3 * 3 }, normal: { itemsize: 3, array: new float32array( triangles * 3 * 3 ), numitems: triangles * 3 * 3 }, color: { itemsize: 3, array: new float32array( triangles * 3 * 3 ), numitems: triangles * 3 * 3 } } var color = new three.color(); var indices = geometry.attributes.index.array; var positions = geometry.attributes.position.array; var normals = geometry.attributes.normal.array; //not setting normals - relevant if there no light defined? var colors = geometry.attributes.color.array; ( var = 0; < indices.length; ++ ) { indices[ ] = % ( 3 * 1 ); // how set indices???? } ( var = 0; < positions.length; += 9 ) { //i know these make 2 triangles @ same position, want see them appear first.. positions[ ] = 0; positions[ + 1 ] = 0; positions[ + 2 ] = 0; positions[ + 3 ] = 0; positions[ + 4 ] = 1; positions[ + 5 ] = 0; positions[ + 6 ] = 1; positions[ + 7 ] = 0; positions[ + 8 ] = 0; color.setrgb( 55, 202, 55 ); colors[ ] = color.r; colors[ + 1 ] = color.g; colors[ + 2 ] = color.b; colors[ + 3 ] = color.r; colors[ + 4 ] = color.g; colors[ + 5 ] = color.b; colors[ + 6 ] = color.r; colors[ + 7 ] = color.g; colors[ + 8 ] = color.b; } var material = new three.meshbasicmaterial({color: 0x00ff00}); var square = new three.mesh(geometry, material); scene.add(square); camera.position.z = -5; var render = function () { requestanimationframe(render); square.rotation.x += 0.1; square.rotation.y += 0.1; renderer.render(scene, camera); }; render(); </script> </body>
here solution problems: since camera near , far view between 0.1 , 1000
var camera = new three.perspectivecamera(75, window.innerwidth/window.innerheight, 0.1, 1000); then vertices z position must in between range. therefore, please change code
positions[ + 2 ] = 0; to
positions[ + 2 ] = 1; also, code seem missing these parts:
geometry.addattribute( 'index', new three.bufferattribute( indices, 3 ) ); geometry.addattribute( 'color', new three.bufferattribute( colors, 3 ) ); geometry.addattribute( 'position', new three.bufferattribute( positions, 3 ) ); for full fixed code, please refer here: http://learn-daily.com/three-js-drawing-flying-triangle-using-buffergeometry/
Comments
Post a Comment