我正在使用dat.gui滑块动态调整three.js中的对象，我有一个关于three.js EdgesHelper类的问题。
如下面的示例所示，当重新定位框的顶点时，EdgesHelper对象的几何体box_edges不会自动更新。
我尝试过使用
box_edges.matrixAutoUpdate = true;
无济于事。我也尝试过matrixUpdate（）和applyMatrix（）方法。
那么如何确保EdgesHelper对象“跟踪”Geometry对象？
<html>
<head>
<title>EdgesHelper test</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
<script src="..\three.js-master\build\three.js"></script>
<script src="..\..\JavaScript Libraries\Detector\Detector.js"></script>
<script src="..\..\JavaScript Libraries\dat.gui.min\dat-gui-min.js"></script>
<script src="..\..\JavaScript Libraries\OrbitControls\OrbitControls.js"></script>
<script src="..\..\JavaScript Libraries\stats.min\stats-min.js"></script>
</head>
<body>
<div id="threejs_scene" style="position: absolute; left:0px; top:0px"></div>
<script>
var container, scene, camera, renderer, controls, stats;
var gui_components_fn, gui_components, gui;
var box_geometry, box_material;
init();
animate();
function init() {
scene = new THREE.Scene();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.set( -1000, 1000, 1000);
scene.add(camera);
camera.lookAt( 0, 0, 0 );
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias: true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.getElementById( 'threejs_scene' );
container.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
var lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 3 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 0 ].position.set( 1000, 2000, 1000 );
lights[ 1 ].position.set( 1000, 2000, -1000 );
lights[ 2 ].position.set( -1000, 2000, 1000 );
lights[ 3 ].position.set( -1000, 2000, -1000 );
scene.add( lights[ 0 ] );
scene.add( lights[ 1 ] );
scene.add( lights[ 2 ] );
scene.add( lights[ 3 ] );
var box_width = 200;
var box_height = 600;
var box_depth = 150;
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
box_geometry = new THREE.Geometry();
var box_vertices = [
new THREE.Vector3(0,0,0),
new THREE.Vector3(box_width,0,0),
new THREE.Vector3(box_width,0, -box_depth),
new THREE.Vector3(0,0,-box_depth),
new THREE.Vector3(0,box_height,0),
new THREE.Vector3(box_width,box_height,0),
new THREE.Vector3(box_width,box_height,-box_depth),
new THREE.Vector3(0,box_height,-box_depth),
];
var box_width_vertices_left = [0, 3, 4, 7];
var box_width_vertices_right = [1, 2, 5, 6];
var box_height_vertices_bottom = [0, 1, 2, 3];
var box_height_vertices_top = [4, 5, 6, 7];
var box_depth_vertices_front = [0, 1, 4, 5];
var box_depth_vertices_rear = [2, 3, 6, 7];
for (var i=0; i<box_vertices.length; i++) {
box_geometry.vertices.push(box_vertices[i]);
}
box_geometry.faces.push( new THREE.Face3( 0, 1, 5 ) );
box_geometry.faces.push( new THREE.Face3( 5, 4, 0 ) );
box_geometry.faces.push( new THREE.Face3( 1, 2, 6 ) );
box_geometry.faces.push( new THREE.Face3( 6, 5, 1) );
box_geometry.faces.push( new THREE.Face3( 2, 3, 7 ) );
box_geometry.faces.push( new THREE.Face3( 7, 6, 2 ) );
box_geometry.faces.push( new THREE.Face3( 3, 0, 4 ) );
box_geometry.faces.push( new THREE.Face3( 4, 7, 3 ) );
box_geometry.faces.push( new THREE.Face3( 0, 3, 2 ) );
box_geometry.faces.push( new THREE.Face3( 2, 1, 0 ) );
box_geometry.faces.push( new THREE.Face3( 5, 6, 7 ) );
box_geometry.faces.push( new THREE.Face3( 7, 4, 5 ) );
box_geometry.computeFaceNormals();
box_material = new THREE.MeshPhongMaterial( { color:0xff0000, transparent:true, opacity:0.75 } );
box = new THREE.Mesh( box_geometry, box_material );
scene.add(box);
box_edges = new THREE.EdgesHelper( box, 0xffffff );
box_edges.visible = true;
scene.add( box_edges );
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var axes = new THREE.AxisHelper(300);
scene.add(axes);
gui_components_fn = function () {
this.box_position_wide_left_gui = 0.0;
this.box_position_wide_right_gui = 0.0;
this.show_edges_gui = true;
};
gui_components = new gui_components_fn();
gui = new dat.GUI();
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var folder1 = gui.addFolder('Box dimensions');
var box_position_wide_left_gui = folder1.add(gui_components, 'box_position_wide_left_gui', 0.0, 500.0).name("adjust left");
var box_position_wide_right_gui = folder1.add(gui_components, 'box_position_wide_right_gui', 0.0, 500.0).name("adjust right");
folder1.open();
box_position_wide_left_gui.onChange(function(value) {
for (var i=0; i<box_width_vertices_left.length; i++) {
box.geometry.vertices[box_width_vertices_left[i]].x = -value;
}
box.geometry.verticesNeedUpdate = true;
box.geometry.normalsNeedUpdate = true;
});
box_position_wide_right_gui.onChange(function(value) {
for (var i=0; i<box_width_vertices_right.length; i++) {
box.geometry.vertices[box_width_vertices_right[i]].x = box_width+value;
}
box.geometry.verticesNeedUpdate = true;
box.geometry.normalsNeedUpdate = true;
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var show_edges_gui = gui.add(gui_components, 'show_edges_gui').name("Show edges");
show_edges_gui.onChange(function(value) {
box_edges.visible = value;
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
gui.open();
}
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
controls.update();
stats.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>