1 /*global JXG:true, define: true*/ 2 3 import JXG from "./jxg.js"; 4 import Options from "./options.js"; 5 6 JXG.extend(Options, { 7 // infobox: { 8 // // strokeColor: 'black', 9 // // useKatex: false, 10 // // useMathjax: false 11 // }, 12 13 axes3d: { 14 /**#@+ 15 * @visprop 16 */ 17 18 /** 19 * Position of the main axes in a View3D element. Possible values are 20 * 'center', 'border' or 'none'. This attribute is immutable, i.e. 21 * can not be changed during the lifetime of the construction. 22 * 23 * @type String 24 * @name View3D#axesPosition 25 * @default 'center' 26 */ 27 axesPosition: "center", // Possible values: 'center', 'border', 'none' 28 29 // Main axes 30 /** 31 * Attributes of the centered 3D x-axis. 32 * 33 * @type Line3D 34 * @name View3D#xAxis 35 * @see View3D#axesPosition 36 */ 37 xAxis: { visible: true, point2: { name: "x" }, strokeColor: JXG.palette.red }, 38 39 /** 40 * Attributes of the centered 3D y-axis. 41 * 42 * @type Line3D 43 * @name View3D#yAxis 44 * @see View3D#axesPosition 45 */ 46 yAxis: { visible: true, point2: { name: "y" }, strokeColor: JXG.palette.green }, 47 48 /** 49 * Attributes of the centered 3D z-axis. 50 * 51 * @type Line3D 52 * @name View3D#zAxis 53 * @see View3D#axesPosition 54 */ 55 zAxis: { visible: true, point2: { name: "z" }, strokeColor: JXG.palette.blue }, 56 57 /** 58 * Attributes of the 3D x-axis at the border. 59 * 60 * @type Line3D 61 * @name View3D#xAxisBorder 62 * @see View3D#axesPosition 63 * @default <pre>{ 64 * name: 'x', 65 * withLabel: false, 66 * label: { 67 * position: '50% left', 68 * offset: [30, 0], 69 * fontsize: 15 70 * }, 71 * strokeWidth: 1, 72 * lastArrow: false, 73 * ticks3d: { 74 * label: { 75 * anchorX: 'middle', 76 * anchorY: 'middle' 77 * } 78 * } 79 *} 80 *</pre> 81 */ 82 xAxisBorder: { 83 name: 'x', 84 visible: 'ìnherit', 85 withLabel: false, 86 label: { 87 position: '50% left', 88 offset: [30, 0], 89 fontsize: 15 90 }, 91 strokeWidth: 1, 92 lastArrow: false, 93 ticks3d: { 94 visible: 'ìnherit', 95 label: { 96 anchorX: 'middle', 97 anchorY: 'middle' 98 } 99 100 } 101 }, 102 103 /** 104 * Attributes of the 3D y-axis at the border. 105 * 106 * @type Line3D 107 * @name View3D#yAxisBorder 108 * @see View3D#axesPosition 109 * @default <pre>{ 110 * name: 'x', 111 * withLabel: false, 112 * label: { 113 * position: '50% right', 114 * offset: [0, -30], 115 * fontsize: 15 116 * }, 117 * strokeWidth: 1, 118 * lastArrow: false, 119 * ticks3d: { 120 * label: { 121 * anchorX: 'middle', 122 * } 123 * } 124 *} 125 *</pre> 126 */ 127 yAxisBorder: { 128 name: 'y', 129 visible: 'ìnherit', 130 withLabel: false, 131 label: { 132 position: '50% right', 133 offset: [0, -30], 134 fontsize: 15 135 }, 136 strokeWidth: 1, 137 lastArrow: false, 138 ticks3d: { 139 visible: 'ìnherit', 140 label: { 141 anchorX: 'middle' 142 } 143 } 144 }, 145 146 /** 147 * Attributes of the 3D z-axis at the border. 148 * 149 * @type Line3D 150 * @name View3D#zAxisBorder 151 * @see View3D#axesPosition 152 * @default <pre>{ 153 * name: 'z', 154 * withLabel: false, 155 * label: { 156 * position: '50% right', 157 * offset: [30, 0], 158 * fontsize: 15 159 * }, 160 * strokeWidth: 1, 161 * lastArrow: false, 162 * ticks3d: { 163 * label: { 164 * anchorX: 'middle', 165 * anchorY: 'middle' 166 * } 167 * } 168 *} 169 *</pre> 170 */ 171 zAxisBorder: { 172 name: 'z', 173 visible: 'ìnherit', 174 withLabel: false, 175 label: { 176 position: '50% right', 177 offset: [30, 0], 178 fontsize: 15 179 }, 180 strokeWidth: 1, 181 lastArrow: false, 182 ticks3d: { 183 visible: 'ìnherit', 184 label: { 185 anchorX: 'middle', 186 anchorY: 'middle' 187 } 188 } 189 }, 190 191 // Planes 192 /** 193 * Attributes of the 3D plane orthogonal to the x-axis at the "rear" of the cube. 194 * @type Plane3D 195 * @name View3D#xPlaneRear 196 */ 197 xPlaneRear: { 198 visible: true, 199 layer: 0, 200 strokeWidth: 1, 201 strokeColor: '#dddddd', 202 fillColor: '#dddddd', 203 mesh3d: { layer: 1 } 204 }, 205 206 /** 207 * Attributes of the 3D plane orthogonal to the y-axis at the "rear" of the cube. 208 * @type Plane3D 209 * @name View3D#yPlaneRear 210 */ 211 yPlaneRear: { 212 visible: true, 213 strokeWidth: 1, 214 strokeColor: '#dddddd', 215 fillColor: '#dddddd', 216 layer: 0, 217 mesh3d: { layer: 1 } 218 }, 219 220 /** 221 * Attributes of the 3D plane orthogonal to the z-axis at the "rear" of the cube. 222 * @type Plane3D 223 * @name View3D#zPlaneRear 224 */ 225 zPlaneRear: { 226 visible: true, 227 strokeWidth: 1, 228 strokeColor: '#dddddd', 229 fillColor: '#dddddd', 230 layer: 0, 231 mesh3d: { layer: 1 } 232 }, 233 234 /** 235 * Attributes of the 3D plane orthogonal to the x-axis at the "front" of the cube. 236 * @type Plane3D 237 * @name View3D#xPlaneFront 238 */ 239 xPlaneFront: { 240 visible: false, 241 strokeWidth: 1, 242 strokeColor: '#dddddd', 243 fillColor: '#dddddd', 244 layer: 0, 245 mesh3d: { layer: 1 } 246 }, 247 /** 248 * Attributes of the 3D plane orthogonal to the y-axis at the "front" of the cube. 249 * @type Plane3D 250 * @name View3D#yPlaneFront 251 */ 252 yPlaneFront: { 253 visible: false, 254 strokeWidth: 1, 255 strokeColor: '#dddddd', 256 fillColor: '#dddddd', 257 layer: 0, 258 mesh3d: { layer: 1 } 259 }, 260 /** 261 * Attributes of the 3D plane orthogonal to the z-axis at the "front" of the cube. 262 * @type Plane3D 263 * @name View3D#zPlaneFront 264 */ 265 zPlaneFront: { 266 visible: false, 267 strokeWidth: 1, 268 strokeColor: '#dddddd', 269 fillColor: '#dddddd', 270 layer: 0, 271 mesh3d: { layer: 1 } 272 }, 273 274 // Axes on the planes 275 /** 276 * Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube. 277 * @type Plane3D 278 * @name View3D#xPlaneRearYAxis 279 */ 280 xPlaneRearYAxis: { 281 visible: "inherit", 282 strokeColor: "#888888", 283 strokeWidth: 1 284 }, 285 /** 286 * Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube. 287 * @type Plane3D 288 * @name View3D#xPlaneRearZAxis 289 */ 290 xPlaneRearZAxis: { 291 visible: "inherit", 292 strokeColor: "#888888", 293 strokeWidth: 1 294 }, 295 /** 296 * Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube. 297 * @type Plane3D 298 * @name View3D#xPlaneFrontYAxis 299 */ 300 xPlaneFrontYAxis: { 301 visible: "inherit", 302 strokeColor: "#888888", 303 strokeWidth: 1 304 }, 305 /** 306 * Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube. 307 * @type Plane3D 308 * @name View3D#xPlaneFrontZAxis 309 */ 310 xPlaneFrontZAxis: { 311 visible: "inherit", 312 strokeColor: "#888888", 313 strokeWidth: 1 314 }, 315 316 /** 317 * Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube. 318 * @type Plane3D 319 * @name View3D#yPlaneRearXAxis 320 */ 321 yPlaneRearXAxis: { 322 visible: "inherit", 323 strokeColor: "#888888", 324 strokeWidth: 1 325 }, 326 /** 327 * Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube. 328 * @type Plane3D 329 * @name View3D#yPlaneRearZAxis 330 */ 331 yPlaneRearZAxis: { 332 visible: "inherit", 333 strokeColor: "#888888", 334 strokeWidth: 1 335 }, 336 /** 337 * Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube. 338 * @type Plane3D 339 * @name View3D#yPlaneFrontXAxis 340 */ 341 yPlaneFrontXAxis: { 342 visible: "inherit", 343 strokeColor: "#888888", 344 strokeWidth: 1 345 }, 346 /** 347 * Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube. 348 * @type Plane3D 349 * @name View3D#yPlaneFrontZAxis 350 */ 351 yPlaneFrontZAxis: { 352 visible: "inherit", 353 strokeColor: "#888888", 354 strokeWidth: 1 355 }, 356 357 /** 358 * Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube. 359 * @type Plane3D 360 * @name View3D#zPlaneRearXAxis 361 */ 362 zPlaneRearXAxis: { 363 visible: "inherit", 364 strokeColor: "#888888", 365 strokeWidth: 1 366 }, 367 /** 368 * Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube. 369 * @type Plane3D 370 * @name View3D#zPlaneRearYAxis 371 */ 372 zPlaneRearYAxis: { 373 visible: "inherit", 374 strokeColor: "#888888", 375 strokeWidth: 1 376 }, 377 /** 378 * Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube. 379 * @type Plane3D 380 * @name View3D#zPlaneFrontXAxis 381 */ 382 zPlaneFrontXAxis: { 383 visible: "inherit", 384 strokeColor: "#888888", 385 strokeWidth: 1 386 }, 387 /** 388 * Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube. 389 * @type Plane3D 390 * @name View3D#zPlaneFrontYAxis 391 */ 392 zPlaneFrontYAxis: { 393 visible: "inherit", 394 strokeColor: "#888888", 395 strokeWidth: 1 396 } 397 398 /**#@-*/ 399 }, 400 401 axis3d: { 402 highlight: false, 403 fixed: true, 404 strokeColor: "black", 405 strokeWidth: 1, 406 tabindex: null, 407 408 point1: { visible: false, name: "", withLabel: false }, 409 point2: { visible: false, name: "", withLabel: false, label: { visible: true } } 410 }, 411 412 circle3d: { 413 414 layer: 12, 415 point: { visible: false, name: "" }, 416 needsRegularUpdate: true 417 418 }, 419 420 curve3d: { 421 /**#@+ 422 * @visprop 423 */ 424 425 layer: 12, 426 highlight: false, 427 tabindex: -1, 428 strokeWidth: 1, 429 numberPointsHigh: 200, 430 needsRegularUpdate: true 431 432 /**#@-*/ 433 }, 434 435 face3d: { 436 /**#@+ 437 * @visprop 438 */ 439 440 transitionProperties: [], 441 layer: 12, 442 highlight: false, 443 tabindex: null, 444 strokeWidth: 1, 445 fillColor: JXG.palette.yellow, 446 fillOpacity: 0.4, 447 needsRegularUpdate: true, 448 449 /** 450 * Shading of faces. For this, the HSL color scheme is used. 451 * Two types are possible: either by 'angle' or by 'zIndex'. 452 * By default (i.e. type:'angle'), the angle between the camera axis and the normal of the 453 * face determines the lightness value of the HSL color. Otherwise, the 454 * zIndex of the face determines the lightness value of the HSL color. 455 * 456 * @type Object 457 * @name Face3D#shader 458 * @see View3D#depthOrder 459 * @default <pre>{ 460 * enabled: false, 461 * type: 'angle', // 'angle', otherwise zIndex 462 * hue: 60, // yellow 463 * saturation: 90, 464 * minLightness: 30, 465 * maxLightness: 90 466 * }</pre> 467 * 468 * @example 469 * var view = board.create( 470 * 'view3d', 471 * [[-5, -3], [8, 8], 472 * [[-3, 3], [-3, 3], [-3, 3]]], 473 * { 474 * projection: 'central', 475 * trackball: { enabled: true }, 476 * depthOrder: { 477 * enabled: true 478 * }, 479 * xPlaneRear: { visible: false }, 480 * yPlaneRear: { visible: false }, 481 * zPlaneRear: { fillOpacity: 0.2, visible: true } 482 * } 483 * ); 484 * 485 * let rho = 1.6180339887; 486 * let vertexList = [ 487 * [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho], 488 * [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0], 489 * [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1] 490 * ]; 491 * let faceArray = [ 492 * [4, 1, 11], 493 * [11, 1, 0], 494 * [6, 11, 0], 495 * [0, 1, 9], 496 * [11, 10, 4], 497 * [9, 1, 5], 498 * [8, 9, 5], 499 * [5, 3, 8], 500 * [6, 10, 11], 501 * [2, 3, 10], 502 * [2, 10, 6], 503 * [8, 3, 2], 504 * [3, 4, 10], 505 * [7, 8, 2], 506 * [9, 8, 7], 507 * [0, 9, 7], 508 * [4, 3, 5], 509 * [5, 1, 4], 510 * [0, 7, 6], 511 * [7, 2, 6] 512 * ]; 513 * var ico = view.create('polyhedron3d', [vertexList, faceArray], { 514 * fillColorArray: [], 515 * fillOpacity: 1, 516 * strokeWidth: 0.1, 517 * layer: 12, 518 * shader: { 519 * enabled: true, 520 * type: 'angle', 521 * hue: 0, 522 * saturation: 90, 523 * minlightness: 60, 524 * maxLightness: 80 525 * } 526 * }); 527 * 528 * </pre><div id="JXGbf32b040-affb-4e03-a05b-abfe953f614d" class="jxgbox" style="width: 300px; height: 300px;"></div> 529 * <script type="text/javascript"> 530 * (function() { 531 * var board = JXG.JSXGraph.initBoard('JXGbf32b040-affb-4e03-a05b-abfe953f614d', 532 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false, 533 * pan: {enabled: false}, zoom: {enabled: false}}); 534 * var view = board.create( 535 * 'view3d', 536 * [[-5, -3], [8, 8], 537 * [[-3, 3], [-3, 3], [-3, 3]]], 538 * { 539 * projection: 'central', 540 * trackball: { enabled: true }, 541 * depthOrder: { 542 * enabled: true 543 * }, 544 * xPlaneRear: { visible: false }, 545 * yPlaneRear: { visible: false }, 546 * zPlaneRear: { fillOpacity: 0.2, visible: true } 547 * } 548 * ); 549 * 550 * let rho = 1.6180339887; 551 * let vertexList = [ 552 * [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho], 553 * [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0], 554 * [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1] 555 * ]; 556 * let faceArray = [ 557 * [4, 1, 11], 558 * [11, 1, 0], 559 * [6, 11, 0], 560 * [0, 1, 9], 561 * [11, 10, 4], 562 * [9, 1, 5], 563 * [8, 9, 5], 564 * [5, 3, 8], 565 * [6, 10, 11], 566 * [2, 3, 10], 567 * [2, 10, 6], 568 * [8, 3, 2], 569 * [3, 4, 10], 570 * [7, 8, 2], 571 * [9, 8, 7], 572 * [0, 9, 7], 573 * [4, 3, 5], 574 * [5, 1, 4], 575 * [0, 7, 6], 576 * [7, 2, 6] 577 * ]; 578 * var ico = view.create('polyhedron3d', [vertexList, faceArray], { 579 * fillColorArray: [], 580 * fillOpacity: 1, 581 * strokeWidth: 0.1, 582 * layer: 12, 583 * shader: { 584 * enabled: true, 585 * type: 'angle', 586 * hue: 0, 587 * saturation: 90, 588 * minlightness: 60, 589 * maxLightness: 80 590 * } 591 * }); 592 * 593 * })(); 594 * 595 * </script><pre> 596 * 597 */ 598 shader: { 599 enabled: false, 600 type: 'angle', // 'angle', otherwise zIndex 601 hue: 60, // yellow 602 saturation: 90, 603 minLightness: 30, 604 maxLightness: 90 605 } 606 607 /**#@-*/ 608 }, 609 610 intersectionline3d: { 611 point1: { visible: false, name: "" }, // Used in point/point 612 point2: { visible: false, name: "" } 613 }, 614 615 line3d: { 616 /**#@+ 617 * @visprop 618 */ 619 620 layer: 12, 621 strokeWidth: 1, 622 strokeColor: "black", 623 fixed: true, 624 tabindex: null, 625 gradient: "linear", 626 gradientSecondColor: "#ffffff", 627 needsRegularUpdate: true, 628 629 /** 630 * Attributes of the defining point in case the line is defined by [point, vector, [range]] 631 * @type Point3D 632 * @name Line3D#point 633 * @default <pre>visible: false, name: ""</pre> 634 */ 635 point: { visible: false, name: "" }, // Used in cases of point/direction/range 636 637 /** 638 * Attributes of the first point in case the line is defined by [point, point]. 639 * @type Point3D 640 * @name Line3D#point1 641 * @default <pre>visible: false, name: ""</pre> 642 */ 643 point1: { visible: false, name: "" }, // Used in point/point 644 645 /** 646 * Attributes of the second point in case the line is defined by [point, point]. 647 * @type Point3D 648 * @name Line3D#point2 649 * @default <pre>visible: false, name: ""</pre> 650 */ 651 point2: { visible: false, name: "" }, 652 653 /** 654 * If the 3D line is defined by two points and if this attribute is true, 655 * the 3D line stretches infinitely in direction of its first point. 656 * Otherwise it ends at point1. 657 * 658 * @name Line3D#straightFirst 659 * @see Line3D#straightLast 660 * @type Boolean 661 * @default false 662 */ 663 straightFirst: false, 664 665 666 /** 667 * If the 3D line is defined by two points and if this attribute is true, 668 * the 3D line stretches infinitely in direction of its second point. 669 * Otherwise it ends at point2. 670 * 671 * @name Line3D#straightLast 672 * @see Line3D#straightFirst 673 * @type Boolean 674 * @default false 675 */ 676 straightLast: false 677 678 /**#@-*/ 679 }, 680 681 mesh3d: { 682 /**#@+ 683 * @visprop 684 */ 685 686 layer: 12, 687 strokeWidth: 1, 688 strokeColor: "#9a9a9a", 689 strokeOpacity: 0.6, 690 highlight: false, 691 tabindex: null, 692 needsRegularUpdate: true, 693 694 /** 695 * Step width of the mesh in the direction of the first spanning vector. 696 * @type {Number} 697 * @name Mesh3D#stepWidthU 698 * @default 1 699 * 700 */ 701 stepWidthU: 1, 702 703 /** 704 * Step width of the mesh in the direction of the second spanning vector. 705 * 706 * @type {Number} 707 * @name Mesh3D#stepWidthV 708 * @default 1 709 * 710 */ 711 stepWidthV: 1 712 713 /**#@-*/ 714 }, 715 716 plane3d: { 717 /**#@+ 718 * @visprop 719 */ 720 721 layer: 12, 722 strokeWidth: 0, 723 strokeColor: "black", 724 strokeOpacity: 1, 725 highlight: false, 726 tabindex: null, 727 needsRegularUpdate: true, 728 visible: true, 729 730 gradient: "linear", 731 gradientSecondColor: "#ffffff", 732 gradientAngle: Math.PI, 733 fillColor: "#a7a7a7", 734 fillOpacity: 0.6, 735 736 /** 737 * Optional 3D mesh of a finite plane. 738 * It is not available if the plane is infinite (at initialization time) in any direction. 739 * 740 * @type Mesh3D 741 * @name Plane3D#mesh3d 742 * @default see {@link Mesh3D} 743 */ 744 mesh3d: { 745 visible: "inherit" 746 }, 747 748 /** 749 * If the second parameter and the third parameter are given as arrays or functions and threePoints:true 750 * then the second and third parameter are interpreted as point coordinates and not as directions, i.e. 751 * the plane is defined by three points. 752 * 753 * @name Plane3D#threePoints 754 * @type Boolean 755 * @default false 756 */ 757 threePoints: false, 758 759 /** 760 * Attributes of the defining point in case the plane is defined by [point, direction1, direction2, [range1, [range2]]]. 761 * @type Point3D 762 * @name Plane3D#point 763 * @default <pre>visible: false, name: "", fixed: true</pre> 764 */ 765 point: { visible: false, name: "", fixed: true }, 766 767 /** 768 * Attributes of the first point in case the plane is defined by [point, point, point]. 769 * @type Point3D 770 * @name Plane3D#point1 771 * @default <pre>visible: false, name: ""</pre> 772 */ 773 point1: { visible: false, name: "" }, // Used in point/point/point 774 775 /** 776 * Attributes of the second point in case the plane is defined by [point, point, point]. 777 * @type Point3D 778 * @name Plane3D#point2 779 * @default <pre>visible: false, name: ""</pre> 780 */ 781 point2: { visible: false, name: "" }, // Used in point/point/point 782 783 /** 784 * Attributes of the third point in case the plane is defined by [point, point, point]. 785 * @type Point3D 786 * @name Plane3D#point3 787 * @default <pre>visible: false, name: ""</pre> 788 */ 789 point3: { visible: false, name: "" } // Used in point/point/point 790 791 /**#@-*/ 792 }, 793 794 point3d: { 795 layer: 13, 796 infoboxDigits: "auto", 797 strokeWidth: 0, 798 gradient: "radial", 799 gradientSecondColor: "#555555", 800 fillColor: "yellow", 801 highlightStrokeColor: "#555555", 802 gradientFX: 0.7, 803 gradientFY: 0.3, 804 needsRegularUpdate: true 805 }, 806 807 polygon3d: { 808 /**#@+ 809 * @visprop 810 */ 811 812 layer: 12, 813 highlight: false, 814 tabindex: -1, 815 strokeWidth: 1, 816 fillColor: 'none', 817 needsRegularUpdate: true 818 819 820 /**#@-*/ 821 }, 822 823 polyhedron3d: { 824 /**#@+ 825 * @visprop 826 */ 827 828 /** 829 * Color array to define fill colors of faces cyclically. 830 * Alternatively, the fill color can be defined for each face individually. 831 * 832 * @type Array 833 * @name Polyhedron3D#fillColorArray 834 * @default ['white', 'black'] 835 */ 836 fillColorArray: ['white', 'black'], 837 838 needsRegularUpdate: true 839 840 /**#@-*/ 841 }, 842 843 sphere3d: { 844 /**#@+ 845 * @visprop 846 */ 847 848 layer: 12, 849 highlight: false, 850 851 strokeWidth: 1, 852 strokeColor: '#00ff80', 853 fillColor: 'white', 854 gradient: 'radial', 855 gradientSecondColor: '#00ff80', 856 gradientFX: 0.7, 857 gradientFY: 0.3, 858 fillOpacity: 0.4, 859 needsRegularUpdate: true 860 861 /**#@-*/ 862 }, 863 864 surface3d: { 865 /**#@+ 866 * @visprop 867 */ 868 869 layer: 12, 870 highlight: false, 871 tabindex: -1, 872 strokeWidth: 1, 873 874 /** 875 * Number of intervals the mesh is divided into in direction of parameter u. 876 * @type Number 877 * @name ParametricSurface3D#stepsU 878 */ 879 stepsU: 30, 880 881 /** 882 * Number of intervals the mesh is divided into in direction of parameter v. 883 * @type Number 884 * @name ParametricSurface3D#stepsV 885 */ 886 stepsV: 30, 887 888 needsRegularUpdate: true 889 890 /**#@-*/ 891 }, 892 893 text3d: { 894 /**#@+ 895 * @visprop 896 */ 897 898 withLabel: false, 899 needsRegularUpdate: true 900 901 /**#@-*/ 902 }, 903 904 ticks3d: { 905 /**#@+ 906 * @visprop 907 */ 908 909 visible: true, 910 911 ticksDistance: 1, 912 majorHeight: 10, 913 minorTicks: 0, 914 tickEndings: [0, 1], 915 drawLabels: true, 916 needsRegularUpdate: true, 917 918 label: { 919 visible: true, 920 withLabel: false 921 } 922 923 /**#@-*/ 924 }, 925 926 vectorfield3d: { 927 /**#@+ 928 * @visprop 929 */ 930 931 /** 932 * Scaling factor of the vectors. This in contrast to slope fields, where this attribute sets the vector to the given length. 933 * @name scale 934 * @memberOf Vectorfield3D.prototype 935 * @type {Number|Function} 936 * @see Slopefield.scale 937 * @default 1 938 */ 939 scale: 1, 940 941 /** 942 * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance. 943 * Fields are: 944 * <ul> 945 * <li> enabled: Boolean 946 * <li> size: length of the arrow head legs (in pixel) 947 * <li> angle: angle of the arrow head legs In radians. 948 * </ul> 949 * @name arrowhead 950 * @memberOf Vectorfield3D.prototype 951 * @type {Object} 952 * @default <tt>{enabled: true, size: 5, angle: Math.PI * 0.125}</tt> 953 */ 954 arrowhead: { 955 enabled: true, 956 size: 5, 957 angle: Math.PI * 0.125 958 }, 959 needsRegularUpdate: true 960 961 /**#@-*/ 962 }, 963 964 view3d: { 965 /**#@+ 966 * @visprop 967 */ 968 969 needsRegularUpdate: true, 970 971 /** 972 * When this attribute is enabled, elements closer to the screen are drawn 973 * over elements further from the screen within the 3D layer. This affects 974 * all elements which are in one of the layer specified in the sub-attribute 'layers'. 975 * <p> 976 * For each layer this depth ordering is done independently. 977 * Sub-attributes: 978 * <ul> 979 * <li><tt>enabled</tt>: false/true 980 * <li><tt>layers</tt>: [12, 13] 981 * </ul> 982 * 983 * @name View3D#depthOrder 984 * @type Object 985 * @default <pre>{ 986 * enabled: false, 987 * layers: [12, 13] 988 * } 989 * </pre> 990 */ 991 depthOrder: { 992 enabled: false, 993 layers: [12, 13] 994 }, 995 996 /** 997 * Choose the projection type to be used: `parallel` or `central`. 998 * <ul> 999 * <li> `parallel` is parallel projection, also called orthographic projection 1000 * <li> `central` is central projection, also called perspective projection 1001 * </ul> 1002 * 1003 * 1004 * @name View3D#projection 1005 * @type String 1006 * @default 'parallel' 1007 * @example 1008 * var bound = [-5, 5]; 1009 * var view = board.create('view3d', 1010 * [[-6, -3], [8, 8], 1011 * [bound, bound, bound]], 1012 * { 1013 * projection: 'parallel' 1014 * }); 1015 * 1016 * </pre><div id="JXG80d81b13-c604-4841-bdf6-62996440088a" class="jxgbox" style="width: 300px; height: 300px;"></div> 1017 * <script type="text/javascript"> 1018 * (function() { 1019 * var board = JXG.JSXGraph.initBoard('JXG80d81b13-c604-4841-bdf6-62996440088a', 1020 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1021 * var bound = [-5, 5]; 1022 * var view = board.create('view3d', 1023 * [[-6, -3], [8, 8], 1024 * [bound, bound, bound]], 1025 * { 1026 * projection: 'parallel' 1027 * }); 1028 * 1029 * })(); 1030 * 1031 * </script><pre> 1032 * 1033 * @example 1034 * var bound = [-5, 5]; 1035 * var view = board.create('view3d', 1036 * [[-6, -3], [8, 8], 1037 * [bound, bound, bound]], 1038 * { 1039 * projection: 'central' 1040 * }); 1041 * 1042 * </pre><div id="JXGdb7b7c99-631c-41d0-99bf-c0a8d0138218" class="jxgbox" style="width: 300px; height: 300px;"></div> 1043 * <script type="text/javascript"> 1044 * (function() { 1045 * var board = JXG.JSXGraph.initBoard('JXGdb7b7c99-631c-41d0-99bf-c0a8d0138218', 1046 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1047 * var bound = [-5, 5]; 1048 * var view = board.create('view3d', 1049 * [[-6, -3], [8, 8], 1050 * [bound, bound, bound]], 1051 * { 1052 * projection: 'central' 1053 * }); 1054 * })(); 1055 * 1056 * </script><pre> 1057 * 1058 */ 1059 projection: 'parallel', 1060 1061 /** 1062 * Allow vertical dragging of objects, i.e. in direction of the z-axis. 1063 * Subobjects are 1064 * <ul> 1065 * <li>enabled: true 1066 * <li>key: 'shift' 1067 * </ul> 1068 * <p> 1069 * Possible values for attribute <i>key</i>: 'shift' or 'ctrl'. 1070 * 1071 * @name View3D#verticalDrag 1072 * @type Object 1073 * @default <tt>{enabled: true, key: 'shift'}</tt> 1074 */ 1075 verticalDrag: { 1076 enabled: true, 1077 key: 'shift' 1078 }, 1079 1080 /** 1081 * Specify the user handling of the azimuth. 1082 * <ul> 1083 * <li><tt>pointer</tt> sub-attributes: 1084 * <ul> 1085 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by azimuth. 1086 * <li><tt>speed</tt>: Number indicating how many passes the range of the az_slider makes when the cursor crosses the entire board once in the horizontal direction. 1087 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1088 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1089 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1090 * </ul> 1091 * <li><tt>keyboard</tt> sub-attributes: 1092 * <ul> 1093 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard (left/right arrow keys) can be used to navigate the board. 1094 * <li><tt>step</tt>: Size of the step per keystroke. 1095 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1096 * </ul> 1097 * <li><tt>continuous</tt>: Boolean that specifies whether the az_slider starts again from the beginning when its end is reached. 1098 * <li><tt>slider</tt> attributes of the az_slider ({@link Slider}) with additional 1099 * <ul> 1100 * <li><tt>min</tt>: Minimum value. 1101 * <li><tt>max</tt>: Maximum value. 1102 * <li><tt>start</tt>: Start value. 1103 * </ul> 1104 * 'min' and 'max' are used only if trackball is not enabled. 1105 * Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible 1106 * values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array). 1107 * </ul> 1108 * 1109 * @name View3D#az 1110 * @type Object 1111 * @default <pre>{ 1112 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1113 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1114 * continuous: true, 1115 * slider: { 1116 * visible: true, 1117 * style: 6, 1118 * point1: { 1119 * pos: 'auto', 1120 * frozen: false 1121 * }, 1122 * point2: { 1123 * pos: 'auto', 1124 * frozen: false 1125 * }, 1126 * min: 0, 1127 * max: 2 * Math.PI, 1128 * start: 1.0 1129 * }, 1130 * }</pre> 1131 * 1132 * @example 1133 * var bound = [-4, 6]; 1134 * var view = board.create('view3d', 1135 * [[-4, -3], [8, 8], 1136 * [bound, bound, bound]], 1137 * { 1138 * projection: 'parallel', 1139 * az: { 1140 * slider: {visible: true, start: 0.75 * Math.PI} 1141 * } 1142 * }); 1143 * 1144 * </pre><div id="JXG4c381f21-f043-4419-941d-75f384c026d0" class="jxgbox" style="width: 300px; height: 300px;"></div> 1145 * <script type="text/javascript"> 1146 * (function() { 1147 * var board = JXG.JSXGraph.initBoard('JXG4c381f21-f043-4419-941d-75f384c026d0', 1148 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1149 * var bound = [-4, 6]; 1150 * var view = board.create('view3d', 1151 * [[-4, -3], [8, 8], 1152 * [bound, bound, bound]], 1153 * { 1154 * projection: 'parallel', 1155 * az: { 1156 * slider: {visible: true, start: 0.75 * Math.PI} 1157 * } 1158 * }); 1159 * 1160 * })(); 1161 * 1162 * </script><pre> 1163 * 1164 */ 1165 az: { 1166 pointer: { 1167 enabled: true, 1168 speed: 1, 1169 outside: true, 1170 button: -1, 1171 key: 'none' 1172 }, 1173 keyboard: { 1174 enabled: true, 1175 step: 10, 1176 key: 'ctrl' 1177 }, 1178 continuous: true, 1179 slider: { 1180 visible: 'inherit', 1181 style: 6, 1182 point1: { 1183 pos: 'auto', 1184 frozen: false 1185 }, 1186 point2: { 1187 pos: 'auto', 1188 frozen: false 1189 }, 1190 min: 0, 1191 max: 2 * Math.PI, 1192 start: 1.0 1193 } 1194 }, 1195 1196 /** 1197 * Specify the user handling of the elevation. 1198 * <ul> 1199 * <li><tt>pointer</tt> sub-attributes: 1200 * <ul> 1201 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 1202 * <li><tt>speed</tt>: Number indicating how many passes the range of the el_slider makes when the cursor crosses the entire board once in the horizontal direction. 1203 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1204 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1205 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1206 * </ul> 1207 * <li><tt>keyboard</tt> sub-attributes: 1208 * <ul> 1209 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard (up/down arrow keys) can be used to navigate the board. 1210 * <li><tt>step</tt>: Size of the step per keystroke. 1211 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1212 * </ul> 1213 * <li><tt>continuous</tt>: Boolean that specifies whether the el_slider starts again from the beginning when its end is reached. 1214 * <li><tt>slider</tt> attributes of the el_slider ({@link Slider}) with additional 1215 * <ul> 1216 * <li><tt>min</tt>: Minimum value. 1217 * <li><tt>max</tt>: Maximum value. 1218 * <li><tt>start</tt>: Start value. 1219 * </ul> 1220 * 'min' and 'max' are used only if trackball is not enabled. 1221 * Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible 1222 * values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array). 1223 * </ul> 1224 * 1225 * @name View3D#el 1226 * @type Object 1227 * @default <pre>{ 1228 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1229 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1230 * continuous: true, 1231 * slider: { 1232 * visible: true, 1233 * style: 6, 1234 * point1: { 1235 * pos: 'auto', 1236 * frozen: false 1237 * }, 1238 * point2: { 1239 * pos: 'auto', 1240 * frozen: false 1241 * }, 1242 * min: 0, 1243 * max: 2 * Math.PI, 1244 * start: 0.3 1245 * }, 1246 * }<pre> 1247 * @example 1248 * var bound = [-4, 6]; 1249 * var view = board.create('view3d', 1250 * [[-4, -3], [8, 8], 1251 * [bound, bound, bound]], 1252 * { 1253 * projection: 'parallel', 1254 * el: { 1255 * slider: {visible: true} 1256 * } 1257 * }); 1258 * 1259 * </pre><div id="JXG8926f733-c42e-466b-853c-74feb795e879" class="jxgbox" style="width: 300px; height: 300px;"></div> 1260 * <script type="text/javascript"> 1261 * (function() { 1262 * var board = JXG.JSXGraph.initBoard('JXG8926f733-c42e-466b-853c-74feb795e879', 1263 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1264 * var bound = [-4, 6]; 1265 * var view = board.create('view3d', 1266 * [[-4, -3], [8, 8], 1267 * [bound, bound, bound]], 1268 * { 1269 * projection: 'parallel', 1270 * el: { 1271 * slider: {visible: true} 1272 * } 1273 * }); 1274 * 1275 * })(); 1276 * 1277 * </script><pre> 1278 * 1279 */ 1280 el: { 1281 pointer: { 1282 enabled: true, 1283 speed: 1, 1284 outside: true, 1285 button: -1, 1286 key: 'none' 1287 }, 1288 keyboard: { 1289 enabled: true, 1290 step: 10, 1291 key: 'ctrl' 1292 }, 1293 continuous: true, 1294 slider: { 1295 visible: 'inherit', 1296 style: 6, 1297 point1: { 1298 frozen: false, 1299 pos: 'auto' 1300 }, 1301 point2: { 1302 frozen: false, 1303 pos: 'auto' 1304 }, 1305 min: 0, 1306 max: 2 * Math.PI, 1307 start: 0.3 1308 } 1309 }, 1310 1311 /** 1312 * Specify the user handling of the bank angle. 1313 * <ul> 1314 * <li><tt>pointer</tt> sub-attributes: 1315 * <ul> 1316 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 1317 * <li><tt>speed</tt>: Number indicating how many passes the range of the el_slider makes when the cursor crosses the entire board once in the horizontal direction. 1318 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1319 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1320 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1321 * </ul> 1322 * <li><tt>keyboard</tt> sub-attributes: 1323 * <ul> 1324 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard ('<', '>' keys) can be used to navigate the board. 1325 * <li><tt>step</tt>: Size of the step per keystroke. 1326 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1327 * </ul> 1328 * <li><tt>continuous</tt>: Boolean that specifies whether the el_slider starts again from the beginning when its end is reached. 1329 * <li><tt>slider</tt> attributes of the el_slider ({@link Slider}) with additional 1330 * <ul> 1331 * <li><tt>min</tt>: Minimum value. 1332 * <li><tt>max</tt>: Maximum value. 1333 * <li><tt>start</tt>: Start value. 1334 * </ul> 1335 * 'min' and 'max' are used only if trackball is not enabled. 1336 * Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible 1337 * values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array). 1338 * </ul> 1339 * 1340 * @name View3D#bank 1341 * @type Object 1342 * @default <pre>{ 1343 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1344 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1345 * continuous: true, 1346 * slider: { 1347 * visible: true, 1348 * style: 6, 1349 * point1: { 1350 * pos: 'auto', 1351 * frozen: false 1352 * }, 1353 * point2: { 1354 * pos: 'auto', 1355 * frozen: false 1356 * }, 1357 * min: 0, 1358 * max: 2 * Math.PI, 1359 * start: 0.3 1360 * }, 1361 * }<pre> 1362 * @example 1363 * var bound = [-4, 6]; 1364 * var view = board.create('view3d', 1365 * [[-4, -3], [8, 8], 1366 * [bound, bound, bound]], 1367 * { 1368 * projection: 'parallel', 1369 * bank: { 1370 * slider: {visible: true} 1371 * } 1372 * }); 1373 * 1374 * </pre><div id="JXGb67811ea-c1e3-4d1e-b13c-3537b3436f6c" class="jxgbox" style="width: 300px; height: 300px;"></div> 1375 * <script type="text/javascript"> 1376 * (function() { 1377 * var board = JXG.JSXGraph.initBoard('JXGb67811ea-c1e3-4d1e-b13c-3537b3436f6c', 1378 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1379 * var bound = [-4, 6]; 1380 * var view = board.create('view3d', 1381 * [[-4, -3], [8, 8], 1382 * [bound, bound, bound]], 1383 * { 1384 * projection: 'parallel', 1385 * bank: { 1386 * slider: {visible: true} 1387 * } 1388 * }); 1389 * 1390 * })(); 1391 * 1392 * </script><pre> 1393 * 1394 */ 1395 bank: { 1396 pointer: { 1397 enabled: true, 1398 speed: 0.08, 1399 outside: true, 1400 button: -1, 1401 key: 'none' 1402 }, 1403 keyboard: { 1404 enabled: true, 1405 step: 10, 1406 key: 'ctrl' 1407 }, 1408 continuous: true, 1409 slider: { 1410 visible: 'inherit', 1411 style: 6, 1412 point1: { 1413 frozen: false, 1414 pos: 'auto' 1415 }, 1416 point2: { 1417 frozen: false, 1418 pos: 'auto' 1419 }, 1420 min: -Math.PI, 1421 max: Math.PI, 1422 start: 0.0 1423 } 1424 }, 1425 1426 /** 1427 * Enable user handling by a virtual trackball that allows to move the 3D scene 1428 * with 3 degrees of freedom. If not enabled, direct user dragging (i.e. in the JSXGraph board, not manipulating the sliders) will only have 1429 * two degrees of freedom. This means, the z-axis will always be projected to a vertical 2D line. 1430 * <p> 1431 * Sub-attributes: 1432 * <ul> 1433 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 1434 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1435 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1436 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1437 * </ul> 1438 * 1439 * @name View3D#trackball 1440 * @type Object 1441 * @default <pre>{ 1442 * enabled: false, 1443 * outside: true, 1444 * button: -1, 1445 * key: 'none' 1446 * } 1447 * </pre> 1448 */ 1449 trackball: { 1450 enabled: false, 1451 outside: true, 1452 button: -1, 1453 key: 'none' 1454 }, 1455 1456 /** 1457 * Distance of the camera to the center of the view. 1458 * If set to 'auto', r will be calculated automatically. 1459 * 1460 * @type {Number|String} 1461 * @default 'auto' 1462 */ 1463 r: 'auto', 1464 1465 /** 1466 * Field of View defines the angle of view (in radians) of the camera, determining how much of the scene is captured within the frame. 1467 * 1468 * @type Number 1469 * @default 2/5*Math.PI 1470 */ 1471 fov: 1 / 5 * 2 * Math.PI, 1472 1473 /** 1474 * Fixed values for the view, which can be changed using keyboard keys `picture-up` and `picture-down`. 1475 * Array of the form: [[el0, az0, r0], [el1, az1, r1, ...[eln, azn, rn]] 1476 * 1477 * @name View3D#values 1478 * @type Array 1479 * @default <tt>{[[0, 1.57], [0.78, 0.62], [0, 0], [5.49, 0.62], [4.71, 0], [3.93, 0.62], [3.14, 0], [2.36, 0.62], [1.57, 1.57]]}<tt> 1480 */ 1481 values: [ 1482 [0, 1.57], 1483 [0.78, 0.62], 1484 [0, 0], 1485 [5.49, 0.62], 1486 [4.71, 0], 1487 [3.93, 0.62], 1488 [3.14, 0], 1489 [2.36, 0.62], 1490 [1.57, 1.57] 1491 ], 1492 1493 infobox: { 1494 // strokeColor: '#888888', 1495 strokeColor: '#000000', 1496 fontSize: 16, 1497 useKatex: false, 1498 useMathjax: false, 1499 intl: { 1500 enabled: true, 1501 options: { 1502 minimumFractionDigits: 2, 1503 maximumFractionDigits: 3 1504 } 1505 } 1506 }, 1507 1508 /** 1509 * @class 1510 * @ignore 1511 */ 1512 _currentView: -1 1513 1514 /**#@-*/ 1515 } 1516 }); 1517 1518 export default JXG.Options; 1519