javascript - JSON 文件的 WebGl 渲染非常慢，是因为 JSON 文件的大小吗？

Question

我正在尝试使用 json 文件渲染一个非常复杂的模型。 json 文件的大小是 40MB，这是一个巨大的数据，我可以在 Canvas 上渲染模型。

现在的问题是渲染速度非常非常慢。如果我尝试旋转模型或放大，整个浏览器就会挂起，速度太慢了。

因为我是 webgl 的新手，所以我不知道是什么导致了这个问题。环顾四周没有发现任何东西。

影响渲染的是json文件的大小吗？我怎样才能使性能更好？我应该提一下，这不是显卡的问题。 body 浏览器之类的东西非常快。

我正在为此方法使用 three.js jason 加载器

loader = new THREE.JSONLoader();
loader.load( 'file.js', function ( geometry ) {
    geometry.computeVertexNormals();
    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( ) );
    scene.add( mesh );
} );

对于渲染，我在 init 中执行此操作

renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

render函数在animate()中被调用

function animate() {
    requestAnimationFrame( animate );
    render();
    stats.update();
}

在渲染函数中像这样旋转网格

function render() {
    mesh.rotation.x += ( targetXRotation - mesh.rotation.x ) * 0.05;
    mesh.rotation.y += ( targetYRotation - mesh.rotation.y ) * 0.05;
    renderer.render( scene, camera );
}

Answer 1

你将这个问题标记为“webgl”，所以我想你想使用 WebGL 渲染器:

renderer = new THREE.WebGLRenderer();

而不是 Canvas :

renderer = new THREE.CanvasRenderer();