Is it possible to create a simple square shape using BufferGeometry? Rather than drawing 120000 triangles, I just want to reduce it to two triangles that form a 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 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;
var colors = geometry.attributes.color.array;
for (var i = 0; i < indices.length; i++) {
indices[i] = i % (3 * 1);
}
for (var i = 0; i < positions.length; i += 9) {
positions[i] = 0;
positions[i + 1] = 0;
positions[i + 2] = 0;
positions[i + 3] = 0;
positions[i + 4] = 1;
positions[i + 5] = 0;
positions[i + 6] = 1;
positions[i + 7] = 0;
positions[i + 8] = 0;
color.setRGB(55, 202, 55);
colors[i] = color.r;
colors[i + 1] = color.g;
colors[i + 2] = color.b;
colors[i + 3] = color.r;
colors[i + 4] = color.g;
colors[i + 5] = color.b;
colors[i + 6] = color.r;
colors[i + 7] = color.g;
colors[i + 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>