1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < title > three.js misc - raycaster - helper</ title >
5+ < meta charset ="utf-8 ">
6+ < meta name ="viewport " content ="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0 ">
7+ < link type ="text/css " rel ="stylesheet " href ="main.css ">
8+ </ head >
9+ < body >
10+ < div id ="info ">
11+ < a href ="https://threejs.org " target ="_blank " rel ="noopener "> three.js</ a > - raycaster - helper< br />
12+ See external < a href ="https://github.com/gsimone/things?tab=readme-ov-file#raycasterhelper " target ="_blank " rel ="noopener "> RaycasterHelper</ a > for more information.
13+ </ div >
14+
15+ < script type ="importmap ">
16+ {
17+ "imports" : {
18+ "three" : "../build/three.webgpu.js" ,
19+ "three/webgpu" : "../build/three.webgpu.js" ,
20+ "three/tsl" : "../build/three.tsl.js" ,
21+ "three/addons/" : "./jsm/"
22+ }
23+ }
24+ </ script >
25+
26+ < script type ="module ">
27+
28+ import * as THREE from 'three' ;
29+ import { RaycasterHelper } from 'https://cdn.jsdelivr.net/npm/@gsimone/[email protected] /dist/gsimone-three-raycaster-helper.esm.js' ; 30+
31+ let scene , renderer ;
32+ let camera , clock ;
33+
34+ let capsule1 , capsule2 , capsule3 ;
35+ let raycaster , raycasterHelper ;
36+
37+ init ( ) ;
38+
39+ function init ( ) {
40+
41+ renderer = new THREE . WebGPURenderer ( { antialias : true } ) ;
42+ renderer . setPixelRatio ( window . devicePixelRatio ) ;
43+ renderer . setSize ( window . innerWidth , window . innerHeight ) ;
44+ renderer . setAnimationLoop ( animate ) ;
45+ document . body . appendChild ( renderer . domElement ) ;
46+
47+ //
48+
49+ camera = new THREE . PerspectiveCamera ( 70 , window . innerWidth / window . innerHeight , 1 , 1000 ) ;
50+ camera . position . z = 10 ;
51+
52+ scene = new THREE . Scene ( ) ;
53+ clock = new THREE . Clock ( ) ;
54+
55+ //
56+
57+ const geometry = new THREE . CapsuleGeometry ( 0.5 , 0.5 , 4 , 32 ) ;
58+ const material = new THREE . MeshNormalMaterial ( ) ;
59+ material . side = THREE . DoubleSide ;
60+
61+ capsule1 = new THREE . Mesh ( geometry , material ) ;
62+ capsule1 . position . x = - 2 ;
63+ capsule2 = new THREE . Mesh ( geometry , material ) ;
64+ capsule2 . position . x = 0 ;
65+ capsule3 = new THREE . Mesh ( geometry , material ) ;
66+ capsule3 . position . x = 2 ;
67+
68+ scene . add ( capsule1 ) ;
69+ scene . add ( capsule2 ) ;
70+ scene . add ( capsule3 ) ;
71+
72+ raycaster = new THREE . Raycaster ( new THREE . Vector3 ( - 4 , 0 , 0 ) , new THREE . Vector3 ( 1 , 0 , 0 ) ) ;
73+ raycaster . near = 1 ;
74+ raycaster . far = 8 ;
75+ raycasterHelper = new RaycasterHelper ( raycaster ) ;
76+ scene . add ( raycasterHelper ) ;
77+
78+ //
79+
80+ window . addEventListener ( 'resize' , onWindowResize ) ;
81+
82+ }
83+
84+ function onWindowResize ( ) {
85+
86+ camera . aspect = window . innerWidth / window . innerHeight ;
87+ camera . updateProjectionMatrix ( ) ;
88+
89+ renderer . setSize ( window . innerWidth , window . innerHeight ) ;
90+
91+ }
92+
93+ function animate ( ) {
94+
95+ [ capsule1 , capsule2 , capsule3 ] . forEach ( capsule => {
96+
97+ capsule . position . y = Math . sin ( clock . getElapsedTime ( ) * 0.5 + capsule . position . x ) ;
98+ capsule . rotation . z = Math . sin ( clock . getElapsedTime ( ) * 0.5 ) * Math . PI * 1 ;
99+
100+ } ) ;
101+
102+ raycasterHelper . hits = raycaster . intersectObjects ( scene . children ) ;
103+ raycasterHelper . update ( ) ;
104+
105+ renderer . render ( scene , camera ) ;
106+
107+ }
108+
109+ </ script >
110+
111+ </ body >
112+ </ html >
0 commit comments