0

I'm dynamically adjusting objects in three.js using dat.gui sliders, and I've got a question about the three.js EdgesHelper class.

As the example below demonstrates, the geometry of the EdgesHelper object, box_edges, does not automatically update when the vertices of the box are repositioned.

I have tried using 

box_edges.matrixAutoUpdate = true;

to no avail. I've also tried the matrixUpdate() and applyMatrix() methods.

So how can I ensure that the EdgesHelper object 'tracks' the Geometry object?

<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>
svenpables
  • 99
  • 1
  • 9
  • Scale your box to resize it. `box.scale.set( 2, 1, 1 );` – WestLangley May 03 '16 at 05:18
  • Thanks but I can't get this to work. Where in the code should it go? Two more questions: why are the edges jagged despite `renderer = new THREE.WebGLRenderer( {antialias: true} );`?; and why do the objects in the scene move on mouseMove after interaction with the gui? (Playing around with scope.noRotate in the mouse methods of OrbitControls helps with this, but it's a hacky and incomplete solution.) – svenpables May 03 '16 at 09:29
  • Could you add a fiddle to your question? Then people can see the issue in the demo. – Wilt May 03 '16 at 12:12
  • Try [this](http://jsfiddle.net/u9Leccto/2) – svenpables May 04 '16 at 05:18

0 Answers0