Javascript 三款js 25000 BoxGeometry 200型号如何提高性能
据我所知，WebGL和三个js已经能够获得足够的代码，能够添加25K BoxGeometry网格和大约200个模型，这些模型可以同时移动并与BoxGeometry交互。 我需要能够通过这些盒子平稳地移动相机。 因此，我尝试将所有几何体合并在一起（这是从谷歌搜索中得到的想法），这使得性能更差。 我看了好几段YouTube视频，对表演没有太多了解。 如果有帮助的话，我目前正在使用mrdoob-three.js-4bab468 函数addCube20 addCube40的调用次数略多于25000次，显示的坐标不同。 然后，除非场景中有什么东西改变了它们的位置，否则不会再次调用它们 MJMotion.js是我的键盘相机视图控件，不需要包括在内。可以通过修改渲染部分来删除它们 键盘控件（）； updateCamera（）； 并用您自己的控件替换它们。 这东西的速度大约是3帧Javascript 三款js 25000 BoxGeometry 200型号如何提高性能,javascript,performance,three.js,Javascript,Performance,Three.js,据我所知，WebGL和三个js已经能够获得足够的代码，能够添加25K BoxGeometry网格和大约200个模型，这些模型可以同时移动并与BoxGeometry交互。 我需要能够通过这些盒子平稳地移动相机。 因此，我尝试将所有几何体合并在一起（这是从谷歌搜索中得到的想法），这使得性能更差。 我看了好几段YouTube视频，对表演没有太多了解。 如果有帮助的话，我目前正在使用mrdoob-three.js-4bab468 函数addCube20 addCube40的调用次数略多于25000次，显
<!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>
立方测试
身体{
保证金：0；
}
var pageE；
//我们的Javascript将放在这里。
var-domContainer=null；
domContainer=document.getElementById（“canvas_容器”）；
统计数据=新统计数据（）；
stats.domElement.style.position='绝对'；
stats.domElement.style.top='0px'；
stats.domElement.style.zIndex=100；
domContainer.appendChild（stats.domeElement）；
var摄像机=新的三透视摄像机（30，window.innerWidth/window.innerHeight，0.1500.0）；
var aspectratio=window.innerWidth/window.innerHeight；
var renderer=new THREE.WebGLRenderer（）；
var=false；
var SaveAUseB=true；
var UpdateCount=0；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.cullFace=3.CullFaceFrontBack；
renderer.gammaInput=true；
renderer.gammaOutput=true；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
appendChild（renderer.doElement）；
var相交；
var mouse=new THREE.Vector2（）；
var raycaster=new THREE.raycaster（）；
var scene=new THREE.scene（）；
var objects=[]，平面；
var mouseDown=0；
场景。添加（摄影机）；
scene.fog=新的3.fog（0xaaccff，10150）；
addEventListener（'resize'，resize，false）；
var mouseX=0，mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
renderer.domeElement.addEventListener（'mousewheel'，onMouseWheel，false）；
renderer.doElement.addEventListener（'touchstart'，touchstart，false）；
renderer.doElement.addEventListener（'touchend'，touchend，false）；
renderer.doElement.addEventListener（'touchmove'，touchmove，false）；
//这必须在MJMotion.js之前定义
//我们在那里用它。
var ScenesizerEducation=100.0；
//在MJMotion.js中定义
设置屏幕还原（场景还原）；
var方向光=新的三个方向光（0xffffff，0.15）；
方向灯。位置。设置（-100/场景教育，1000/场景教育，2000/场景教育）；
场景。添加（方向光）；
var hemiLight=新的三个半球光（0xAAAAAA，0x080808，0.25）；
半光。位置。设置（0，500/场景导出，0）；
场景。添加（半光）；
var dirLight=新的三方向光（0xffffff，0）；
dirLight.color.setHSL（0.1,1,0.95）；
dirLight.position.set（-1,1.75,1）；
直射位置多重标度（50）；
场景。添加（dirLight）；
dirLight.castShadow=true；
dirLight.shadowMapWidth=2048；
dirLight.shadowmapeight=2048；
var d=150；
dirLight.shadowCameraLeft=-d；
dirLight.shadowCameraRight=d；
dirLight.shadowCameraTop=d；
dirLight.shadowCameraBottom=-d；
dirLight.shadowCameraFar=3500；
dirLight.shadowBias=-0.00005；
//百分之五十
var pixelsperfoot=2.0/scenesizereducation；
var GroundWidth=30346/场景导出；
var接地长度=6001/scenesizereduction；
var xoffset=（groundidth/2.0）-（87.0390550000001*pixelsperfoot）；
var zoffset=（GroundLength/2.0）-（607.80843*pixelsperfoot）；
var textures20Geometry=新的三个.BoxGeometry（20*像素点，9.5*像素点，8.0*像素点）；
var textures40Geometry=新的三个.BoxGeometry（40*像素点，9.5*像素点，8.0*像素点）；
var Cube20网格=新的三网格（纹理20几何体）；
var cube40网格=新的三网格（纹理40几何体）；
var CubeGeometry=新的3.Geometry（）；
var cubeMaterial1=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube01.png'）
});
var cubeMaterial2=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube02.png'）
});
var cubeMaterial3=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube03.png'）
});
var cubeMaterial4=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube04.png'））
});
var cubeMaterial5=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube05.png'））
});
var cubeMaterial6=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube06.png'）
});
var cubeMaterial7=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube07.png'）
});
var cubeMaterial8=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube08.png'）
});
var cubeMaterial9=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube09.png'））
});
var cubeMaterial10=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'textures/cube10.png'）
});
var cubeMaterial11=新的3.0网格LambertMaterial({
地图：三