Question

我正在尝试寻找最佳解决方案，以使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, 1, 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, 20, 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);

使用SSR（Node，js next，js）提高Three.js性能

0 个答案: