Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RaycasterHelper #30088

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions docs/api/en/helpers/RaycasterHelper.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr;

<h1>[name]</h1>

<p class="desc">
A 3D object for visualizing a [page:Raycaster Raycaster].
</p>

<h2>Code Example</h2>

<code>
const origin = new THREE.Vector3( - 4, 0, 0 );
const direction = new THREE.Vector3( 1, 0, 0 );
const raycaster = new THREE.Raycaster( origin, direction );
raycaster.near = 1;
raycaster.far = 8;

const raycasterHelper = new THREE.RaycasterHelper( raycaster );
scene.add( raycasterHelper );

function render() {

const intersects = raycaster.intersectObjects( scene.children );

raycasterHelper.hits = intersects;
raycasterHelper.update();

renderer.render( scene, camera );

}

window.requestAnimationFrame(render);
</code>

<h2>Examples</h2>

<p>[example:webgl_raycaster_helper WebGL / raycaster / helper]</p>

<h2>Constructor</h2>

<h3>
[name]([param:Raycaster raycaster], [param:Number numberOfHitsToVisualize], [param:Number sphereRadius],
[param:Number nearFarSize], [param:Array colors])
</h3>
<p>
[page:Raycaster raycaster] -- Raycaster to visualize. <br />
[page:Number numberOfHitsToVisualize] -- Maximum hits to visualize. Default is `20`.<br />
[page:Number sphereRadius] -- Origin sphere radius. Default is `0.04`.<br />
[page:Number nearFarSize] -- Near/Far plane size. Default is `0.1`.<br />
[page:Array colors] -- Colors for the helper elements. Default is `{ near: 0xffffff, far: 0xffffff, originToNear: 0x333333, nearToFar: 0xffffff, origin: [ 0x0eec82, 0xff005b ] }`<br />
</p>

<h2>Properties</h2>
<p>See the base [page:Object3D] class for common properties.</p>

<h3>[property:Array hits]</h3>
<p>An array of [page:Raycaster Raycaster]'s intersections.</p>

<h2>Methods</h2>
<p>See the base [page:Object3D] class for common methods.</p>

<h3>[method:undefined setColors]([param:Array colors])</h3>
<p>
colors -- A partial array of `colors`, as defined in the constructor's params.
</p>

<h3>
[method:undefined update]()
</h3>
<p>
Updates the helper's geometries based on the helper's `hits`.
</p>

<h3>[method:undefined dispose]()</h3>
<p>
Frees the GPU-related resources allocated by this instance. Call this
method whenever this instance is no longer used in your app.
</p>

<h2>Source</h2>

<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
1 change: 1 addition & 0 deletions docs/list.json
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@
"HemisphereLightHelper": "api/en/helpers/HemisphereLightHelper",
"PlaneHelper": "api/en/helpers/PlaneHelper",
"PointLightHelper": "api/en/helpers/PointLightHelper",
"RaycasterHelper": "api/en/helpers/RaycasterHelper",
"SkeletonHelper": "api/en/helpers/SkeletonHelper",
"SpotLightHelper": "api/en/helpers/SpotLightHelper"
},
Expand Down
1 change: 1 addition & 0 deletions examples/files.json
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@
"webgl_points_waves",
"webgl_portal",
"webgl_raycaster_bvh",
"webgl_raycaster_helper",
"webgl_raycaster_sprite",
"webgl_raycaster_texture",
"webgl_read_float_buffer",
Expand Down
Binary file added examples/screenshots/webgl_raycaster_helper.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
108 changes: 108 additions & 0 deletions examples/webgl_raycaster_helper.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - helpers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - helpers
</div>

<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>

<script type="module">

import * as THREE from 'three';

let scene, renderer;
let camera, clock;

let capsule1, capsule2, capsule3;
let raycaster, raycasterHelper;

init();

function init() {

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

//

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 10;

scene = new THREE.Scene();
clock = new THREE.Clock();

//

const geometry = new THREE.CapsuleGeometry( 0.5, 0.5, 4, 32 );
const material = new THREE.MeshNormalMaterial();
material.side = THREE.DoubleSide;

capsule1 = new THREE.Mesh( geometry, material );
capsule1.position.x = - 2;
capsule2 = new THREE.Mesh( geometry, material );
capsule2.position.x = 0;
capsule3 = new THREE.Mesh( geometry, material );
capsule3.position.x = 2;

scene.add( capsule1 );
scene.add( capsule2 );
scene.add( capsule3 );

raycaster = new THREE.Raycaster( new THREE.Vector3( - 4, 0, 0 ), new THREE.Vector3( 1, 0, 0 ) );
raycaster.near = 1;
raycaster.far = 8;
raycasterHelper = new THREE.RaycasterHelper( raycaster );
scene.add( raycasterHelper );

//

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

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

}

function animate() {

[ capsule1, capsule2, capsule3 ].forEach( capsule => {

capsule.position.y = Math.sin( clock.getElapsedTime() * 0.5 + capsule.position.x );
capsule.rotation.z = Math.sin( clock.getElapsedTime() * 0.5 ) * Math.PI * 1;

} );

raycasterHelper.hits = raycaster.intersectObjects( scene.children );
raycasterHelper.update();

renderer.render( scene, camera );

}

</script>

</body>
</html>
1 change: 1 addition & 0 deletions src/Three.Core.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export { Quaternion } from './math/Quaternion.js';
export { Color } from './math/Color.js';
export { ColorManagement } from './math/ColorManagement.js';
export { SphericalHarmonics3 } from './math/SphericalHarmonics3.js';
export { RaycasterHelper } from './helpers/RaycasterHelper.js';
export { SpotLightHelper } from './helpers/SpotLightHelper.js';
export { SkeletonHelper } from './helpers/SkeletonHelper.js';
export { PointLightHelper } from './helpers/PointLightHelper.js';
Expand Down
Loading
Loading