picking-raycaster-transparency.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <!-- Licensed under a BSD license. See license.html for license -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  7. <title>Three.js - Picking - RayCaster w/Transparency</title>
  8. <style>
  9. html, body {
  10. height: 100%;
  11. margin: 0;
  12. }
  13. #c {
  14. width: 100%;
  15. height: 100%;
  16. display: block;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <canvas id="c"></canvas>
  22. </body>
  23. <script type="module">
  24. import * as THREE from '../../build/three.module.js';
  25. function main() {
  26. const canvas = document.querySelector('#c');
  27. const renderer = new THREE.WebGLRenderer({canvas});
  28. const fov = 60;
  29. const aspect = 2; // the canvas default
  30. const near = 0.1;
  31. const far = 200;
  32. const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  33. camera.position.z = 30;
  34. const scene = new THREE.Scene();
  35. scene.background = new THREE.Color('white');
  36. // put the camera on a pole (parent it to an object)
  37. // so we can spin the pole to move the camera around the scene
  38. const cameraPole = new THREE.Object3D();
  39. scene.add(cameraPole);
  40. cameraPole.add(camera);
  41. {
  42. const color = 0xFFFFFF;
  43. const intensity = 1;
  44. const light = new THREE.DirectionalLight(color, intensity);
  45. light.position.set(-1, 2, 4);
  46. camera.add(light);
  47. }
  48. const boxWidth = 1;
  49. const boxHeight = 1;
  50. const boxDepth = 1;
  51. const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
  52. function rand(min, max) {
  53. if (max === undefined) {
  54. max = min;
  55. min = 0;
  56. }
  57. return min + (max - min) * Math.random();
  58. }
  59. function randomColor() {
  60. return `hsl(${rand(360) | 0}, ${rand(50, 100) | 0}%, 50%)`;
  61. }
  62. const loader = new THREE.TextureLoader();
  63. const texture = loader.load('resources/images/frame.png');
  64. const numObjects = 100;
  65. for (let i = 0; i < numObjects; ++i) {
  66. const material = new THREE.MeshPhongMaterial({
  67. color: randomColor(),
  68. map: texture,
  69. transparent: true,
  70. side: THREE.DoubleSide,
  71. alphaTest: 0.1,
  72. });
  73. const cube = new THREE.Mesh(geometry, material);
  74. scene.add(cube);
  75. cube.position.set(rand(-20, 20), rand(-20, 20), rand(-20, 20));
  76. cube.rotation.set(rand(Math.PI), rand(Math.PI), 0);
  77. cube.scale.set(rand(3, 6), rand(3, 6), rand(3, 6));
  78. }
  79. function resizeRendererToDisplaySize(renderer) {
  80. const canvas = renderer.domElement;
  81. const width = canvas.clientWidth;
  82. const height = canvas.clientHeight;
  83. const needResize = canvas.width !== width || canvas.height !== height;
  84. if (needResize) {
  85. renderer.setSize(width, height, false);
  86. }
  87. return needResize;
  88. }
  89. class PickHelper {
  90. constructor() {
  91. this.raycaster = new THREE.Raycaster();
  92. this.pickedObject = null;
  93. this.pickedObjectSavedColor = 0;
  94. }
  95. pick(normalizedPosition, scene, camera, time) {
  96. // restore the color if there is a picked object
  97. if (this.pickedObject) {
  98. this.pickedObject.material.emissive.setHex(this.pickedObjectSavedColor);
  99. this.pickedObject = undefined;
  100. }
  101. // cast a ray through the frustum
  102. this.raycaster.setFromCamera(normalizedPosition, camera);
  103. // get the list of objects the ray intersected
  104. const intersectedObjects = this.raycaster.intersectObjects(scene.children);
  105. if (intersectedObjects.length) {
  106. // pick the first object. It's the closest one
  107. this.pickedObject = intersectedObjects[0].object;
  108. // save its color
  109. this.pickedObjectSavedColor = this.pickedObject.material.emissive.getHex();
  110. // set its emissive color to flashing red/yellow
  111. this.pickedObject.material.emissive.setHex((time * 8) % 2 > 1 ? 0xFFFF00 : 0xFF0000);
  112. }
  113. }
  114. }
  115. const pickPosition = {x: 0, y: 0};
  116. const pickHelper = new PickHelper();
  117. clearPickPosition();
  118. function render(time) {
  119. time *= 0.001; // convert to seconds;
  120. if (resizeRendererToDisplaySize(renderer)) {
  121. const canvas = renderer.domElement;
  122. camera.aspect = canvas.clientWidth / canvas.clientHeight;
  123. camera.updateProjectionMatrix();
  124. }
  125. cameraPole.rotation.y = time * .1;
  126. pickHelper.pick(pickPosition, scene, camera, time);
  127. renderer.render(scene, camera);
  128. requestAnimationFrame(render);
  129. }
  130. requestAnimationFrame(render);
  131. function getCanvasRelativePosition(event) {
  132. const rect = canvas.getBoundingClientRect();
  133. return {
  134. x: (event.clientX - rect.left) * canvas.width / rect.width,
  135. y: (event.clientY - rect.top ) * canvas.height / rect.height,
  136. };
  137. }
  138. function setPickPosition(event) {
  139. const pos = getCanvasRelativePosition(event);
  140. pickPosition.x = (pos.x / canvas.width ) * 2 - 1;
  141. pickPosition.y = (pos.y / canvas.height) * -2 + 1; // note we flip Y
  142. }
  143. function clearPickPosition() {
  144. // unlike the mouse which always has a position
  145. // if the user stops touching the screen we want
  146. // to stop picking. For now we just pick a value
  147. // unlikely to pick something
  148. pickPosition.x = -100000;
  149. pickPosition.y = -100000;
  150. }
  151. window.addEventListener('mousemove', setPickPosition);
  152. window.addEventListener('mouseout', clearPickPosition);
  153. window.addEventListener('mouseleave', clearPickPosition);
  154. window.addEventListener('touchstart', (event) => {
  155. // prevent the window from scrolling
  156. event.preventDefault();
  157. setPickPosition(event.touches[0]);
  158. }, {passive: false});
  159. window.addEventListener('touchmove', (event) => {
  160. setPickPosition(event.touches[0]);
  161. });
  162. window.addEventListener('touchend', clearPickPosition);
  163. }
  164. main();
  165. </script>
  166. </html>