Appreciate you taking the time to help me with my question.
I'm having trouble finding a good example of how to use raycaster in three JS version r74.
There have been many changes between versions r55 and r76, and forums seem to focus on examples from minor versions of Three.js.
Could someone provide an example for us?
By the way, I am using Angular and Bootstrap.
This is what I have tried so far:
My View
<div class="col-md-11">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body" style="padding: 0px">
<div class="canvas-zonas" ng-click="zonas.click($event)">
</div>
</div>
</div>
</div>
</div>
My Css (using stylus)
.canvas-zonas
height 67vh
My Controller
var mouse = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
var canvas = document.querySelector(".canvas-zonas");
function clickObject(event) {
event.preventDefault();
mouse.x= ((event.clientX - canvas.offsetLeft)/canvas.clientWidth) * 2 - 1;
mouse.y=-((event.clientY - canvas.offsetTop)/canvas.clientHeight) * 2 + 1;
mouse.z = 0.5;
raycaster.setFromCamera(mouse, camera);
var intersects = vm.raycaster.intersectObjects(scene.children);
console.info(intersects);
}
When I click on my canvas and print the Intersects variable, sometimes I get an empty array even if I click on the object, and sometimes I get [object] even if I click outside the object.
I'd like to share some details about my camera configuration:
My Camera
var camera = new THREE.PerspectiveCamera(30, canvas.clientWidth / canvas.clientHeight, 0.10, 1000)
camera.position.y = 20;
camera.position.z = 50;
camera.lookAt(scene.position);
camera.updateProjectionMatrix();
That's how my camera is set up, and just a reminder that I am using WEBGL as the renderer.
var renderer = new THREE.WebGLRenderer({antialias: true});
Also, don't forget that there is a resize event happening:
function listenResize() {
window.bind('resize', function () {
canvas = document.querySelector(".canvas-zonas");
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
camera.aspect = (canvas.clientWidth / canvas.clientHeight);
camera.updateProjectionMatrix();
});
}
Lastly, below are two images showing what's happening:
Image 1
https://i.sstatic.net/O8Xko.png
Image 2 https://i.sstatic.net/noPcy.png
Thank you very much, and apologies for my previous post. I have made updates!