在threejs中用缓冲类型几何体随机生成三角形在一个正方体内漂浮

首先，我们需要创建一个正方体的缓冲类型几何体：

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );

然后，我们需要创建一个数组来存储三角形的顶点数据：

var positions = [];

接着，我们可以使用一个循环来生成一些随机的三角形顶点数据。我们可以使用Math.random()函数来随机生成顶点坐标。

for ( var i = 0; i < 100; i ++ ) {
  var x = Math.random() * 2 - 1;
  var y = Math.random() * 2 - 1;
  var z = Math.random() * 2 - 1;

  // 三角形的三个顶点
  var a = new THREE.Vector3( x, y, z );
  var b = new THREE.Vector3( x + 0.1, y + 0.1, z + 0.1 );
  var c = new THREE.Vector3( x - 0.1, y - 0.1, z - 0.1 );

  // 将三角形的顶点坐标添加到数组中
  positions.push( a.x, a.y, a.z );
  positions.push( b.x, b.y, b.z );
  positions.push( c.x, c.y, c.z );
}

最后，我们需要将顶点数据绑定到几何体上，并创建一个网格对象来显示它：

var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

完整的代码如下：

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.BoxBufferGeometry( 1, 1, 1 );

var positions = [];

for ( var i = 0; i < 100; i ++ ) {
  var x = Math.random() * 2 - 1;
  var y = Math.random() * 2 - 1;
  var z = Math.random() * 2 - 1;

  var a = new THREE.Vector3( x, y, z );
  var b = new THREE.Vector3( x + 0.1, y + 0.1, z + 0.1 );
  var c = new THREE.Vector3( x - 0.1, y - 0.1, z - 0.1 );

  positions.push( a.x, a.y, a.z );
  positions.push( b.x, b.y, b.z );
  positions.push( c.x, c.y, c.z );
}

var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

camera.position.z = 5;

function animate() {
  requestAnimationFrame( animate );
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  renderer.render( scene, camera );
}
animate();