Volume.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  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. this.update();
  111. }
  112. update(){
  113. this.boundingBox = this.box.geometry.boundingBox;
  114. this.boundingSphere = this.boundingBox.getBoundingSphere(new THREE.Sphere());
  115. if (this._clip) {
  116. this.box.visible = false;
  117. } else {
  118. this.box.visible = true;
  119. }
  120. }
  121. raycast (raycaster, intersects) {
  122. let is = [];
  123. this.box.raycast(raycaster, is);
  124. if (is.length > 0) {
  125. let I = is[0];
  126. intersects.push({
  127. distance: I.distance,
  128. object: this,
  129. point: I.point.clone()
  130. });
  131. }
  132. }
  133. getVolume(){
  134. return Math.abs(this.scale.x * this.scale.y * this.scale.z);
  135. }
  136. };
  137. export class SphereVolume extends Volume{
  138. constructor(args = {}){
  139. super(args);
  140. this.constructor.counter = (this.constructor.counter === undefined) ? 0 : this.constructor.counter + 1;
  141. this.name = 'sphere_' + this.constructor.counter;
  142. let sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
  143. sphereGeometry.computeBoundingBox();
  144. this.material = new THREE.MeshBasicMaterial({
  145. color: 0x00ff00,
  146. transparent: true,
  147. opacity: 0.3,
  148. depthTest: true,
  149. depthWrite: false});
  150. this.sphere = new THREE.Mesh(sphereGeometry, this.material);
  151. this.sphere.visible = false;
  152. this.sphere.geometry.computeBoundingBox();
  153. this.boundingBox = this.sphere.geometry.boundingBox;
  154. this.add(this.sphere);
  155. let frameGeometry = new THREE.Geometry();
  156. {
  157. let steps = 64;
  158. let uSegments = 8;
  159. let vSegments = 5;
  160. let r = 1;
  161. for(let uSegment = 0; uSegment < uSegments; uSegment++){
  162. let alpha = (uSegment / uSegments) * Math.PI * 2;
  163. let dirx = Math.cos(alpha);
  164. let diry = Math.sin(alpha);
  165. for(let i = 0; i <= steps; i++){
  166. let v = (i / steps) * Math.PI * 2;
  167. let vNext = v + 2 * Math.PI / steps;
  168. let height = Math.sin(v);
  169. let xyAmount = Math.cos(v);
  170. let heightNext = Math.sin(vNext);
  171. let xyAmountNext = Math.cos(vNext);
  172. let vertex = new THREE.Vector3(dirx * xyAmount, diry * xyAmount, height);
  173. frameGeometry.vertices.push(vertex);
  174. let vertexNext = new THREE.Vector3(dirx * xyAmountNext, diry * xyAmountNext, heightNext);
  175. frameGeometry.vertices.push(vertexNext);
  176. }
  177. }
  178. // creates rings at poles, just because it's easier to implement
  179. for(let vSegment = 0; vSegment <= vSegments + 1; vSegment++){
  180. //let height = (vSegment / (vSegments + 1)) * 2 - 1; // -1 to 1
  181. let uh = (vSegment / (vSegments + 1)); // -1 to 1
  182. uh = (1 - uh) * (-Math.PI / 2) + uh *(Math.PI / 2);
  183. let height = Math.sin(uh);
  184. console.log(uh, height);
  185. for(let i = 0; i <= steps; i++){
  186. let u = (i / steps) * Math.PI * 2;
  187. let uNext = u + 2 * Math.PI / steps;
  188. let dirx = Math.cos(u);
  189. let diry = Math.sin(u);
  190. let dirxNext = Math.cos(uNext);
  191. let diryNext = Math.sin(uNext);
  192. let xyAmount = Math.sqrt(1 - height * height);
  193. let vertex = new THREE.Vector3(dirx * xyAmount, diry * xyAmount, height);
  194. frameGeometry.vertices.push(vertex);
  195. let vertexNext = new THREE.Vector3(dirxNext * xyAmount, diryNext * xyAmount, height);
  196. frameGeometry.vertices.push(vertexNext);
  197. }
  198. }
  199. }
  200. this.frame = new THREE.LineSegments(frameGeometry, new THREE.LineBasicMaterial({color: 0x000000}));
  201. this.add(this.frame);
  202. let frameMaterial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x000000});
  203. this.frame = new THREE.Mesh(sphereGeometry, frameMaterial);
  204. //this.add(this.frame);
  205. //this.frame = new THREE.LineSegments(boxFrameGeometry, new THREE.LineBasicMaterial({color: 0x000000}));
  206. // this.frame.mode = THREE.Lines;
  207. //this.add(this.frame);
  208. this.update();
  209. }
  210. update(){
  211. this.boundingBox = this.sphere.geometry.boundingBox;
  212. this.boundingSphere = this.boundingBox.getBoundingSphere(new THREE.Sphere());
  213. }
  214. raycast (raycaster, intersects) {
  215. let is = [];
  216. this.sphere.raycast(raycaster, is);
  217. if (is.length > 0) {
  218. let I = is[0];
  219. intersects.push({
  220. distance: I.distance,
  221. object: this,
  222. point: I.point.clone()
  223. });
  224. }
  225. }
  226. // see https://en.wikipedia.org/wiki/Ellipsoid#Volume
  227. getVolume(){
  228. return (4 / 3) * Math.PI * this.scale.x * this.scale.y * this.scale.z;
  229. }
  230. };