我正在尝试寻找最佳解决方案，以使Three.js的性能得到改善。
我想问一个在服务器端渲染中尝试过Three.js的人，以及
性能提高。
我的three.js项目在场景中包含5个glb文件。每个文件大约1MB。
到目前为止，我已经改善了。
-
速度索引优先
-
有意义的绘画
使用webpack
**缩小所有JavaScript并将其包含到一个文件中。
**对所有纹理使用下一代图像wep。
**能够将gzip压缩到我的服务器上
此外，为了提高加载速度，而不是在一开始就加载所有5个glb模型， 首先加载1或2，然后在用户需要时加载其余模型。
减少风扇的声音（CPU原因）
我只为用户互动设置了动画
window.addEventListener("wheel",function(e) {
animate();
},true);
var scene,renderer,camera,model,mixer;
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 30,window.innerWidth / window.innerHeight,1,1000 );
camera.position.set( 1,2,- 3 );
camera.lookAt( 0,0 );
clock = new THREE.Clock();
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0,10,50 );
var hemiLight = new THREE.HemisphereLight( 0xffffff,'rgb(100,100,100)' );
hemiLight.position.set( 0,20,0 );
scene.add( hemiLight );
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000,2000 ),new THREE.MeshPhongMaterial( { color: 0x999999,depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
var grid = new THREE.GridHelper( 2000,0x000000,0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
var textload = new THREE.TextureLoader();
var text = textload.load( require('./material/text.jpg') );
//text.jpg = 80kb;
text.flipY = false;
var textloadbbump = new THREE.TextureLoader();
var textbump = textloadbbump.load( require('./material/textbump.jpg') );
//textbump.jpg = 50kb;
textbump.flipY = false;
var loader = new GLTFLoader();
//character.glb is 1.1MB
loader.load( require('./material/character.glb'),function ( gltf ) {
model = gltf.scene;
model.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.roughness = 1;
if(child.name=='body'){
child.material.map = text;
child.material.bumpMap = textbump;
child.material.bumpScale = 0.001;
}
}});
scene.add( model );
mixer = new THREE.Animationmixer( model );
mixer.clipaction( gltf.animations[ 0 ] ).play();
});
renderer = new THREE.WebGLRenderer( {
// antialias: true
powerPreference: 'low-power',//precision: 'lowp'
} );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth,window.innerHeight );
renderer.shadowMap.enabled = false;
container.appendChild( renderer.domElement );
}
window.onresize = function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionmatrix();
renderer.setSize( window.innerWidth,window.innerHeight );
};
init();
window.addEventListener("wheel",function(e) {
requestAnimationFrame( animate );
renderer.render( scene,camera );
},true);