threejs，按钮点击事件无效

进一步发现，，，我做了两个div，上面放UI，下面放three的场景，，为了下面的场景能触发点击事件，，我在上层UI的div设置样式 pointer-events：none，，这样下层的场景就能点击了，，，同时，上层UI中的按钮点击事件就不触发了。。这时候打开控制台设置手机模式，按钮就能点击了。。，，，这是什么情况
我期望的是上层显示UI，UI可点击，下层显示场景，场景可控制，，，这个要怎么搞啊
 

那怎么能做到呢，上层的div处理了点击了，下面的就没办法收到了。手机模式行估计是你上层的div大小和位置刚好没盖住。

又有进一步发现，，还是按钮点击的问题，，，在网页直接点击不能点，打开控制台手机模式就能点了，，，
流程是这样的，，首先创建renderer，scene，初始化fgui，执行渲染，，，然后fgui添加一个带按钮的界面，，这时候按钮是能点的，，，然后新创建一个scene3D，一个camera，，用同一个render渲染（scene3D裁剪了一半，，UI还是全屏），，，这时候按钮还是能点的，，然后给新增的camera添加一个轨道控制器，，这时候按钮就不能点了，，，，，但是打开手机模式按钮还是可以点的，，，
我觉得是不是轨道控制器屏蔽了UI的点击事件？？
 
期望：1、轨道控制器的操作和UI不影响，，2、裁剪了轨道控制器对应场景的显示区域，，相应的控制范围是不是应该也被裁剪，，，我现在滑动UI还是能影响轨道控制器
 
 
-

import * as THREE from "three";

import * as fgui from "fairygui-three";

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

/**---------------------

*						

------------------------*/

export default class Index  {



    private scene: THREE.Scene

    private scene_3D: THREE.Scene

    private renderer: THREE.WebGLRenderer;



    private _mainMenu: fgui.GComponent;

    private camera: THREE.PerspectiveCamera;

    private controls: OrbitControls;



    constructor() {

        this.init();

    }



    private init() {



        //创建渲染器

        this.renderer = new THREE.WebGLRenderer();//{ antialias: true }

        this.renderer.setClearColor(0Xffffff,1);

        this.renderer.sortObjects = false;

        this.renderer.setPixelRatio(window.devicePixelRatio);

        this.renderer.setSize(window.innerWidth, window.innerHeight);

        this.renderer.localClippingEnabled = true;

        document.body.appendChild(this.renderer.domElement);

        window.addEventListener('resize', () => {

            this.renderer.setSize(window.innerWidth, window.innerHeight)

        }, false);



        //开启裁剪

        this.renderer.setScissorTest(true);



        //创建3D场景

        this.scene_3D = new THREE.Scene();

        this.scene_3D.background=new THREE.Color(0xfa0000);//背景红色



        //创建3D摄像机

        this.camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 1000);

        this.camera.position.set(0, 20, 100);



         //添加轨道控制器

         this.controls = new OrbitControls(this.camera, this.renderer.domElement);

         this.controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled

         this.controls.dampingFactor = 0.05;

         this.controls.screenSpacePanning = false;

         this.controls.minDistance = 1;

         this.controls.maxDistance = 500;

         this.controls.maxPolarAngle = Math.PI / 2;







        //UI场景

        this.scene = new THREE.Scene();

        fgui.Stage.init(this.renderer);

        fgui.Stage.scene = this.scene;

        fgui.UIContentScaler.scaleWithScreenSize(1136, 640, fgui.ScreenMatchMode.MatchWidthOrHeight);



        //添加UI

        fgui.UIPackage.loadPackage("assets/UI/Package1").then(this.start.bind(this));







        this.animate();

    }



    private start() {



        //添加UI

        this._mainMenu = fgui.UIPackage.createObject("Package1", "Main").asCom;

        this._mainMenu.makeFullScreen();

        fgui.GRoot.inst.addChild(this._mainMenu);



        //添加UI添加点击

        this._mainMenu.getChild("btn").onClick(() => {

            this.clickTest();

        }, this);

    }



    private clickTest():void{

        console.log(`输出:点击了`,);

        

    }



    private render() {



        //更新轨道控制器

        // this.controls.update();





        //裁剪3D场景

        this.renderer.setScissor(0,0,window.innerWidth/2,window.innerHeight);

        this.renderer.setViewport(-window.innerWidth/4,0,window.innerWidth,window.innerHeight);

        this.scene_3D.scale.set(0.5,0.5,0.5)

        //渲染3D场景

        this.renderer.render(this.scene_3D, this.camera);



        //保留3D画面

        this.renderer.autoClear=false;



        // 渲染UI场景

        fgui.Stage.update();

        this.renderer.render(this.scene, fgui.Stage.camera);

    }



    private animate = () => {

        requestAnimationFrame(this.animate)

        this.render()

    }

}

new Index();