Question

我正在使用threex domevents Jeromeetienne：https://github.com/jeromeetienne/threex.domevents来处理我的rendered in

中canvas个对象的悬停

当用户更改对象类型时更新透视图时出现问题，dom设置了event listener但似乎永远不会被调用。以下是概述：

当用户首次加载页面时，我们设置了相机：

       // setup local vars
        var camera = new THREE.PerspectiveCamera(40,window.innerWidth / window.innerHeight,1,10000);
        camera.position.set(500, 800, 1300);// 1st = swing (left or right) 2nd = up or down 3rd = zoom
        camera.lookAt( new THREE.Vector3());
        camera.positionID = 1;// default
        camera.positionType = 'sideView';// default
        this.cam = camera;

比我们设置renderer：

        renderer = new THREE.CanvasRenderer();
        renderer.setClearColor( 0xf0f0f0 );
        renderer.setSize( window.innerWidth, window.innerHeight );

现在，当用户单击画布时，会添加一个对象。我们首先获取定位并调用intersectofobjects以查看我们是否确实在画布上(mousedown)：

          event.preventDefault();
          this.mouse.x = ( event.clientX / this.renderer.domElement.width ) * 2 - 1;
          this.mouse.y = - ( event.clientY / this.renderer.domElement.height ) * 2 + 1;

          this.raycaster.setFromCamera( this.mouse, this.camera.cam );
          var intersects = this.raycaster.intersectObjects( this.blocks );

在我们确实知道我们在飞机上之后，我们设置了我们的对象：

         var voxel = new THREE.Mesh( this.room.cubeGeometry.clone(), this.room.cubeMaterial.clone() );
         voxel.geometry.computeBoundingBox();
         voxel.position.copy( intersect.point ).add( intersect.face.normal );
         voxel.position.divideScalar( this.room.divideScalar ).floor().multiplyScalar( this.room.multiplyScalar ).addScalar( this.room.addScalar );

在我们设置对象后，我们设置了event listeners on the object

        // get our dom event to attach to object
        var domEvents   = new THREEx.DomEvents(this.camera.cam, this.renderer.domElement);
        // DOM events for inside 3d rendering
        domEvents.addEventListener(voxel, 'mouseover', this.onDocumentMouseOverCube.bind(this),false);
        domEvents.addEventListener(voxel, 'mouseout', this.onDocumentMouseOutCube.bind(this),false);

        this.scene.add( voxel );
        this.blocks.push( voxel );
        this.rooms.push(voxel);

        this.render();

这在首次使用时非常有效。当用户更改他们想要放在屏幕上的object时，它似乎停止工作，具体方法如下。

我们有一个gui对象来处理与UI和core的连接，当有人选择添加其他对象时，我们会调用：

        jQuery(".changeRoomType.active").removeClass('active');
        jQuery(event.srcElement).toggleClass('active');
        this.canvas.room.updateRoomType(event.srcElement.id);

现在调用room.updateRoomType...()时，它会启动一个这样的对象：

        var cubeGeometry = new THREE.BoxGeometry( 100, 50, 100,2,1,2 );// moving to roomObj
        var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80,overdraw: 1 } ); // moving to roomObj
        var cubeTmpHoverMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff80, transparent: true, overdraw: 0, opacity:0.5});// used to give a transparency to the cube tmp view // moving to roomObj
        var divideScalar = 50; 
        var multiplyScalar = 50;
        var addScalar = 25;
        var additionalZ = 25;
        var additionalX = 25;



        this.divideScalar = divideScalar;
        this.multiplyScalar = multiplyScalar;
        this.addScalar = addScalar;

        var colorNormal = 0x00ff80;
        var colorHover = 0xE4E4E4;
        var colorTmpHover = 0xEAEAEA;
        var colorRemove = 0xE23434;

        this.colorNormal = colorNormal;
        this.colorHover = colorHover;
        this.colorTmpHover = colorTmpHover;
        this.colorRemove = colorRemove;

        this.additionalZ = additionalZ;
        this.additionalX = additionalX;

        this.cubeGeometry = cubeGeometry;
        this.cubeMaterial = cubeMaterial;
        this.cubeTmpHoverMaterial = cubeTmpHoverMaterial;

现在，在此之后，对象上的mouseover和mouseout似乎再也无法工作了。我的问题是为什么会这样？更改要显示的对象类型后，我没有更新camera perspective吗？

编辑：

请注意，我们在页面加载时首次选择的已启动对象如下：

            var cubeGeometry = new THREE.BoxGeometry( 50, 50, 50,1,1,1 );// moving to roomObj
            var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, overdraw: 1 } ); // moving to roomObj
            var cubeTmpHoverMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff80, transparent: true, overdraw: 0,opacity:0.5});// used to give a transparency to the cube tmp view // moving to roomObj
            var divideScalar = 50; 
            var multiplyScalar = 50;
            var addScalar = 25;

            var additionalZ = 0;
            var additionalX = 0;
            this.additionalZ = additionalZ;
            this.additionalX = additionalX;

            var colorNormal = 0x00ff80;
            var colorHover = 0xE4E4E4;
            var colorTmpHover = 0xEAEAEA;
            var colorRemove = 0xE23434;

            this.colorNormal = colorNormal;
            this.colorHover = colorHover;
            this.colorTmpHover = colorTmpHover;
            this.colorRemove = colorRemove;

            this.cubeGeometry = cubeGeometry;
            this.cubeMaterial = cubeMaterial;
            this.cubeTmpHoverMaterial = cubeTmpHoverMaterial;

原始问题中显示的上面调用的另一个对象演示了我们的其他对象大小。在调用它之后，它似乎停止识别我们的mouseover和mouseout在对象上的位置，或者它被放置在其他地方它不应该是。

在THREE.js中

0 个答案: