Question

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

现在问题是渲染非常缓慢。如果我尝试旋转模型或放大，整个浏览器挂起，它是如此缓慢。

由于我是webgl的新手，我不知道是什么导致了这个问题。看着周围没找到任何东西。

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

我正在使用three.js jason loader来实现此方法

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 );

在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();

而不是画布一：

renderer = new THREE.CanvasRenderer();

Answer 2

它可能取决于您的40meg文件的结构。有多少个别型号？模型越多，它就越慢。

模特我的意思是什么？

好吧，如果你进入你最喜欢的建模包并制作2个球体你有2个模型。如果你制作1000个球体，让我们说每个1000个多边形并导出它可能会运行缓慢。但是如果你发现如何将1000个球体模型折叠成1000个球体的单个模型并再次导出，它可能会快速运行。

绘制1件大事通常比绘制1000件小事更快。

使用JSON文件的WebGl渲染速度非常慢，是不是因为JSON文件的大小？

2 个答案: