ThreeJS BoxHelper scale Not working - three.js

Question

var sphere = new THREE.BoxGeometry(6,20,6);
var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ));
var box = new THREE.BoxHelper( object, 0xffff00 );
var gui = new dat.GUI();
gui.add(box.scale,'x',0,50).name('Width').listen();
the datgui shows the slider for box scale but changing it does not have any effect.Please help.

Answer 1

First, you have to set the color property ot the THREE.MeshBasicMaterial:
var boxGeometry = new THREE.BoxGeometry(6,20,6);
var object = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( {color:0xff0000} ));
Then you have to add the THREE.BoxHelper to the scene:
var box = new THREE.BoxHelper( object, 0xffff00 );
scene.add(boxHelper);
Further you have to change the scale property of the THREE.Mesh and not the scale property of the THREE.BoxHelper. But you have to update (onUpdate) the THREE.BoxHelper:
var gui = new dat.GUI();
gui.add(object.scale,'x',0.1,5).name('Width').onChange(function(){
boxHelper.update();
} );
See the code snippet:
(function onLoad() {
var container, loader, camera, scene, renderer, controls, boxHelper;
init();
animate();
function init() {
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(15, -20, 15);
loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(camera);
window.onresize = resize;
controls = new THREE.OrbitControls(camera, renderer.domElement);
var boxGeometry = new THREE.BoxGeometry(6,20,6);
var object = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( {color:0xff0000} ));
scene.add(object);
boxHelper = new THREE.BoxHelper( object, 0x000000 );
scene.add(boxHelper);
var gui = new dat.GUI();
gui.add(object.scale,'x',0.1,5).name('Width').onChange(function(){
boxHelper.update();
} );
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<script src="https://threejs.org/build/three.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script-->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<div id="container"></div>