如何使用 BufferGeometry 绘制简单的正方形？例如，BufferGeometry 绘制了 120000 个三 Angular 形，我想将其减少为两个，形成一个简单的正方形。
<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 - is it relevant if there is no light defined?
var colors = geometry.attributes.color.array;
for ( var i = 0; i < indices.length; i ++ ) {
indices[ i ] = i % ( 3 * 1 ); // How to set indices????
}
for ( var i = 0; i < positions.length; i += 9 ) {
//I know these will make two triangles at same position, but i want to see them appear first..
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>
最佳答案
在最新的三个js版本中，您无法像@calvin-sydney在他的答案中所写的那样设置索引。您必须使用 THREE.BufferGeometry 中的 setIndex 方法。
geometry.addAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2));
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
geometry.addAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
geometry.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );
关于javascript - 如何使用 BufferGeometry 绘制简单的正方形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17599501/