Canvas offset + Raycasting/Mouseprojection

Questions
,
1

Hey, I have a canvas that fills the whole browser window. Orbitcontrols is used to control the view, which unfortunately sets the pivot point always to the center of the canvas.
So if you set your orbit.target = new THREE.Vector3(10, 20, 5). This point will be seen in the exact center of the canvas element.
I want that to be offsetted to the left, because I have a menu on the right. So that it fits in the center between left side to menu. Look at this thread.

To achieve this, I have increased the viewport width of the renderer by 300px. And offsetted the canvas to left: -300px:

Here is a demo
https://jsfiddle.net/5qpt7n0y/8/

    this.w = window.innerWidth + 300 // <---- Adding 300
    this.h = window.innerHeight
    this.ratio = this.w / this.h

    this.renderer.setSize(this.w, this.h)

    this.camera = new THREE.PerspectiveCamera(50, this.ratio, .5, 40)

    container.style.left = '-300px' // <--- Offset 300
    container.append(this.renderer.domElement)

This has the desired effect, but I have a problem with mouse projection.

I want to raycast from my camera to my mouse, but I cant get it to work correctly anymore.

    this.mouseProjection.x = (event.clientX + 300 / window.innerWidth) * 2 - 1
    this.mouseProjection.y = -(event.clientY / SceneSetup.h) * 2 + 1

    this.raycaster.setFromCamera(this.mouseProjection, this.camera)

How would I need to set the mouseProjection, if the render viewport is only partly seen in the browser viewport.

Thanks :slight_smile:

2

Got it to work. Just had forgotten to add round brackets for calculation

this.mouseProjection.x = (( event.clientX + 300 ) / window.innerWidth) * 2 - 1

1 Like
3

is this ? =^.^= (yomotsu.github.io)