问题
I am knew to WebGL and Three js having been able to get enough code together to be able to add 25K BoxGeometry Meshes and about 200 models which move simultaneously and interact with the BoxGeometry. I need to be able to move the camera smoothly through these boxes. So, I have tried to merge all the geometry together (got that idea from a google search) and that made the performance worse. I watched several YouTube videos and did not a lot about performance. I am currently using mrdoob-three.js-4bab468 if that helps.
The functions addCube20 addCube40 are called a little over 25,000 times with different coordinates to display at. then they are not called again unless something in the scene alters their position.
MJMotion.js is my keyboard camera view controls that do not need to be included. You can remove them by altering the render section taking out keyboardControls(); updateCamera(); and replacing them with your own controls. this thing gets about 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>
回答1:
I have found the issue. It is the materials. If I use images it slows down to 7 fps. If I use something simple like a MeshNormalMaterial it works at 60fps. Is there any way to rectify this?
来源：https://stackoverflow.com/questions/35853942/three-js-25000-boxgeometry-200-models-how-to-increase-performance