Question

我有以下代码来添加gui和点击对象的能力。当我将控件设置为controls = new THREE.TrackballControls( camera, renderer.domElement);时，GUI可以工作但Raycaster似乎无法工作。如果我将控制定义为controls = new THREE.TrackballControls( camera); raycaster，但是一旦我点击拐角处的gui，那么无论我在哪里移动鼠标，gui的值都会改变，而如果我关闭它，GUI会调整大小以响应小鼠动作

任何人都可以给我任何提示如何解决这个问题吗？

目前有效，但我可以同时左右点击从控件中取消

此链接显示我走了多远并让您了解问题 http://subsurface.gr/joomla/threejs/StreamFnc_ws.html

以下是完整代码：

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            // global variables
            var camera, controls, scene, renderer;
            var container, stats;
            var raycaster, intersects;
            var threshold = 0.05;
            var mouse = new THREE.Vector2();

            var cube;

            // Parameters for GUI
            var params = {
                AAmin: 0.0,
                AAmax: 1000.0
            };


            // main functions
            init();
            animate();


            function init(){

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                //Setup Camera
                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.name = 'camera';
                camera.position.z = 20;

                // Setup world
                scene = new THREE.Scene();
                scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

                // Setup lights
                var directionalLight = new THREE.DirectionalLight( 0xffffff );
                directionalLight.position.set( 1, 1, 1 );
                scene.add( directionalLight );
                directionalLight.name = 'directionalLight';

                var directionalLight1 = new THREE.DirectionalLight( 0x002288 );
                directionalLight1.position.set( -1, -1, -1 );
                directionalLight1.name = 'directionalLight1';
                scene.add( directionalLight1 );

                var ambientLight = new THREE.AmbientLight( 0x222222 );
                ambientLight.name = 'ambientLight';
                scene.add( ambientLight );

                raycaster = new THREE.Raycaster();
                raycaster.params.Points.threshold = threshold;

                // Main Scene
                var geometry = new THREE.BoxGeometry( 1, 1, 1 );
                var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
                cube = new THREE.Mesh( geometry, material );
                cube.name = 'mycube';
                scene.add( cube );

                // GUI parameter
                var gui = new dat.GUI();
                gui.add( params, 'AAmin', -1000, 500 );
                gui.add( params, 'AAmax', 500, 2000 );
                gui.open();

                //renderer 
                renderer = new THREE.WebGLRenderer( { antialias: false } );
                renderer.setClearColor( scene.fog.color );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                //controls
                controls = new THREE.TrackballControls( camera);
                controls.rotateSpeed = 1.0;
                controls.zoomSpeed = 1.2;
                controls.panSpeed = 0.8;
                controls.noZoom = false;
                controls.noPan = false;
                controls.staticMoving = true;
                controls.dynamicDampingFactor = 0.3;
                controls.keys = [ 65, 83, 68 ];
                controls.addEventListener( 'change', render);

                stats = new Stats();
                container.appendChild( stats.dom );

                // events
                document.addEventListener( 'mousedown', onDocumentMouseDown, false );

                render();
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
                controls.update();
            }
            function render() {

                renderer.render( scene, camera );
                stats.update();
            }

            function onDocumentMouseDown( event ){
                event.preventDefault();
                mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;


                raycaster.setFromCamera( mouse, camera );
                intersects = raycaster.intersectObject( cube );
                if ( intersects.length > 0 ){
                    console.log("You click a cube!");
                }
            }

Answer 1

如果我理解正确，TrackballControls会停止传播mouseDown事件（绑定到renderer.domElement） - 这意味着你的onDocumentMouseDown处理程序没有被调用。尝试将document.addEventListener（...）移动到新的THREE.TrackballControls（...）之前。

回复您的评论：

我现在看到了问题。 TrackballControls和Dat.GUI之间似乎存在不兼容，因为TrackballControls鼠标事件会停止事件的传播，这会导致Dat.GUI出错并因某种原因而无法调整UI的大小。

我相信您可以通过在单击GUI时禁用TrackballControl并在mouseup上重新启用TrackballControl来解决此问题：

gui.domElement.addEventListener( 'mousedown', function(){ controls.enabled = false; }, false );
document.addEventListener( 'mouseup', function(){ controls.enabled = true; }, false );

GUI和Raycaster不能一起工作（three.js）

1 个答案: