threejs引入stats.js随机创建大量的模型,测试渲染性能

引入性能监视器stats.js,显示帧率

import Stats from 'three/addons/libs/stats.module.js';

创建stats对象

const stats = new Stats();

Stats.domElement:web页面上输出计算结果,一个div元素

document.body.appendChild(stats.domElement);

随机创建大量的模型,测试渲染性能

const num = 1000; //控制长方体模型数量，你可以一直增加或减少看看帧率变化，电脑性能不同结果不同
for (let i = 0; i < num; i++) {
    const geometry = new THREE.BoxGeometry(5, 5, 5);
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff
    });
    const mesh = new THREE.Mesh(geometry, material);
    // 随机生成长方体xyz坐标
    const x = (Math.random() - 0.5) * 200
    const y = (Math.random() - 0.5) * 200
    const z = (Math.random() - 0.5) * 200
    mesh.position.set(x, y, z)
    scene.add(mesh); // 模型对象插入场景中
}