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();

datgui显示了盒子刻度的滑块，但更改它没有任何效果。请帮助。

Answer 1

首先，您必须将color属性设置为THREE.MeshBasicMaterial：

var boxGeometry = new THREE.BoxGeometry(6,20,6);
var object = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( {color:0xff0000} ));

然后你必须将THREE.BoxHelper添加到场景中：

var box = new THREE.BoxHelper( object, 0xffff00 );
scene.add(boxHelper);

此外，您必须更改THREE.Mesh的scale属性，而不是scale的{{1}}属性。但您必须更新（THREE.BoxHelper）onUpdate：

THREE.BoxHelper

请参阅代码段：

＆＃13;

var gui = new dat.GUI();
gui.add(object.scale,'x',0.1,5).name('Width').onChange(function(){
    boxHelper.update(); 
} );

＆＃13;

(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);
  }
})();

＆＃13;

ThreeJS BoxHelper规模不起作用

1 个答案: