Volume.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. import * as THREE from "../../libs/three.js/build/three.module.js";
  2. import {TextSprite} from "../TextSprite.js";
  3. export class Volume extends THREE.Object3D {
  4. constructor (args = {}) {
  5. super();
  6. if(this.constructor.name === "Volume"){
  7. console.warn("Can't create object of class Volume directly. Use classes BoxVolume or SphereVolume instead.");
  8. }
  9. //console.log(this);
  10. //console.log(this.constructor);
  11. //console.log(this.constructor.name);
  12. this._clip = args.clip || false;
  13. this._visible = true;
  14. this._modifiable = args.modifiable || true;
  15. { // event listeners
  16. this.addEventListener('select', e => {});
  17. this.addEventListener('deselect', e => {});
  18. }
  19. }
  20. get visible(){
  21. return this._visible;
  22. }
  23. set visible(value){
  24. if(this._visible !== value){
  25. this._visible = value;
  26. this.dispatchEvent({type: "visibility_changed", object: this});
  27. }
  28. }
  29. getVolume () {
  30. console.warn("override this in subclass");
  31. }
  32. update () {
  33. };
  34. raycast (raycaster, intersects) {
  35. }
  36. get clip () {
  37. return this._clip;
  38. }
  39. set clip (value) {
  40. if(this._clip !== value){
  41. this._clip = value;
  42. this.update();
  43. this.dispatchEvent({
  44. type: "clip_changed",
  45. object: this
  46. });
  47. }
  48. }
  49. get modifieable () {
  50. return this._modifiable;
  51. }
  52. set modifieable (value) {
  53. this._modifiable = value;
  54. this.update();
  55. }
  56. };
  57. export class BoxVolume extends Volume{
  58. constructor(args = {}){
  59. super(args);
  60. this.constructor.counter = (this.constructor.counter === undefined) ? 0 : this.constructor.counter + 1;
  61. this.name = 'box_' + this.constructor.counter;
  62. let boxGeometry = new THREE.BoxGeometry(1, 1, 1);
  63. boxGeometry.computeBoundingBox();
  64. let boxFrameGeometry = new THREE.Geometry();
  65. {
  66. let Vector3 = THREE.Vector3;
  67. boxFrameGeometry.vertices.push(
  68. // bottom
  69. new Vector3(-0.5, -0.5, 0.5),
  70. new Vector3(0.5, -0.5, 0.5),
  71. new Vector3(0.5, -0.5, 0.5),
  72. new Vector3(0.5, -0.5, -0.5),
  73. new Vector3(0.5, -0.5, -0.5),
  74. new Vector3(-0.5, -0.5, -0.5),
  75. new Vector3(-0.5, -0.5, -0.5),
  76. new Vector3(-0.5, -0.5, 0.5),
  77. // top
  78. new Vector3(-0.5, 0.5, 0.5),
  79. new Vector3(0.5, 0.5, 0.5),
  80. new Vector3(0.5, 0.5, 0.5),
  81. new Vector3(0.5, 0.5, -0.5),
  82. new Vector3(0.5, 0.5, -0.5),
  83. new Vector3(-0.5, 0.5, -0.5),
  84. new Vector3(-0.5, 0.5, -0.5),
  85. new Vector3(-0.5, 0.5, 0.5),
  86. // sides
  87. new Vector3(-0.5, -0.5, 0.5),
  88. new Vector3(-0.5, 0.5, 0.5),
  89. new Vector3(0.5, -0.5, 0.5),
  90. new Vector3(0.5, 0.5, 0.5),
  91. new Vector3(0.5, -0.5, -0.5),
  92. new Vector3(0.5, 0.5, -0.5),
  93. new Vector3(-0.5, -0.5, -0.5),
  94. new Vector3(-0.5, 0.5, -0.5),
  95. );
  96. }
  97. this.material = new THREE.MeshBasicMaterial({
  98. color: 0x00ff00,
  99. transparent: true,
  100. opacity: 0.3,
  101. depthTest: true,
  102. depthWrite: false});
  103. this.box = new THREE.Mesh(boxGeometry, this.material);
  104. this.box.geometry.computeBoundingBox();
  105. this.boundingBox = this.box.geometry.boundingBox;
  106. this.add(this.box);
  107. this.frame = new THREE.LineSegments(boxFrameGeometry, new THREE.LineBasicMaterial({color: 0x000000}));
  108. // this.frame.mode = THREE.Lines;
  109. this.add(this.frame);
  110. viewer.setObjectLayers(this, 'volume' )
  111. this.update();
  112. }
  113. update(){
  114. this.boundingBox = this.box.geometry.boundingBox;
  115. this.boundingSphere = this.boundingBox.getBoundingSphere(new THREE.Sphere());
  116. if (this._clip) {
  117. this.box.visible = false;
  118. } else {
  119. this.box.visible = true;
  120. }
  121. }
  122. raycast (raycaster, intersects) {
  123. let is = [];
  124. this.box.raycast(raycaster, is);
  125. if (is.length > 0) {
  126. let I = is[0];
  127. intersects.push({
  128. distance: I.distance,
  129. object: this,
  130. point: I.point.clone()
  131. });
  132. }
  133. }
  134. getVolume(){
  135. return Math.abs(this.scale.x * this.scale.y * this.scale.z);
  136. }
  137. };
  138. export class SphereVolume extends Volume{
  139. constructor(args = {}){
  140. super(args);
  141. this.constructor.counter = (this.constructor.counter === undefined) ? 0 : this.constructor.counter + 1;
  142. this.name = 'sphere_' + this.constructor.counter;
  143. let sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
  144. sphereGeometry.computeBoundingBox();
  145. this.material = new THREE.MeshBasicMaterial({
  146. color: 0x00ff00,
  147. transparent: true,
  148. opacity: 0.3,
  149. depthTest: true,
  150. depthWrite: false});
  151. this.sphere = new THREE.Mesh(sphereGeometry, this.material);
  152. this.sphere.visible = false;
  153. this.sphere.geometry.computeBoundingBox();
  154. this.boundingBox = this.sphere.geometry.boundingBox;
  155. this.add(this.sphere);
  156. let frameGeometry = new THREE.Geometry();
  157. {
  158. let steps = 64;
  159. let uSegments = 8;
  160. let vSegments = 5;
  161. let r = 1;
  162. for(let uSegment = 0; uSegment < uSegments; uSegment++){
  163. let alpha = (uSegment / uSegments) * Math.PI * 2;
  164. let dirx = Math.cos(alpha);
  165. let diry = Math.sin(alpha);
  166. for(let i = 0; i <= steps; i++){
  167. let v = (i / steps) * Math.PI * 2;
  168. let vNext = v + 2 * Math.PI / steps;
  169. let height = Math.sin(v);
  170. let xyAmount = Math.cos(v);
  171. let heightNext = Math.sin(vNext);
  172. let xyAmountNext = Math.cos(vNext);
  173. let vertex = new THREE.Vector3(dirx * xyAmount, diry * xyAmount, height);
  174. frameGeometry.vertices.push(vertex);
  175. let vertexNext = new THREE.Vector3(dirx * xyAmountNext, diry * xyAmountNext, heightNext);
  176. frameGeometry.vertices.push(vertexNext);
  177. }
  178. }
  179. // creates rings at poles, just because it's easier to implement
  180. for(let vSegment = 0; vSegment <= vSegments + 1; vSegment++){
  181. //let height = (vSegment / (vSegments + 1)) * 2 - 1; // -1 to 1
  182. let uh = (vSegment / (vSegments + 1)); // -1 to 1
  183. uh = (1 - uh) * (-Math.PI / 2) + uh *(Math.PI / 2);
  184. let height = Math.sin(uh);
  185. console.log(uh, height);
  186. for(let i = 0; i <= steps; i++){
  187. let u = (i / steps) * Math.PI * 2;
  188. let uNext = u + 2 * Math.PI / steps;
  189. let dirx = Math.cos(u);
  190. let diry = Math.sin(u);
  191. let dirxNext = Math.cos(uNext);
  192. let diryNext = Math.sin(uNext);
  193. let xyAmount = Math.sqrt(1 - height * height);
  194. let vertex = new THREE.Vector3(dirx * xyAmount, diry * xyAmount, height);
  195. frameGeometry.vertices.push(vertex);
  196. let vertexNext = new THREE.Vector3(dirxNext * xyAmount, diryNext * xyAmount, height);
  197. frameGeometry.vertices.push(vertexNext);
  198. }
  199. }
  200. }
  201. this.frame = new THREE.LineSegments(frameGeometry, new THREE.LineBasicMaterial({color: 0x000000}));
  202. this.add(this.frame);
  203. let frameMaterial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x000000});
  204. this.frame = new THREE.Mesh(sphereGeometry, frameMaterial);
  205. //this.add(this.frame);
  206. //this.frame = new THREE.LineSegments(boxFrameGeometry, new THREE.LineBasicMaterial({color: 0x000000}));
  207. // this.frame.mode = THREE.Lines;
  208. //this.add(this.frame);
  209. this.update();
  210. }
  211. update(){
  212. this.boundingBox = this.sphere.geometry.boundingBox;
  213. this.boundingSphere = this.boundingBox.getBoundingSphere(new THREE.Sphere());
  214. }
  215. raycast (raycaster, intersects) {
  216. let is = [];
  217. this.sphere.raycast(raycaster, is);
  218. if (is.length > 0) {
  219. let I = is[0];
  220. intersects.push({
  221. distance: I.distance,
  222. object: this,
  223. point: I.point.clone()
  224. });
  225. }
  226. }
  227. // see https://en.wikipedia.org/wiki/Ellipsoid#Volume
  228. getVolume(){
  229. return (4 / 3) * Math.PI * this.scale.x * this.scale.y * this.scale.z;
  230. }
  231. };