# Multiple Views Raycasting TransformControls

**URL:** <https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299>\
**Category:** Questions\
**Tags:** transform-controls\
**Created:** [October 17, 2019, 12:49pm UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299 "2019-10-17T12:49:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![kavikode](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kavikode/32/11483_2.png) [@kavikode](https://discourse.threejs.org/u/kavikode)\
**Post date:** [October 17, 2019, 12:49pm UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/1 "2019-10-17T12:49:17Z")

</div>

hi everyone!

I am trying to show multiple views on the same renderer like:

[https://threejs.org/examples/webgl\_multiple\_views](https://threejs.org/examples/webgl_multiple_views)

In each view I am trying to perform object picking/raycasting once an object is picked in the specific view, I’d like to attach the `THREE.TransformControls`. It only works in the 2nd in the middle but not the others. Can you please help?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 17, 2019, 1:30pm UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/2 "2019-10-17T13:30:54Z")

</div>

It’s a bit hard to help you without debugging your code. You might want to demonstrate the issue as a live example.

In any event, the mentioned example uses a perspective matrix per view. You have to ensure to `THREE.TransformControls` with the correct camera, otherwise the interaction won’t work correctly.

---

<div class="post-metadata">

**Author:** ![kavikode](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kavikode/32/11483_2.png) [@kavikode](https://discourse.threejs.org/u/kavikode)\
**Post date:** [October 18, 2019, 12:46am UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/3 "2019-10-18T00:46:31Z")

</div>

![multiple%20views](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/4467bd5710bcc42815334ff43f94d313a8c9d997.jpeg)  
I have a teapot object and then…  
raycaster = new THREE.Raycaster();

```auto
 renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

             control = new THREE.TransformControls( camera, renderer.domElement );

            control.addEventListener( 'change', render );

            scene.add( control );
            renderer.domElement.addEventListener( 'mousedown', clickEvent );

        function clickEvent( event ) {
            var elem = renderer.domElement,
                boundingRect = elem.getBoundingClientRect(),
                x = (event.clientX - boundingRect.left) * (elem.width / boundingRect.width),
                y = (event.clientY - boundingRect.top) * (elem.height / boundingRect.height);
			//1st view
            var view = tripleViews[1];
           camera = view.camera;
            var WIDTH = Math.floor(windowWidth * view.width);
            var HEIGHT = Math.floor(windowHeight * view.height);

            mouse.x = ( x / WIDTH ) * 2 - 1;
            mouse.y = - ( y / HEIGHT ) * 2 + 1;

            raycaster.setFromCamera( mouse, camera );
            var intersects = raycaster.intersectObjects( scene.children );
            if ( intersects.length > 0 ) {
                if ( INTERSECTED != intersects[0].object ) {
                    INTERSECTED = intersects[0].object;

                    if ( control.object === undefined || control.object !== INTERSECTED ) {
                        control.attach( INTERSECTED );
                    }
                }
            }

            render();
        }
the transform controls only work in the 2nd viewport. Here are the configurations for my viewport.

            var tripleViews = [
				{
					left: 0,
					bottom: 0,
					width: 0.33,
					height: 1.0,
					background: new THREE.Color( 0.8, 0.9, 1.0 ),
					eye: [0, 300, 1200],
					up: [0, 1, 0],
					fov: 70,
					updateCamera: function ( camera, scene, mouseX ) {

				// camera.position.x += mouseX * 0.05;
                        // camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), - 2000 );
					  camera.lookAt( scene.position );
                      		  // background: new THREE.Color( 0.2, 0.9, 1.0 );
					}
				},
				{
					left: 0.33,
					bottom: 0,
					width: 0.34,
					height: 1,
					background: new THREE.Color( 1.0, 0.8, 0.9 ),
					eye: [0, 1800, 0],
					up: [1, 0, 0],
					fov: 45,
					updateCamera: function ( camera, scene, mouseX ) {
                        //camera.position.x -= mouseX * 0.05;
                        //camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), - 2000 );
					  camera.lookAt( camera.position.clone().setY( 0 ) );

					}
				},
				{
					left: 0.66,
					bottom: 0,
					width: 0.34,
					height: 1,
					background: new THREE.Color( 0.7, 0.897, 0.5),
					eye: [1400, 800, 0],
					up: [0, 1, 0],
					fov: 60,
					updateCamera: function ( camera, scene, mouseX ) {

				// camera.position.y -= mouseX * 0.05;
				/// camera.position.y = Math.max( Math.min( camera.position.y, 1600 ), - 1600 );
					  camera.lookAt( scene.position );

					}
				}
			];

I also just want to use the world coordinates. Please help!
```

---

<div class="post-metadata">

**Author:** ![kavikode](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kavikode/32/11483_2.png) [@kavikode](https://discourse.threejs.org/u/kavikode)\
**Post date:** [October 19, 2019, 1:08am UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/4 "2019-10-19T01:08:20Z")

</div>

How can transformcontrols be only applied to specific viewport within the same scene?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 19, 2019, 11:40am UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/5 "2019-10-19T11:40:30Z")

</div>

I’m not sure I understand this question. When you transform an object with the controls, you will see this effect in all of your views. Remember, that you don’t transform the camera but the object itself.

---

<div class="post-metadata">

**Author:** ![kavikode](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kavikode/32/11483_2.png) [@kavikode](https://discourse.threejs.org/u/kavikode)\
**Post date:** [October 19, 2019, 12:05pm UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/6 "2019-10-19T12:05:57Z")

</div>

Thank you so much for taking the time to help! @Mugen87  
Although the effect will be seen in all the views, if the controls in the 1st viewport is moved it should only move in the X direction. Likewise the controls in the 2nd viewport is moved, then only the object should move in the Y direction. We don’t have to worry about the 3rd viewport because it would just be a display. Can you please help me? I am able to find when the intersections happened with each viewport with the following code:

// 1st viewport  
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) \* 1;

// 2nd viewport  
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) \* 2 - 1;

// 3rd viewport  
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) \* 6 - 5;

mouse.y = - ( event.clientY / renderer.domElement.clientHeight) \* 2 + 1;

Even though I can detect when my mouse intersects the object at that particular viewpoint, I still cannot used the transformcontrols in all of the viewports individually.

I was also considering using DragControls but I am not sure how to restrict the drag to a particular X or Y plane in each viewport. I really appreciate your suggestions.

---

<div class="post-metadata">

**Author:** ![GMP\_RDX](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gmp_rdx/32/7934_2.png) [@GMP\_RDX](https://discourse.threejs.org/u/GMP_RDX)\
**Post date:** [November 5, 2019, 5:47pm UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/7 "2019-11-05T17:47:20Z")

</div>

I think the issue stems from the internal function `getPointer` for `TransformControls`.

> <https://github.com/mrdoob/three.js/blob/22ed6755399fa180ede84bf18ff6cea0ad66f6c0/examples/js/controls/TransformControls.js#L545>

It is hardcoded to use the dimensions of the HTML canvas. There doesn’t appear to be a way to do any override or supply options to factor for when you use `renderer.setViewport` and `renderer.setScissor` a new coordinate space is create.

---

<div class="post-metadata">

**Author:** ![dicobraz](https://avatars.discourse-cdn.com/v4/letter/d/eb9ed0/32.png) [@dicobraz](https://discourse.threejs.org/u/dicobraz)\
**Post date:** [December 17, 2019, 11:26pm UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/8 "2019-12-17T23:26:45Z")

</div>

The initial question seems to be about something different, but this is the part

> [@GMP\_RDX](#):
>
> mrdoob/three.js/blob/22ed6755399fa180ede84bf18ff6cea0ad66f6c0/examples/js/controls/TransformControls.js#L545

that I have encountered, I am using `renderer.setViewport` and `renderer.setScissor` and my mesh is in the centres of two parts of the renderer, the problem is that the transform handles trigger as if they are in the center of the whole canvas. Has anyone found a way to deal with it? @Mugen87 maybe you can help, please!

---

<div class="post-metadata">

**Author:** ![Patriicya](https://avatars.discourse-cdn.com/v4/letter/p/8baadc/32.png) [@Patriicya](https://discourse.threejs.org/u/Patriicya)\
**Post date:** [March 30, 2020, 2:19pm UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/9 "2020-03-30T14:19:50Z")

</div>

@kavikode did you get the solution for this? Can you explain? Thanks

---

<div class="post-metadata">

**Author:** ![sieeeebs](https://avatars.discourse-cdn.com/v4/letter/s/8e7dd6/32.png) [@sieeeebs](https://discourse.threejs.org/u/sieeeebs)\
**Post date:** [March 13, 2021, 9:53pm UTC](https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/10 "2021-03-13T21:53:04Z")

</div>

Was there ever a solution to this? It appears transformControls does not work with multiple viewports ?

The only solution I could come up with is in the render loop convert mouse coordiantes to the viewport hovered on and then use `raycaster.setFromCamera(mouse, camera)`. However this really hurts performance as the mouse coordiantes are constantly being converted and the transform controls picking is finicky.

> **[r3f⚡ multi-view (forked) - CodeSandbox](https://codesandbox.io/s/r3f-multi-view-forked-rvwgu?file=%2Fsrc%2FPanel.js)**
>
> r3f⚡ multi-view (forked) using @react-spring/three, @react-three/drei, @types/three, react, react-dom, react-responsive, react-scripts, react-three-fiber, three

example shown here using react-three-fibre. Click on an object to add transform controls. Only the middle panel works with the controls.