这是＆＃34; three.js webgl相机的一个小修改版本。＆＃34; （从例子中得到） 我已经为未来的画布创建了一个包装div，并且创建了一个＆＃39; three_webgl＆＃39;实例。 （我为新的three_webgl创建了一个实例，它是作为对象实例化的原始函数。）
正如您所看到的，有两个按钮用于创建实例和动画，另一个按钮用于停止动画并删除实例。 我有一个＆＃39;停止＆＃39;在动画循环中控制。
此外，我还增加了pointcloud（100 000）的点数来衡量内存花费。
我遇到的问题是删除工作正常，但我留下10 000 KB＆＃39;丢失＆＃39; 你可以玩create-start / stop-delete，你可以看到内存的增长和增长。
我的问题是如何正确删除三个环境和数据。目标是避免内存泄漏。
我使用的是日期分别为12月05日，Chrome 34.0和Windows XP的开发分支。
这是代码。 （可能需要更改三个和统计数据的树路径。）
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - cameras</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #808080;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index: 100;
}
a {
color: #0080ff;
}
b { color: lightgreen }
#stats { position: absolute; top:0; left: 0 }
#stats #fps { background: transparent !important }
#stats #fps #fpsText { color: #777 !important }
#stats #fps #fpsGraph { display: none }
#apDiv1 {
position: absolute;
width: 652px;
height: 376px;
z-index: 101;
left: 54px;
top: 95px;
border: 1px solid white;
}
#apDiv2 {
position: absolute;
width: 655px;
height: 80px;
z-index: 102;
left: 53px;
top: 490px;
border: 1px red solid;
}
#apDiv3 {
position: absolute;
width: 200px;
height: 34px;
z-index: 103;
left: 54px;
top: 52px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - cameras<br/>
<b>O</b> orthographic <b>P</b> perspective
</div>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">
<input type="submit" name="b1" id="b1" value="crete-start" onClick="new_webgl()">
<input type="submit" name="b2" id="b2" value="stop-delete" onClick="del_webgl()">
</div>
<script src="tree/build/three.js"></script>
<script src="tree/examples/js/libs/stats.min.js"></script>
<script>
var webgl_true;
try
{ var canvas = document.createElement( 'canvas' );
webgl_true = !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); }
catch( e ) { webgl_true= false; }
THE_DIV2 = document.getElementById("apDiv2");
THE_DIV2.innerHTML = "Webgl detector : "+webgl_true;
</script>
<script>
var webgl;
var renderer;
var del_renderer = false;
new_webgl = function () { webgl = new three_webgl(); }
var del_webgl = function () { del_renderer = true;
THE_DIV.parentNode.removeChild(THE_DIV);
webgl = null;
// THE_DIV.appendChild( renderer.domElement );
}
three_webgl = function () {
del_renderer = false;
THE_DIV = document.createElement( 'div' );
THE_DIV.style.height="100%";
document.getElementById("apDiv1").appendChild(THE_DIV);
var SCREEN_WIDTH = THE_DIV.clientWidth;
var SCREEN_HEIGHT = THE_DIV.clientHeight;
var container, stats;
var camera, scene, mesh;
var cameraRig, activeCamera, activeHelper;
var cameraPerspective, cameraOrtho;
var cameraPerspectiveHelper, cameraOrthoHelper;
init();
animate();
function init () {
//container = document.createElement( 'div' );
//document.body.appendChild( container );
scene = new THREE.Scene();
//
camera = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 2500;
cameraPerspective = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 150, 1000 );
cameraPerspectiveHelper = new THREE.CameraHelper( cameraPerspective );
scene.add( cameraPerspectiveHelper );
//
cameraOrtho = new THREE.OrthographicCamera( 0.5 * SCREEN_WIDTH / - 2, 0.5 * SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, 150, 1000 );
cameraOrthoHelper = new THREE.CameraHelper( cameraOrtho );
scene.add( cameraOrthoHelper );
//
activeCamera = cameraPerspective;
activeHelper = cameraPerspectiveHelper;
// counteract different front orientation of cameras vs rig
cameraOrtho.rotation.y = Math.PI;
cameraPerspective.rotation.y = Math.PI;
cameraRig = new THREE.Object3D();
cameraRig.add( cameraPerspective );
cameraRig.add( cameraOrtho );
scene.add( cameraRig );
//
mesh = new THREE.Mesh( new THREE.SphereGeometry( 100, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } ) );
scene.add( mesh );
var mesh2 = new THREE.Mesh( new THREE.SphereGeometry( 50, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } ) );
mesh2.position.y = 150;
mesh.add( mesh2 );
var mesh3 = new THREE.Mesh( new THREE.SphereGeometry( 5, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } ) );
mesh3.position.z = 150;
cameraRig.add( mesh3 );
//
var geometry = new THREE.Geometry();
for ( var i = 0; i < 100000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = THREE.Math.randFloatSpread( 2000 );
vertex.y = THREE.Math.randFloatSpread( 2000 );
vertex.z = THREE.Math.randFloatSpread( 2000 );
geometry.vertices.push( vertex );
}
var particles = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { color: 0x888888 } ) );
scene.add( particles );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
THE_DIV.appendChild( renderer.domElement );
renderer.autoClear = false;
//
stats = new Stats();
THE_DIV2.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'keydown', onKeyDown, false );
}
//
function onKeyDown ( event ) {
switch( event.keyCode ) {
case 79: /*O*/
activeCamera = cameraOrtho;
activeHelper = cameraOrthoHelper;
break;
case 80: /*P*/
activeCamera = cameraPerspective;
activeHelper = cameraPerspectiveHelper;
break;
}
};
//
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
cameraPerspective.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
cameraPerspective.updateProjectionMatrix();
cameraOrtho.left = - 0.5 * SCREEN_WIDTH / 2;
cameraOrtho.right = 0.5 * SCREEN_WIDTH / 2;
cameraOrtho.top = SCREEN_HEIGHT / 2;
cameraOrtho.bottom = - SCREEN_HEIGHT / 2;
cameraOrtho.updateProjectionMatrix();
}
//
function animate() {
if (!(del_renderer))
{ requestAnimationFrame( animate );
render();
}
stats.update();
if (del_renderer) {renderer=null;}
}
function render() {
var r = Date.now() * 0.0005;
mesh.position.x = 700 * Math.cos( r );
mesh.position.z = 700 * Math.sin( r );
mesh.position.y = 700 * Math.sin( r );
mesh.children[ 0 ].position.x = 70 * Math.cos( 2 * r );
mesh.children[ 0 ].position.z = 70 * Math.sin( r );
if ( activeCamera === cameraPerspective ) {
cameraPerspective.fov = 35 + 30 * Math.sin( 0.5 * r );
cameraPerspective.far = mesh.position.length();
cameraPerspective.updateProjectionMatrix();
cameraPerspectiveHelper.update();
cameraPerspectiveHelper.visible = true;
cameraOrthoHelper.visible = false;
} else {
cameraOrtho.far = mesh.position.length();
cameraOrtho.updateProjectionMatrix();
cameraOrthoHelper.update();
cameraOrthoHelper.visible = true;
cameraPerspectiveHelper.visible = false;
}
cameraRig.lookAt( mesh.position );
renderer.clear();
activeHelper.visible = false;
renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
renderer.render( scene, activeCamera );
activeHelper.visible = true;
renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
renderer.render( scene, camera );
}
}
</script>
</body>
</html>