Question

我知道WebGL和三个j已经能够获得足够的代码，能够添加25K BoxGeometry网格和大约200个同时移动并与BoxGeometry交互的模型。我需要能够通过这些盒子顺利移动相机。所以，我试图将所有几何图形合并在一起（从谷歌搜索中得到这个想法），这使得性能变差。我观看了几个YouTube视频，并没有太多关于性能的信息。我目前正在使用mrdoob-three.js-4bab468如果有帮助的话。

addCube20 addCube40函数调用次数超过25,000次，显示的坐标不同。然后他们不再被召唤，除非场景中的某些东西改变他们的位置。

MJMotion.js是我不需要包含的键盘相机视图控件。您可以通过更改渲染部分取出它们来删除它们 keyboardControls（）; updateCamera（）; 并用你自己的控件替换它们。这个东西大约3 fps。

<!DOCTYPE html>
<html>
<head>
 <meta charset=utf-8>
 <meta name="viewport" content="width=device-width, minimum-scale=1.0">
 <title>CubeTest</title>
 <style>
  body {
   margin: 0;
  }
 </style>

 <script>
        var pageE;
 </script>
</head>

<body style="touch-action:none">




 <div id="canvas_container" style="position: absolute; left:0px; top:0px; touch-action:pan-y;"></div>


 <script src="js/three.js"></script>
 <script src="js/Cache.js"></script>
 <script src="js/DDSLoader.js"></script>
 <script src="js/MTLLoader.js"></script>
 <script src="js/OBJMTLLoader.js"></script>
 <script src="js/OBJLoader.js"></script>
 <script src="js/XHRLoader.js"></script>
 <script src="js/LoadingManager.js"></script>
 <script src="js/JSONLoader.js"></script>
 <script src="js/MJMotion.js"></script>
 <script src="js/stats.min.js"></script>


 <script>
    // Our Javascript will go here.
var domContainer = null;
domContainer = document.getElementById("canvas_container");
        stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.zIndex = 100;
            domContainer.appendChild( stats.domElement );


var camera = new THREE.PerspectiveCamera( 30, window.innerWidth/window.innerHeight, 0.1, 500.0);


var aspectratio = window.innerWidth/window.innerHeight;
var renderer = new THREE.WebGLRenderer();
var connected = false;
var SaveAUseB = true;
var UpdateCount = 0;

renderer.setSize(window.innerWidth, window.innerHeight);
         renderer.shadowMap.cullFace = THREE.CullFaceFrontBack;
renderer.gammaInput = true;
renderer.gammaOutput = true;

         renderer.shadowMap.enabled = true;
         renderer.shadowMap.type = THREE.PCFSoftShadowMap;

domContainer.appendChild( renderer.domElement );
var INTERSECTED;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();

var scene = new THREE.Scene();
var objects = [], plane;
var mouseDown = 0;
scene.add(camera);
scene.fog = new THREE.Fog( 0xaaccff,10,150);


window.addEventListener('resize', resize, false);


         var mouseX = 0, mouseY = 0;

        var windowHalfX = window.innerWidth / 2;
         var windowHalfY = window.innerHeight / 2;


    renderer.domElement.addEventListener('mousewheel',onMouseWheel, false);
    renderer.domElement.addEventListener( 'touchstart',touchstart, false );
    renderer.domElement.addEventListener( 'touchend', touchend, false );
    renderer.domElement.addEventListener('touchmove', touchmove, false);

    // this  must be defined before MJMotion.js
    // we use it in there.
    var scenesizereduction = 100.0;

    // defined in MJMotion.js
    SetScreenReduction(scenesizereduction);

   var directionalLight = new THREE.DirectionalLight(0xffffff, 0.15);

    directionalLight.position.set(-100/scenesizereduction, 1000/scenesizereduction,2000/scenesizereduction);
    scene.add(directionalLight);



  var hemiLight = new THREE.HemisphereLight(0xAAAAAA, 0x080808, 0.25);
  hemiLight.position.set(0, 500/scenesizereduction, 0);
  scene.add(hemiLight);


  var  dirLight = new THREE.DirectionalLight( 0xffffff, 0 );
              dirLight.color.setHSL( 0.1, 1, 0.95 );
              dirLight.position.set( -1, 1.75, 1 );
              dirLight.position.multiplyScalar( 50 );
              scene.add( dirLight );

              dirLight.castShadow = true;

              dirLight.shadowMapWidth = 2048;
              dirLight.shadowMapHeight = 2048;

              var d = 150;

              dirLight.shadowCameraLeft = -d;
              dirLight.shadowCameraRight = d;
              dirLight.shadowCameraTop = d;
              dirLight.shadowCameraBottom = -d;

              dirLight.shadowCameraFar = 3500;
              dirLight.shadowBias = -0.00005;




  // 50 perccent
    var pixelsperfoot = 2.0 / scenesizereduction;
   var GroundWidth = 30346/scenesizereduction;
   var GroundLength = 6001/scenesizereduction;
   var xoffset = (GroundWidth / 2.0) - (87.0390550000001 * pixelsperfoot);
   var zoffset = (GroundLength/2.0) - (607.80843 * pixelsperfoot);


var textures20Geometry = new THREE.BoxGeometry(20 * pixelsperfoot, 9.5 * pixelsperfoot, 8.0 * pixelsperfoot);
var textures40Geometry = new THREE.BoxGeometry(40 * pixelsperfoot, 9.5 * pixelsperfoot, 8.0 * pixelsperfoot);
var Cube20Mesh= new THREE.Mesh( textures20Geometry);
var Cube40Mesh= new THREE.Mesh(textures40Geometry);
var CubeGeometry = new THREE.Geometry();


var cubeMaterial1 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube01.png')
});

var cubeMaterial2 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube02.png')
});

var cubeMaterial3 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube03.png')
});

var cubeMaterial4 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube04.png')
});

var cubeMaterial5 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube05.png')
});

var cubeMaterial6 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube06.png')
});

var cubeMaterial7 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube07.png')
});

var cubeMaterial8 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube08.png')
});

var cubeMaterial9 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube09.png')
});

var cubeMaterial10 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube10.png')
});

var cubeMaterial11 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube11.png')
});

var cubeMaterial12 = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('textures/cube12.png')
});



for(var i = 0; i < 2500; i++)
 {

  addCube20("cube" + i, Math.random() * 800 - 400,Math.random() * 800 - 400,Math.random() * 2 * Math.PI,1);

  addCube40("cube" + i, Math.random() * 800 - 400,Math.random() * 800 - 400,Math.random() * 2 * Math.PI,1);
 }

DisplayCubes();


function addCube20(name, x1,z1,azimuth,MaterialIndex)
 {
  Cube20Mesh.position.set(x1, ((0.5 + 4.25) * pixelsperfoot) + ((MaterialIndex - 1) * (9.5 * pixelsperfoot)), z1);
 Cube20Mesh.rotation.y = (Math.PI / 180.0) * azimuth;
 Cube20Mesh.name = name;
 Cube20Mesh.updateMatrix();
 CubeGeometry.merge(Cube20Mesh.geometry, Cube20Mesh.matrix,MaterialIndex);
 };


function addCube40(name, x1,z1,azimuth,MaterialIndex)
{
 Cube40Mesh.position.set(x1, ((0.5 + 4.25) * pixelsperfoot) + ((MaterialIndex - 1) * (9.5 * pixelsperfoot)), z1);
 Cube40Mesh.rotation.y = (Math.PI / 180.0) * azimuth;
 Cube40Mesh.name = name;
 Cube40Mesh.updateMatrix();
 CubeGeometry.merge(Cube40Mesh.geometry, Cube40Mesh.matrix, MaterialIndex);
 };



function DisplayCubes()
 {
  var CubeMaterials = [];

CubeMaterials.push(cubeMaterial1);
CubeMaterials.push(cubeMaterial2);
CubeMaterials.push(cubeMaterial3);
CubeMaterials.push(cubeMaterial4);
CubeMaterials.push(cubeMaterial5);
CubeMaterials.push(cubeMaterial6);
CubeMaterials.push(cubeMaterial7);
CubeMaterials.push(cubeMaterial8);
CubeMaterials.push(cubeMaterial9);
CubeMaterials.push(cubeMaterial10);
CubeMaterials.push(cubeMaterial11);
CubeMaterials.push(cubeMaterial12);

var CubeGroup = new THREE.Mesh(CubeGeometry, new THREE.MeshFaceMaterial(CubeMaterials));
CubeGroup.matrixAutoUpdate = false;
CubeGroup.updateMatrix();
scene.add(CubeGroup);

};




function resize()
 {
  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
 };


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



function render()
 {
  keyboardControls();
  updateCamera()
  renderer.render(scene, camera);
 };


 animate();


</script>

Answer 1

我找到了这个问题。这是材料。如果我使用图像，它会减慢到7 fps。如果我使用像MeshNormalMaterial这样简单的东西，它的工作速度为60fps。有没有办法纠正这个问题？

三个js 25000 BoxGeometry 200模型如何提高性能

1 个答案: