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 * Suppress label with `withLabel: false`. 33 * 34 * @type Line3D 35 * @name View3D#xAxis 36 * @see View3D#axesPosition 37 */ 38 xAxis: { 39 name: 'X', 40 withlabel: true, 41 visible: true, 42 layer: 12, 43 point2: { name: 'x' }, // Obsolete 44 strokeColor: JXG.palette.red 45 }, 46 47 /** 48 * Attributes of the centered 3D y-axis. 49 * Suppress label with `withLabel: false`. 50 * 51 * @type Line3D 52 * @name View3D#yAxis 53 * @see View3D#axesPosition 54 */ 55 yAxis: { 56 name: 'Y', 57 withlabel: true, 58 visible: true, 59 layer: 12, 60 point2: { name: 'y' }, // Obsolete 61 strokeColor: JXG.palette.green 62 }, 63 64 /** 65 * Attributes of the centered 3D z-axis. 66 * Suppress label with `withLabel: false`. 67 * 68 * @type Line3D 69 * @name View3D#zAxis 70 * @see View3D#axesPosition 71 */ 72 zAxis: { 73 name: 'Z', 74 visible: true, 75 withlabel: true, 76 layer: 12, 77 point2: { name: '' }, // Obsolete 78 strokeColor: JXG.palette.blue 79 }, 80 81 /** 82 * Attributes of the 3D x-axis at the border. 83 * 84 * @type Line3D 85 * @name View3D#xAxisBorder 86 * @see View3D#axesPosition 87 * @default <pre>{ 88 * name: 'x', 89 * withLabel: false, 90 * label: { 91 * position: '50% left', 92 * offset: [30, 0], 93 * fontsize: 15 94 * }, 95 * strokeWidth: 1, 96 * lastArrow: false, 97 * ticks3d: { 98 * label: { 99 * anchorX: 'middle', 100 * anchorY: 'middle' 101 * } 102 * } 103 *} 104 *</pre> 105 */ 106 xAxisBorder: { 107 name: 'x', 108 visible: 'ìnherit', 109 withLabel: false, 110 label: { 111 position: '50% left', 112 offset: [30, 0], 113 fontsize: 15 114 }, 115 strokeWidth: 1, 116 lastArrow: false, 117 ticks3d: { 118 visible: 'ìnherit', 119 label: { 120 anchorX: 'middle', 121 anchorY: 'middle' 122 } 123 124 } 125 }, 126 127 /** 128 * Attributes of the 3D y-axis at the border. 129 * 130 * @type Line3D 131 * @name View3D#yAxisBorder 132 * @see View3D#axesPosition 133 * @default <pre>{ 134 * name: 'x', 135 * withLabel: false, 136 * label: { 137 * position: '50% right', 138 * offset: [0, -30], 139 * fontsize: 15 140 * }, 141 * strokeWidth: 1, 142 * lastArrow: false, 143 * ticks3d: { 144 * label: { 145 * anchorX: 'middle', 146 * } 147 * } 148 *} 149 *</pre> 150 */ 151 yAxisBorder: { 152 name: 'y', 153 visible: 'ìnherit', 154 withLabel: false, 155 label: { 156 position: '50% right', 157 offset: [0, -30], 158 fontsize: 15 159 }, 160 strokeWidth: 1, 161 lastArrow: false, 162 ticks3d: { 163 visible: 'ìnherit', 164 label: { 165 anchorX: 'middle' 166 } 167 } 168 }, 169 170 /** 171 * Attributes of the 3D z-axis at the border. 172 * 173 * @type Line3D 174 * @name View3D#zAxisBorder 175 * @see View3D#axesPosition 176 * @default <pre>{ 177 * name: 'z', 178 * withLabel: false, 179 * label: { 180 * position: '50% right', 181 * offset: [30, 0], 182 * fontsize: 15 183 * }, 184 * strokeWidth: 1, 185 * lastArrow: false, 186 * ticks3d: { 187 * label: { 188 * anchorX: 'middle', 189 * anchorY: 'middle' 190 * } 191 * } 192 *} 193 *</pre> 194 */ 195 zAxisBorder: { 196 name: 'z', 197 visible: 'ìnherit', 198 withLabel: false, 199 label: { 200 position: '50% right', 201 offset: [30, 0], 202 fontsize: 15 203 }, 204 strokeWidth: 1, 205 lastArrow: false, 206 ticks3d: { 207 visible: 'ìnherit', 208 label: { 209 anchorX: 'middle', 210 anchorY: 'middle' 211 } 212 } 213 }, 214 215 // Planes 216 /** 217 * Attributes of the 3D plane orthogonal to the x-axis at the "rear" of the cube. 218 * @type Plane3D 219 * @name View3D#xPlaneRear 220 */ 221 xPlaneRear: { 222 visible: true, 223 layer: 0, 224 strokeWidth: 1, 225 strokeColor: '#dddddd', 226 fillColor: '#dddddd', 227 mesh3d: { layer: 1 }, 228 229 stepsU: 10, 230 stepsV: 10, 231 tiling: 'rectangle', 232 polyhedron: { 233 visible: 'inherit', 234 strokeWidth: 0.5, 235 strokeOpacity: 0.7, 236 strokeColor: '#cccccc', 237 fillOpacity: 0.30, 238 fillColorArray: ['#e7e7e7'], 239 shader: { 240 enabled: true, 241 fixed: true, 242 type: 'zIndex', 243 hue: 0, 244 saturation: 0, 245 minlightness: 65, 246 maxLightness: 98 247 } 248 } 249 }, 250 251 /** 252 * Attributes of the 3D plane orthogonal to the y-axis at the "rear" of the cube. 253 * @type Plane3D 254 * @name View3D#yPlaneRear 255 */ 256 yPlaneRear: { 257 visible: true, 258 strokeWidth: 1, 259 strokeColor: '#dddddd', 260 fillColor: '#dddddd', 261 layer: 0, 262 mesh3d: { layer: 1 }, 263 264 stepsU: 10, 265 stepsV: 10, 266 tiling: 'rectangle', 267 polyhedron: { 268 visible: 'inherit', 269 strokeWidth: 0.5, 270 strokeOpacity: 0.7, 271 strokeColor: '#cccccc', 272 fillOpacity: 0.30, 273 fillColorArray: ['#e7e7e7'], 274 shader: { 275 enabled: true, 276 fixed: true, 277 type: 'zIndex', 278 hue: 0, 279 saturation: 0, 280 minlightness: 65, 281 maxLightness: 98 282 } 283 } 284 }, 285 286 /** 287 * Attributes of the 3D plane orthogonal to the z-axis at the "rear" of the cube. 288 * @type Plane3D 289 * @name View3D#zPlaneRear 290 */ 291 zPlaneRear: { 292 visible: true, 293 strokeWidth: 1, 294 strokeColor: '#dddddd', 295 fillColor: '#dddddd', 296 layer: 0, 297 mesh3d: { layer: 1 }, 298 299 stepsU: 10, 300 stepsV: 10, 301 tiling: 'rectangle', 302 polyhedron: { 303 visible: 'inherit', 304 strokeWidth: 0.5, 305 strokeOpacity: 0.7, 306 strokeColor: '#cccccc', 307 fillOpacity: 0.30, 308 fillColorArray: ['#e7e7e7'], 309 shader: { 310 enabled: true, 311 fixed: true, 312 type: 'zIndex', 313 hue: 0, 314 saturation: 0, 315 minlightness: 65, 316 maxLightness: 98 317 } 318 } 319 }, 320 321 /** 322 * Attributes of the 3D plane orthogonal to the x-axis at the "front" of the cube. 323 * @type Plane3D 324 * @name View3D#xPlaneFront 325 */ 326 xPlaneFront: { 327 visible: false, 328 type: 'wireframe', 329 strokeWidth: 1, 330 strokeColor: '#dddddd', 331 fillColor: 'none', 332 layer: 0, 333 mesh3d: { 334 layer: 1, 335 visible: false 336 }, 337 338 stepsU: 10, 339 stepsV: 10, 340 tiling: 'rectangle', 341 polyhedron: { 342 visible: 'inherit', 343 strokeWidth: 0.5, 344 strokeOpacity: 0.7, 345 strokeColor: '#cccccc', 346 fillOpacity: 0.30, 347 fillColorArray: ['#e7e7e7'], 348 shader: { 349 enabled: true, 350 fixed: true, 351 type: 'zIndex', 352 hue: 0, 353 saturation: 0, 354 minlightness: 65, 355 maxLightness: 98 356 } 357 } 358 }, 359 /** 360 * Attributes of the 3D plane orthogonal to the y-axis at the "front" of the cube. 361 * @type Plane3D 362 * @name View3D#yPlaneFront 363 */ 364 yPlaneFront: { 365 visible: false, 366 type: 'wireframe', 367 strokeWidth: 1, 368 strokeColor: '#dddddd', 369 fillColor: 'none', 370 layer: 0, 371 mesh3d: { 372 layer: 1, 373 visible: false 374 }, 375 376 stepsU: 10, 377 stepsV: 10, 378 tiling: 'rectangle', 379 polyhedron: { 380 visible: 'inherit', 381 strokeWidth: 0.5, 382 strokeOpacity: 0.7, 383 strokeColor: '#cccccc', 384 fillOpacity: 0.30, 385 fillColorArray: ['#e7e7e7'], 386 shader: { 387 enabled: true, 388 fixed: true, 389 type: 'zIndex', 390 hue: 0, 391 saturation: 0, 392 minlightness: 65, 393 maxLightness: 98 394 } 395 } 396 }, 397 /** 398 * Attributes of the 3D plane orthogonal to the z-axis at the "front" of the cube. 399 * @type Plane3D 400 * @name View3D#zPlaneFront 401 */ 402 zPlaneFront: { 403 visible: false, 404 type: 'wireframe', 405 strokeWidth: 1, 406 strokeColor: '#dddddd', 407 fillColor: 'none', 408 layer: 0, 409 mesh3d: { 410 layer: 1, 411 visible: false 412 }, 413 414 stepsU: 10, 415 stepsV: 10, 416 tiling: 'rectangle', 417 polyhedron: { 418 visible: 'inherit', 419 strokeWidth: 0.5, 420 strokeOpacity: 0.7, 421 strokeColor: '#cccccc', 422 fillOpacity: 0.30, 423 fillColorArray: ['#e7e7e7'], 424 shader: { 425 enabled: true, 426 fixed: true, 427 type: 'zIndex', 428 hue: 0, 429 saturation: 0, 430 minlightness: 65, 431 maxLightness: 98 432 } 433 } 434 }, 435 436 // Axes on the planes 437 /** 438 * Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube. 439 * @type Plane3D 440 * @name View3D#xPlaneRearYAxis 441 */ 442 xPlaneRearYAxis: { 443 visible: 'inherit', 444 strokeColor: "#aaaaaa", 445 strokeWidth: 1.2, 446 layer: 12 447 }, 448 /** 449 * Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "rear" of the cube. 450 * @type Plane3D 451 * @name View3D#xPlaneRearZAxis 452 */ 453 xPlaneRearZAxis: { 454 visible: 'inherit', 455 strokeColor: "#888888", 456 strokeWidth: 1.2, 457 layer: 12 458 }, 459 /** 460 * Attributes of the 3D y-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube. 461 * @type Plane3D 462 * @name View3D#xPlaneFrontYAxis 463 */ 464 xPlaneFrontYAxis: { 465 visible: false, 466 strokeColor: "#888888", 467 strokeWidth: 1.2, 468 layer: 12 469 }, 470 /** 471 * Attributes of the 3D z-axis on the 3D plane orthogonal to the x-axis at the "front" of the cube. 472 * @type Plane3D 473 * @name View3D#xPlaneFrontZAxis 474 */ 475 xPlaneFrontZAxis: { 476 visible: false, 477 strokeColor: "#888888", 478 strokeWidth: 1.2, 479 layer: 12 480 }, 481 /** 482 * Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube. 483 * @type Plane3D 484 * @name View3D#yPlaneRearXAxis 485 */ 486 yPlaneRearXAxis: { 487 visible: 'inherit', 488 strokeColor: "#888888", 489 strokeWidth: 1.2, 490 layer: 12 491 }, 492 /** 493 * Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "rear" of the cube. 494 * @type Plane3D 495 * @name View3D#yPlaneRearZAxis 496 */ 497 yPlaneRearZAxis: { 498 visible: 'inherit', 499 strokeColor: "#888888", 500 strokeWidth: 1.2, 501 layer: 12 502 }, 503 /** 504 * Attributes of the 3D x-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube. 505 * @type Plane3D 506 * @name View3D#yPlaneFrontXAxis 507 */ 508 yPlaneFrontXAxis: { 509 visible: false, 510 strokeColor: "#888888", 511 strokeWidth: 1.2, 512 layer: 12 513 }, 514 /** 515 * Attributes of the 3D z-axis on the 3D plane orthogonal to the y-axis at the "front" of the cube. 516 * @type Plane3D 517 * @name View3D#yPlaneFrontZAxis 518 */ 519 yPlaneFrontZAxis: { 520 visible: false, 521 strokeColor: "#888888", 522 strokeWidth: 1.2, 523 layer: 12 524 }, 525 526 /** 527 * Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube. 528 * @type Plane3D 529 * @name View3D#zPlaneRearXAxis 530 */ 531 zPlaneRearXAxis: { 532 visible: 'inherit', 533 strokeColor: "#888888", 534 strokeWidth: 1.2, 535 layer: 12 536 }, 537 /** 538 * Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "rear" of the cube. 539 * @type Plane3D 540 * @name View3D#zPlaneRearYAxis 541 */ 542 zPlaneRearYAxis: { 543 visible: 'inherit', 544 strokeColor: "#888888", 545 strokeWidth: 1.2, 546 layer: 12 547 }, 548 /** 549 * Attributes of the 3D x-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube. 550 * @type Plane3D 551 * @name View3D#zPlaneFrontXAxis 552 */ 553 zPlaneFrontXAxis: { 554 visible: false, 555 strokeColor: "#888888", 556 strokeWidth: 1.2, 557 layer: 12 558 }, 559 /** 560 * Attributes of the 3D y-axis on the 3D plane orthogonal to the z-axis at the "front" of the cube. 561 * @type Plane3D 562 * @name View3D#zPlaneFrontYAxis 563 */ 564 zPlaneFrontYAxis: { 565 visible: false, 566 strokeColor: "#888888", 567 strokeWidth: 1.2, 568 layer: 12 569 } 570 571 /**#@-*/ 572 }, 573 574 axis3d: { 575 highlight: false, 576 fixed: true, 577 strokeColor: "black", 578 strokeWidth: 1, 579 lastArrow: true, 580 tabindex: null, 581 label: { 582 position: '103% left', 583 offset: [0, 0] 584 }, 585 586 point1: { visible: false, name: "", withLabel: false }, 587 point2: { visible: false, name: "", withLabel: false, label: { visible: true } } 588 }, 589 590 circle3d: { 591 592 layer: 12, 593 point: { visible: false, name: "" }, 594 needsRegularUpdate: true 595 596 }, 597 598 curve3d: { 599 /**#@+ 600 * @visprop 601 */ 602 603 layer: 12, 604 highlight: false, 605 tabindex: -1, 606 strokeWidth: 1, 607 numberPointsHigh: 200, 608 needsRegularUpdate: true 609 610 /**#@-*/ 611 }, 612 613 face3d: { 614 /**#@+ 615 * @visprop 616 */ 617 618 transitionProperties: [], 619 layer: 12, 620 highlight: false, 621 tabindex: null, 622 strokeWidth: 1, 623 fillColor: JXG.palette.yellow, 624 fillOpacity: 0.4, 625 needsRegularUpdate: true, 626 visible: true, // TODO: why not inherited from GeometryElement 627 628 /** 629 * Shading of faces. For this, the HSL color scheme is used. 630 * Two types are possible: either by 'angle' or by 'zIndex'. 631 * By default (i.e. type:'angle'), the angle between the camera axis and the normal of the 632 * face determines the lightness value of the HSL color. Otherwise, the 633 * zIndex of the face determines the lightness value of the HSL color. 634 * <p> 635 * Note that shading needs a lot of computing resources, in particular for 636 * SVG rendering. Setting `renderer:'canvas'` will allow to rotate the viewport 637 * much faster. 638 * 639 * @type Object 640 * @name Face3D#shader 641 * @see View3D#depthOrder 642 * @default <pre>shader: { 643 * enabled: false, 644 * fixed: true, // If false, update shading during rotation of viewport 645 * type: 'angle', // 'angle', otherwise zIndex 646 * hue: 60, // yellow 647 * saturation: 90, 648 * minLightness: 30, 649 * maxLightness: 90, 650 * 651 * light: { 652 * type: 1,// 1: lighting==camera, 653 * // 2: Fixed: angle(light, object), 654 * // 3: Fixed: angle(light, camera) (default) 655 * az: -45, // TODO use radians, ignored for type==1 656 * el: 20, // TODO use radians, ignored for type==1 657 * bank: 0, // TODO use radians, ignored for type==1, type==3 658 * dir: -1 // -1 (reverse), 0 (use abs), 1. Default: -1 659 * } 660 * }</pre> 661 * 662 * @example 663 * var view = board.create( 664 * 'view3d', 665 * [[-5, -3], [8, 8], 666 * [[-3, 3], [-3, 3], [-3, 3]]], 667 * { 668 * projection: 'central', 669 * trackball: { enabled: true }, 670 * depthOrder: { 671 * enabled: true 672 * }, 673 * xPlaneRear: { visible: false }, 674 * yPlaneRear: { visible: false }, 675 * zPlaneRear: { fillOpacity: 0.2, visible: true } 676 * } 677 * ); 678 * 679 * let rho = 1.6180339887; 680 * let vertexList = [ 681 * [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho], 682 * [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0], 683 * [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1] 684 * ]; 685 * let faceArray = [ 686 * [4, 1, 11], 687 * [11, 1, 0], 688 * [6, 11, 0], 689 * [0, 1, 9], 690 * [11, 10, 4], 691 * [9, 1, 5], 692 * [8, 9, 5], 693 * [5, 3, 8], 694 * [6, 10, 11], 695 * [2, 3, 10], 696 * [2, 10, 6], 697 * [8, 3, 2], 698 * [3, 4, 10], 699 * [7, 8, 2], 700 * [9, 8, 7], 701 * [0, 9, 7], 702 * [4, 3, 5], 703 * [5, 1, 4], 704 * [0, 7, 6], 705 * [7, 2, 6] 706 * ]; 707 * var ico = view.create('polyhedron3d', [vertexList, faceArray], { 708 * fillColorArray: [], 709 * fillOpacity: 1, 710 * strokeWidth: 0.1, 711 * layer: 12, 712 * shader: { 713 * enabled: true, 714 * type: 'angle', 715 * hue: 0, 716 * saturation: 90, 717 * minlightness: 60, 718 * maxLightness: 80 719 * } 720 * }); 721 * 722 * </pre><div id="JXGbf32b040-affb-4e03-a05b-abfe953f614d" class="jxgbox" style="width: 300px; height: 300px;"></div> 723 * <script type="text/javascript"> 724 * (function() { 725 * var board = JXG.JSXGraph.initBoard('JXGbf32b040-affb-4e03-a05b-abfe953f614d', 726 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false, 727 * pan: {enabled: false}, zoom: {enabled: false}}); 728 * var view = board.create( 729 * 'view3d', 730 * [[-5, -3], [8, 8], 731 * [[-3, 3], [-3, 3], [-3, 3]]], 732 * { 733 * projection: 'central', 734 * trackball: { enabled: true }, 735 * depthOrder: { 736 * enabled: true 737 * }, 738 * xPlaneRear: { visible: false }, 739 * yPlaneRear: { visible: false }, 740 * zPlaneRear: { fillOpacity: 0.2, visible: true } 741 * } 742 * ); 743 * 744 * let rho = 1.6180339887; 745 * let vertexList = [ 746 * [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho], 747 * [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0], 748 * [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1] 749 * ]; 750 * let faceArray = [ 751 * [4, 1, 11], 752 * [11, 1, 0], 753 * [6, 11, 0], 754 * [0, 1, 9], 755 * [11, 10, 4], 756 * [9, 1, 5], 757 * [8, 9, 5], 758 * [5, 3, 8], 759 * [6, 10, 11], 760 * [2, 3, 10], 761 * [2, 10, 6], 762 * [8, 3, 2], 763 * [3, 4, 10], 764 * [7, 8, 2], 765 * [9, 8, 7], 766 * [0, 9, 7], 767 * [4, 3, 5], 768 * [5, 1, 4], 769 * [0, 7, 6], 770 * [7, 2, 6] 771 * ]; 772 * var ico = view.create('polyhedron3d', [vertexList, faceArray], { 773 * fillColorArray: [], 774 * fillOpacity: 1, 775 * strokeWidth: 0.1, 776 * layer: 12, 777 * shader: { 778 * enabled: true, 779 * type: 'angle', 780 * hue: 0, 781 * saturation: 90, 782 * minlightness: 60, 783 * maxLightness: 80 784 * } 785 * }); 786 * 787 * })(); 788 * 789 * </script><pre> 790 * 791 */ 792 shader: { 793 enabled: false, 794 fixed: true, // If false, update shading during rotation of viewport 795 type: 'angle', // 'angle', otherwise zIndex 796 hue: 60, // yellow 797 saturation: 90, 798 minLightness: 30, 799 maxLightness: 90, 800 801 light: { 802 type: 1,// 1: lighting==camera, 803 // 2: Fixed: angle(light, object), 804 // 3: Fixed: angle(light, camera) (default) 805 az: -45, // TODO use radians, ignored for type==1 806 el: 20, // TODO use radians, ignored for type==1 807 bank: 0, // TODO use radians, ignored for type==1, type==3 808 dir: -1 // -1 (reverse), 0 (use abs), 1. Default: -1 809 } 810 } 811 812 /**#@-*/ 813 }, 814 815 intersectionline3d: { 816 point1: { visible: false, name: "" }, // Used in point/point 817 point2: { visible: false, name: "" } 818 }, 819 820 line3d: { 821 /**#@+ 822 * @visprop 823 */ 824 825 layer: 12, 826 strokeWidth: 1, 827 strokeColor: "black", 828 fixed: true, 829 tabindex: null, 830 // gradient: "linear", 831 // gradientSecondColor: "#ffffff", 832 needsRegularUpdate: true, 833 834 /** 835 * Attributes of the defining point in case the line is defined by [point, vector, [range]] 836 * @type Point3D 837 * @name Line3D#point 838 * @default <pre>visible: false, name: ""</pre> 839 */ 840 point: { visible: false, name: "" }, // Used in cases of point/direction/range 841 842 /** 843 * Attributes of the first point in case the line is defined by [point, point]. 844 * @type Point3D 845 * @name Line3D#point1 846 * @default <pre>visible: false, name: ""</pre> 847 */ 848 point1: { visible: false, name: "" }, // Used in point/point 849 850 /** 851 * Attributes of the second point in case the line is defined by [point, point]. 852 * @type Point3D 853 * @name Line3D#point2 854 * @default <pre>visible: false, name: ""</pre> 855 */ 856 point2: { visible: false, name: "" }, 857 858 /** 859 * If the 3D line is defined by two points and if this attribute is true, 860 * the 3D line stretches infinitely in direction of its first point. 861 * Otherwise it ends at point1. 862 * 863 * @name Line3D#straightFirst 864 * @see Line3D#straightLast 865 * @type Boolean 866 * @default false 867 */ 868 straightFirst: false, 869 870 871 /** 872 * If the 3D line is defined by two points and if this attribute is true, 873 * the 3D line stretches infinitely in direction of its second point. 874 * Otherwise it ends at point2. 875 * 876 * @name Line3D#straightLast 877 * @see Line3D#straightFirst 878 * @type Boolean 879 * @default false 880 */ 881 straightLast: false 882 883 /**#@-*/ 884 }, 885 886 mesh3d: { 887 /**#@+ 888 * @visprop 889 */ 890 891 layer: 12, 892 strokeWidth: 1, 893 strokeColor: "#9a9a9a", 894 strokeOpacity: 0.6, 895 highlight: false, 896 tabindex: null, 897 needsRegularUpdate: true, 898 899 /** 900 * Step width of the mesh in the direction of the first spanning vector. 901 * @type {Number} 902 * @name Mesh3D#stepWidthU 903 * @default 1 904 * 905 */ 906 stepWidthU: 1, 907 908 /** 909 * Step width of the mesh in the direction of the second spanning vector. 910 * 911 * @type {Number} 912 * @name Mesh3D#stepWidthV 913 * @default 1 914 * 915 */ 916 stepWidthV: 1 917 918 /**#@-*/ 919 }, 920 921 plane3d: { 922 /**#@+ 923 * @visprop 924 */ 925 926 layer: 12, 927 strokeWidth: 1, 928 strokeColor: "black", 929 strokeOpacity: 1, 930 highlight: false, 931 tabindex: null, 932 needsRegularUpdate: true, 933 visible: true, 934 935 gradient: "linear", 936 gradientSecondColor: "#ffffff", 937 gradientAngle: Math.PI, 938 fillColor: "#bbbbbb", 939 fillOpacity: 0.3, 940 941 type: 'shader', // 'wireframe', 'shader', 'colormap', 'colorarray' 942 tiling: 'rectangle', // 'triangle', 'rectangle' 943 944 /** 945 * Optional 3D mesh of a finite plane. 946 * It is not available if the plane is infinite (at initialization time) in any direction. 947 * 948 * @type Mesh3D 949 * @name Plane3D#mesh3d 950 * @default see {@link Mesh3D} 951 */ 952 mesh3d: { 953 visible: 'inherit' 954 }, 955 956 stepsU: 6, 957 stepsV: 6, 958 959 colormap: { 960 min: [-5, 190], 961 max: [5, 0], 962 s: 0.9, 963 v: 0.9 964 }, 965 966 // From surface3d 967 polyhedron: { 968 layer: 12, 969 visible: 'inherit', 970 strokeWidth: 0.1, 971 fillOpacity: 0.8, 972 fillColorArray: ['white', JXG.palette.blue], 973 shader: { 974 enabled: false, 975 fixed: true, 976 hue: 60, // yellow 977 saturation: 90, 978 minLightness: 55, 979 maxLightness: 90, 980 981 light: { 982 dir: -1 983 } 984 } 985 }, 986 987 /** 988 * If the second parameter and the third parameter are given as arrays or functions and threePoints:true 989 * then the second and third parameter are interpreted as point coordinates and not as directions, i.e. 990 * the plane is defined by three points. 991 * 992 * @name Plane3D#threePoints 993 * @type Boolean 994 * @default false 995 */ 996 threePoints: false, 997 998 /** 999 * Attributes of the defining point in case the plane is defined by [point, direction1, direction2, [range1, [range2]]]. 1000 * @type Point3D 1001 * @name Plane3D#point 1002 * @default <pre>visible: false, name: "", fixed: true</pre> 1003 */ 1004 point: { visible: false, name: "", fixed: true }, 1005 1006 /** 1007 * Attributes of the first point in case the plane is defined by [point, point, point]. 1008 * @type Point3D 1009 * @name Plane3D#point1 1010 * @default <pre>visible: false, name: ""</pre> 1011 */ 1012 point1: { visible: false, name: "" }, // Used in point/point/point 1013 1014 /** 1015 * Attributes of the second point in case the plane is defined by [point, point, point]. 1016 * @type Point3D 1017 * @name Plane3D#point2 1018 * @default <pre>visible: false, name: ""</pre> 1019 */ 1020 point2: { visible: false, name: "" }, // Used in point/point/point 1021 1022 /** 1023 * Attributes of the third point in case the plane is defined by [point, point, point]. 1024 * @type Point3D 1025 * @name Plane3D#point3 1026 * @default <pre>visible: false, name: ""</pre> 1027 */ 1028 point3: { visible: false, name: "" } // Used in point/point/point 1029 1030 /**#@-*/ 1031 }, 1032 1033 point3d: { 1034 layer: 13, 1035 infoboxDigits: "auto", 1036 strokeWidth: 0, 1037 gradient: "radial", 1038 gradientSecondColor: "#555555", 1039 fillColor: "yellow", 1040 highlightStrokeColor: "#555555", 1041 gradientFX: 0.7, 1042 gradientFY: 0.3, 1043 needsRegularUpdate: true, 1044 1045 /** 1046 * If the point is bound to another element ("glides" on that element) 1047 * and if the bound reaches the boundary, the point may start cyclically 1048 * at the ozher side of the boundary - like one expects from a glider on a sphere. 1049 * For this, set cyclic to true. 1050 * @type Boolean 1051 * @name Point3D#cyclic 1052 * @default false 1053 */ 1054 cyclic: false 1055 }, 1056 1057 polygon3d: { 1058 /**#@+ 1059 * @visprop 1060 */ 1061 1062 layer: 12, 1063 highlight: false, 1064 tabindex: -1, 1065 strokeWidth: 1, 1066 fillColor: 'none', 1067 needsRegularUpdate: true 1068 1069 1070 /**#@-*/ 1071 }, 1072 1073 polyhedron3d: { 1074 /**#@+ 1075 * @visprop 1076 */ 1077 1078 /** 1079 * Color array to define fill colors of faces cyclically. 1080 * Alternatively, the fill color can be defined for each face individually. 1081 * 1082 * @type Array 1083 * @name Polyhedron3D#fillColorArray 1084 * @default ['white', 'black'] 1085 */ 1086 fillColorArray: ['white', 'black'], 1087 1088 needsRegularUpdate: true 1089 1090 /**#@-*/ 1091 }, 1092 1093 sphere3d: { 1094 /**#@+ 1095 * @visprop 1096 */ 1097 1098 layer: 12, 1099 highlight: false, 1100 1101 strokeWidth: 1, 1102 strokeColor: '#00ff80', 1103 fillColor: 'white', 1104 gradient: 'radial', 1105 gradientSecondColor: '#00ff80', 1106 gradientFX: 0.7, 1107 gradientFY: 0.3, 1108 fillOpacity: 0.4, 1109 needsRegularUpdate: true 1110 1111 /**#@-*/ 1112 }, 1113 1114 surface3d: { 1115 /**#@+ 1116 * @visprop 1117 */ 1118 1119 visible: true, 1120 layer: 12, 1121 highlight: false, 1122 tabindex: -1, 1123 1124 /** 1125 * Description of how the mesh is visualized. Possible values are 'wireframe', 'rectangle', 'triangle'. 1126 * In case of `tiling:'wireframe'`, a rectangular mesh is displayed, the number of steps is determined by 1127 * the attributes `stepsU` and `stepsV`. Further, the attributes `strokeWidth` and `strokeColor`, ... 1128 * determine the style of the mesh. 1129 * <p> 1130 * In case of `tiling:'triangle'` or `tiling:'rectangle'` a polyhedron3d element is displayed, using the 1131 * attributes `stepsU` and `stepsV`. In case of `triangle`, equilateral triangles are created if stepsV==0. 1132 * <p> 1133 * All other attributes of the polyhedron3d have to be set inside of `polyhedron`, including `strokeWidth` 1134 * and `strokeColor`. The wireframe settings for these attributes are ignored. 1135 * <p> 1136 * At the time being (v1.13+), this attribute is immutable. 1137 * 1138 * @type String 1139 * @name ParametricSurface3D#tiling 1140 * @default 'wireframe' 1141 * @see ParametricSurface3D#polyhedron 1142 * 1143 * @example 1144 * 1145 * var view = board.create('view3d', 1146 * [ 1147 * [-6, -3], [8, 8], 1148 * [[-5, 5], [-5, 5], [-5, 5]] 1149 * ], 1150 * { 1151 * xPlaneRear: {visible: false}, 1152 * yPlaneRear: {visible: false}, 1153 * }); 1154 * 1155 * // Function F to be plotted 1156 * var F = (x, y) => Math.cos(x * y / 4); 1157 * 1158 * // 3D surface 1159 * var c = view.create('functiongraph3d', [ 1160 * F, 1161 * [-5, 5], 1162 * [-5, 5], 1163 * ], { 1164 * strokeWidth: 0.5, 1165 * stepsU: 70, 1166 * stepsV: 70, 1167 * tiling:'wireframe' 1168 * }); 1169 * 1170 * </pre><div id="JXG87646dd4-9fe5-4c21-8734-089abc612515" class="jxgbox" style="width: 500px; height: 500px;"></div> 1171 * <script type="text/javascript"> 1172 * (function() { 1173 * var board = JXG.JSXGraph.initBoard('JXG87646dd4-9fe5-4c21-8734-089abc612515', 1174 * {boundingbox: [-8, 8, 8,-8], axis: false, pan: {enabled: false}, showcopyright: false, shownavigation: false}); 1175 * var box = [-5, 5]; 1176 * var view = board.create('view3d', 1177 * [ 1178 * [-6, -3], [8, 8], 1179 * [box, box, box] 1180 * ], 1181 * { 1182 * xPlaneRear: {visible: false}, 1183 * yPlaneRear: {visible: false}, 1184 * }); 1185 * 1186 * // Function F to be plotted 1187 * var F = (x, y) => Math.cos(x * y / 4); 1188 * 1189 * // 3D surface 1190 * var c = view.create('functiongraph3d', [ 1191 * F, 1192 * box, 1193 * box 1194 * ], { 1195 * strokeWidth: 0.5, 1196 * stepsU: 50, 1197 * stepsV: 50, 1198 * tiling: 'wireframe' 1199 * }); 1200 * })(); 1201 * 1202 * </script><pre> 1203 * 1204 * @example 1205 * 1206 * var view = board.create('view3d', 1207 * [ 1208 * [-6, -3], [8, 8], 1209 * [[-5, 5], [-5, 5], [-5, 5]] 1210 * ], 1211 * { 1212 * xPlaneRear: {visible: false}, 1213 * yPlaneRear: {visible: false}, 1214 * }); 1215 * 1216 * // Function F to be plotted 1217 * var F = (x, y) => Math.cos(x * y / 4); 1218 * 1219 * // 3D surface 1220 * var c = view.create('functiongraph3d', [ 1221 * F, 1222 * [-5, 5], 1223 * [-5, 5], 1224 * ], { 1225 * stepsU: 15, 1226 * stepsV: 15, 1227 * tiling:'triangle' 1228 * }); 1229 * 1230 * </pre><div id="JXG6591ae99-1319-4cd7-b035-465484ad27d2" class="jxgbox" style="width: 500px; height: 500px;"></div> 1231 * <script type="text/javascript"> 1232 * (function() { 1233 * var board = JXG.JSXGraph.initBoard('JXG6591ae99-1319-4cd7-b035-465484ad27d2', 1234 * {boundingbox: [-8, 8, 8,-8], axis: false, pan: {enabled: false}, showcopyright: false, shownavigation: false}); 1235 * var box = [-5, 5]; 1236 * var view = board.create('view3d', 1237 * [ 1238 * [-6, -3], [8, 8], 1239 * [box, box, box] 1240 * ], 1241 * { 1242 * xPlaneRear: {visible: false}, 1243 * yPlaneRear: {visible: false}, 1244 * }); 1245 * 1246 * // Function F to be plotted 1247 * var F = (x, y) => Math.cos(x * y / 4); 1248 * 1249 * // 3D surface 1250 * var c = view.create('functiongraph3d', [ 1251 * F, 1252 * box, 1253 * box 1254 * ], { 1255 * stepsU: 15, 1256 * stepsV: 15, 1257 * tiling: 'triangle' 1258 * }); 1259 * })(); 1260 * 1261 * </script><pre> 1262 * 1263 * @example 1264 * 1265 * var view = board.create('view3d', 1266 * [ 1267 * [-6, -3], [8, 8], 1268 * [[-5, 5], [-5, 5], [-5, 5]] 1269 * ], 1270 * { 1271 * xPlaneRear: {visible: false}, 1272 * yPlaneRear: {visible: false}, 1273 * }); 1274 * 1275 * // Function F to be plotted 1276 * var F = (x, y) => Math.cos(x * y / 4); 1277 * 1278 * // 3D surface 1279 * var c = view.create('functiongraph3d', [ 1280 * F, 1281 * [-5, 5], 1282 * [-5, 5], 1283 * ], { 1284 * stepsU: 15, 1285 * stepsV: 15, 1286 * tiling: 'rectangle' 1287 * }); 1288 * 1289 * </pre><div id="JXG6bebc69d-95fd-4923-9689-29461bb21471" class="jxgbox" style="width: 500px; height: 500px;"></div> 1290 * <script type="text/javascript"> 1291 * (function() { 1292 * var board = JXG.JSXGraph.initBoard('JXG6bebc69d-95fd-4923-9689-29461bb21471', 1293 * {boundingbox: [-8, 8, 8,-8], axis: false, pan: {enabled: false}, showcopyright: false, shownavigation: false}); 1294 * var box = [-5, 5]; 1295 * var view = board.create('view3d', 1296 * [ 1297 * [-6, -3], [8, 8], 1298 * [box, box, box] 1299 * ], 1300 * { 1301 * xPlaneRear: {visible: false}, 1302 * yPlaneRear: {visible: false}, 1303 * }); 1304 * 1305 * // Function F to be plotted 1306 * var F = (x, y) => Math.cos(x * y / 4); 1307 * 1308 * // 3D surface 1309 * var c = view.create('functiongraph3d', [ 1310 * F, 1311 * box, 1312 * box 1313 * ], { 1314 * stepsU: 15, 1315 * stepsV: 15, 1316 * tiling: 'rectangle' 1317 * }); 1318 * })(); 1319 * 1320 * </script><pre> 1321 */ 1322 type: 'wireframe', // 'colormap', 'shader', 'colorarray' 1323 tiling: 'rectangle', // 'triangle' 1324 1325 // Wireframe 1326 strokeWidth: 0.75, 1327 // --- end wireframe 1328 1329 /** 1330 * HSV color range for colormap. Supply lower bound [z_min, hue_min] on z-value and corresponding hue value, as well 1331 * as upper bound [z_max, hue_max] on z-value and corresponding hue value. Further, give constant values for 1332 * "saturation" and "value" of HSV. 1333 * 1334 * @type {object} 1335 * @name ParametricSurface3D#colormap 1336 * @default <pre>{ 1337 * min: [-5, 190], 1338 * max: [5, 0], 1339 * s: 0.9, 1340 * v: 0.9 1341 * }</pre> 1342 */ 1343 colormap: { 1344 min: [-5, 190], 1345 max: [5, 0], 1346 s: 0.9, 1347 v: 0.9 1348 }, 1349 1350 /** 1351 * Attributes for the polyhedron3d in case `style='triangle'` or `style='rectangle'`. 1352 * Specifications are e.g. 1353 * <ul> 1354 * <li>strokewidth: 0 1355 * <li>fillColorArray: ['white', JXG.palette.blue] 1356 * </ul> 1357 * @type {object} 1358 * @name ParametricSurface3D#polyhedron 1359 * @default <pre>{strokewidth: 0, fillColorArray: ['white', 'black'] }</pre> 1360 * @see ParametricSurface3D#style 1361 * 1362 * @example 1363 * var F = (x, y) => Math.cos(x * y / 4); 1364 * 1365 * var view = board.create('view3d', [ 1366 * [-6, -3], [8, 8], 1367 * [[-5, 5], [-5, 5], [-5, 5]] 1368 * ], { 1369 * xPlaneRear: {visible: false}, 1370 * yPlaneRear: {visible: false}, 1371 * depthOrder: {enabled: true} 1372 * }); 1373 * 1374 * // 3D surface 1375 * var c = view.create('functiongraph3d', [F, [-5, 5], [-5, 5]], { 1376 * strokeWidth: 1, // ignored 1377 * stepsU: 10, 1378 * stepsV: 10, 1379 * tiling: 'triangle', 1380 * polyhedron: { 1381 * strokeWidth: 0, // has priority 1382 * fillOpacity: 0.9, 1383 * shader: { 1384 * enabled: true, 1385 * hue: 20, 1386 * saturation: 90, 1387 * minlightness: 50, 1388 * maxLightness: 80 1389 * } 1390 * } 1391 * }); 1392 * 1393 * </pre><div id="JXG8123a727-adef-4c10-83e6-d4f5e2203f68" class="jxgbox" style="width: 300px; height: 300px;"></div> 1394 * <script type="text/javascript"> 1395 * (function() { 1396 * var board = JXG.JSXGraph.initBoard('JXG8123a727-adef-4c10-83e6-d4f5e2203f68', 1397 * {boundingbox: [-8, 8, 8,-8], axis: false, pan: {enabled: false}, showcopyright: false, shownavigation: false}); 1398 * 1399 * var F = (x, y) => Math.cos(x * y / 4); 1400 * var box = [-5, 5]; 1401 * var view = board.create('view3d', 1402 * [ 1403 * [-6, -3], [8, 8], 1404 * [box, box, box] 1405 * ], 1406 * { 1407 * xPlaneRear: {visible: false}, 1408 * yPlaneRear: {visible: false}, 1409 * depthOrder: {enabled: true} 1410 * }); 1411 * 1412 * // 3D surface 1413 * var c = view.create('functiongraph3d', [F, box, box], { 1414 * strokeWidth: 0.5, 1415 * stepsU: 10, 1416 * stepsV: 10, 1417 * tiling: 'triangle', 1418 * polyhedron: { 1419 * strokeWidth: 0, 1420 * fillOpacity: 0.9, 1421 * shader: { 1422 * enabled: true, 1423 * hue: 20, 1424 * saturation: 90, 1425 * minlightness: 50, 1426 * maxLightness: 80 1427 * } 1428 * } 1429 * }); 1430 * 1431 * })(); 1432 * 1433 * </script><pre> 1434 * 1435 * @example 1436 * 1437 * var view = board.create('view3d', 1438 * [ 1439 * [-6, -3], [8, 8], 1440 * [[-5, 5], [-5, 5], [-5, 5]] 1441 * ], { 1442 * xPlaneRear: {visible: false}, 1443 * yPlaneRear: {visible: false} 1444 * }); 1445 * 1446 * // Function F to be plotted 1447 * var F = (x, y) => y - x; 1448 * 1449 * // 3D surface 1450 * var c = view.create('functiongraph3d', [F, [-5, 5], [-5, 5]], { 1451 * stepsU: 9, 1452 * stepsV: 9, 1453 * tiling: 'rectangle' 1454 * }); 1455 * 1456 * </pre><div id="JXG87646dd4-9fe5-4c21-8734-089abc612519" class="jxgbox" style="width: 500px; height: 500px;"></div> 1457 * <script type="text/javascript"> 1458 * (function() { 1459 * var board = JXG.JSXGraph.initBoard('JXG87646dd4-9fe5-4c21-8734-089abc612519', 1460 * {boundingbox: [-8, 8, 8,-8], axis: false, pan: {enabled: false}, showcopyright: false, shownavigation: false}); 1461 * var box = [-5, 5]; 1462 * var view = board.create('view3d', 1463 * [ 1464 * [-6, -3], [8, 8], 1465 * [box, box, box] 1466 * ], { 1467 * xPlaneRear: {visible: false}, 1468 * yPlaneRear: {visible: false} 1469 * }); 1470 * 1471 * // Function F to be plotted 1472 * var F = (x, y) => y - x; 1473 * 1474 * // 3D surface 1475 * var c = view.create('functiongraph3d', [F, box, box], { 1476 * stepsU: 9, 1477 * stepsV: 9, 1478 * tiling: 'rectangle' 1479 * }); 1480 * })(); 1481 * </script><pre> 1482 */ 1483 polyhedron: { 1484 visible: 'inherit', 1485 strokeWidth: 0.1, 1486 fillOpacity: 0.8, 1487 fillColorArray: ['white', JXG.palette.blue], 1488 shader: { 1489 enabled: false, 1490 fixed: true, 1491 hue: 60, // yellow 1492 saturation: 90, 1493 minLightness: 55, 1494 maxLightness: 90, 1495 1496 light: { 1497 dir: -1 1498 } 1499 } 1500 }, 1501 1502 /** 1503 * Number of intervals the mesh is divided into in direction of parameter u. 1504 * If stepsU = 0 and type is 'wireframe' a 3D wireframe plot in one direction is created. 1505 * @type Number 1506 * @name ParametricSurface3D#stepsU 1507 */ 1508 stepsU: 30, 1509 1510 /** 1511 * Number of intervals the mesh is divided into in direction of parameter v. 1512 * If stepsV = 0 and type is 'wireframe' a 3D wireframe plot in one direction is created. 1513 * @type Number 1514 * @name ParametricSurface3D#stepsV 1515 */ 1516 stepsV: 30, 1517 1518 needsRegularUpdate: true 1519 1520 /**#@-*/ 1521 }, 1522 1523 text3d: { 1524 /**#@+ 1525 * @visprop 1526 */ 1527 1528 withLabel: false, 1529 needsRegularUpdate: true 1530 1531 /**#@-*/ 1532 }, 1533 1534 ticks3d: { 1535 /**#@+ 1536 * @visprop 1537 */ 1538 1539 visible: true, 1540 1541 ticksDistance: 1, 1542 majorHeight: 10, 1543 minorTicks: 0, 1544 tickEndings: [0, 1], 1545 drawLabels: true, 1546 needsRegularUpdate: true, 1547 1548 label: { 1549 visible: true, 1550 withLabel: false 1551 } 1552 1553 /**#@-*/ 1554 }, 1555 1556 vectorfield3d: { 1557 /**#@+ 1558 * @visprop 1559 */ 1560 1561 /** 1562 * Scaling factor of the vectors. This in contrast to slope fields, where this attribute sets the vector to the given length. 1563 * @name scale 1564 * @memberOf Vectorfield3D.prototype 1565 * @type {Number|Function} 1566 * @see Slopefield.scale 1567 * @default 1 1568 */ 1569 scale: 1, 1570 1571 /** 1572 * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance. 1573 * Fields are: 1574 * <ul> 1575 * <li> enabled: Boolean 1576 * <li> size: length of the arrow head legs (in pixel) 1577 * <li> angle: angle of the arrow head legs In radians. 1578 * </ul> 1579 * @name arrowhead 1580 * @memberOf Vectorfield3D.prototype 1581 * @type {Object} 1582 * @default <tt>{enabled: true, size: 5, angle: Math.PI * 0.125}</tt> 1583 */ 1584 arrowhead: { 1585 enabled: true, 1586 size: 5, 1587 angle: Math.PI * 0.125 1588 }, 1589 needsRegularUpdate: true 1590 1591 /**#@-*/ 1592 }, 1593 1594 view3d: { 1595 /**#@+ 1596 * @visprop 1597 */ 1598 1599 needsRegularUpdate: true, 1600 1601 /** 1602 * When this attribute is enabled, elements closer to the screen are drawn 1603 * over elements further from the screen within the 3D layer. This affects 1604 * all elements which are in one of the layer specified in the sub-attribute 'layers'. 1605 * <p> 1606 * For each layer this depth ordering is done independently. 1607 * Sub-attributes: 1608 * <ul> 1609 * <li><tt>enabled</tt>: false/true 1610 * <li><tt>layers</tt>: [12, 13] 1611 * </ul> 1612 * 1613 * @name View3D#depthOrder 1614 * @type Object 1615 * @default <pre>{ 1616 * enabled: false, 1617 * layers: [12, 13] 1618 * } 1619 * </pre> 1620 */ 1621 depthOrder: { 1622 enabled: true, 1623 layers: [12, 13] 1624 }, 1625 1626 /** 1627 * Choose the projection type to be used: `parallel` or `central`. 1628 * <ul> 1629 * <li> `parallel` is parallel projection, also called orthographic projection 1630 * <li> `central` is central projection, also called perspective projection 1631 * </ul> 1632 * 1633 * 1634 * @name View3D#projection 1635 * @type String 1636 * @default 'parallel' 1637 * @example 1638 * var bound = [-5, 5]; 1639 * var view = board.create('view3d', 1640 * [[-6, -3], [8, 8], 1641 * [bound, bound, bound]], 1642 * { 1643 * projection: 'parallel' 1644 * }); 1645 * 1646 * </pre><div id="JXG80d81b13-c604-4841-bdf6-62996440088a" class="jxgbox" style="width: 300px; height: 300px;"></div> 1647 * <script type="text/javascript"> 1648 * (function() { 1649 * var board = JXG.JSXGraph.initBoard('JXG80d81b13-c604-4841-bdf6-62996440088a', 1650 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1651 * var bound = [-5, 5]; 1652 * var view = board.create('view3d', 1653 * [[-6, -3], [8, 8], 1654 * [bound, bound, bound]], 1655 * { 1656 * projection: 'parallel' 1657 * }); 1658 * 1659 * })(); 1660 * 1661 * </script><pre> 1662 * 1663 * @example 1664 * var bound = [-5, 5]; 1665 * var view = board.create('view3d', 1666 * [[-6, -3], [8, 8], 1667 * [bound, bound, bound]], 1668 * { 1669 * projection: 'central' 1670 * }); 1671 * 1672 * </pre><div id="JXGdb7b7c99-631c-41d0-99bf-c0a8d0138218" class="jxgbox" style="width: 300px; height: 300px;"></div> 1673 * <script type="text/javascript"> 1674 * (function() { 1675 * var board = JXG.JSXGraph.initBoard('JXGdb7b7c99-631c-41d0-99bf-c0a8d0138218', 1676 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1677 * var bound = [-5, 5]; 1678 * var view = board.create('view3d', 1679 * [[-6, -3], [8, 8], 1680 * [bound, bound, bound]], 1681 * { 1682 * projection: 'central' 1683 * }); 1684 * })(); 1685 * 1686 * </script><pre> 1687 * 1688 */ 1689 projection: 'parallel', 1690 1691 /** 1692 * Allow vertical dragging of objects, i.e. in direction of the z-axis. 1693 * Subobjects are 1694 * <ul> 1695 * <li>enabled: true 1696 * <li>key: 'shift' 1697 * </ul> 1698 * <p> 1699 * Possible values for attribute <i>key</i>: 'shift' or 'ctrl'. 1700 * 1701 * @name View3D#verticalDrag 1702 * @type Object 1703 * @default <tt>{enabled: true, key: 'shift'}</tt> 1704 */ 1705 verticalDrag: { 1706 enabled: true, 1707 key: 'shift' 1708 }, 1709 1710 /** 1711 * Specify the user handling of the azimuth. 1712 * <ul> 1713 * <li><tt>pointer</tt> sub-attributes: 1714 * <ul> 1715 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by azimuth. 1716 * <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. 1717 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1718 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1719 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1720 * </ul> 1721 * <li><tt>keyboard</tt> sub-attributes: 1722 * <ul> 1723 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard (left/right arrow keys) can be used to navigate the board. 1724 * <li><tt>step</tt>: Size of the step per keystroke. 1725 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1726 * </ul> 1727 * <li><tt>continuous</tt>: Boolean that specifies whether the az_slider starts again from the beginning when its end is reached. 1728 * <li><tt>slider</tt> attributes of the az_slider ({@link Slider}) with additional 1729 * <ul> 1730 * <li><tt>min</tt>: Minimum value. 1731 * <li><tt>max</tt>: Maximum value. 1732 * <li><tt>start</tt>: Start value. 1733 * </ul> 1734 * 'min' and 'max' are used only if trackball is not enabled. 1735 * Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible 1736 * values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array). 1737 * </ul> 1738 * 1739 * @name View3D#az 1740 * @type Object 1741 * @default <pre>{ 1742 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1743 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1744 * continuous: true, 1745 * slider: { 1746 * visible: true, 1747 * style: 6, 1748 * point1: { 1749 * pos: 'auto', 1750 * frozen: false 1751 * }, 1752 * point2: { 1753 * pos: 'auto', 1754 * frozen: false 1755 * }, 1756 * min: 0, 1757 * max: 2 * Math.PI, 1758 * start: 1.0 1759 * }, 1760 * }</pre> 1761 * 1762 * @example 1763 * var bound = [-4, 6]; 1764 * var view = board.create('view3d', 1765 * [[-4, -3], [8, 8], 1766 * [bound, bound, bound]], 1767 * { 1768 * projection: 'parallel', 1769 * az: { 1770 * slider: {visible: true, start: 0.75 * Math.PI} 1771 * } 1772 * }); 1773 * 1774 * </pre><div id="JXG4c381f21-f043-4419-941d-75f384c026d0" class="jxgbox" style="width: 300px; height: 300px;"></div> 1775 * <script type="text/javascript"> 1776 * (function() { 1777 * var board = JXG.JSXGraph.initBoard('JXG4c381f21-f043-4419-941d-75f384c026d0', 1778 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1779 * var bound = [-4, 6]; 1780 * var view = board.create('view3d', 1781 * [[-4, -3], [8, 8], 1782 * [bound, bound, bound]], 1783 * { 1784 * projection: 'parallel', 1785 * az: { 1786 * slider: {visible: true, start: 0.75 * Math.PI} 1787 * } 1788 * }); 1789 * 1790 * })(); 1791 * 1792 * </script><pre> 1793 * 1794 */ 1795 az: { 1796 pointer: { 1797 enabled: true, 1798 speed: 1, 1799 outside: true, 1800 button: -1, 1801 key: 'none' 1802 }, 1803 keyboard: { 1804 enabled: true, 1805 step: 10, 1806 key: 'ctrl' 1807 }, 1808 continuous: true, 1809 slider: { 1810 visible: 'inherit', 1811 style: 6, 1812 point1: { 1813 pos: 'auto', 1814 frozen: false 1815 }, 1816 point2: { 1817 pos: 'auto', 1818 frozen: false 1819 }, 1820 min: 0, 1821 max: 2 * Math.PI, 1822 start: 1.0 1823 } 1824 }, 1825 1826 /** 1827 * Specify the user handling of the elevation. 1828 * <ul> 1829 * <li><tt>pointer</tt> sub-attributes: 1830 * <ul> 1831 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 1832 * <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. 1833 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1834 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1835 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1836 * </ul> 1837 * <li><tt>keyboard</tt> sub-attributes: 1838 * <ul> 1839 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard (up/down arrow keys) can be used to navigate the board. 1840 * <li><tt>step</tt>: Size of the step per keystroke. 1841 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1842 * </ul> 1843 * <li><tt>continuous</tt>: Boolean that specifies whether the el_slider starts again from the beginning when its end is reached. 1844 * <li><tt>slider</tt> attributes of the el_slider ({@link Slider}) with additional 1845 * <ul> 1846 * <li><tt>min</tt>: Minimum value. 1847 * <li><tt>max</tt>: Maximum value. 1848 * <li><tt>start</tt>: Start value. 1849 * </ul> 1850 * 'min' and 'max' are used only if trackball is not enabled. 1851 * Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible 1852 * values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array). 1853 * </ul> 1854 * 1855 * @name View3D#el 1856 * @type Object 1857 * @default <pre>{ 1858 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1859 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1860 * continuous: true, 1861 * slider: { 1862 * visible: true, 1863 * style: 6, 1864 * point1: { 1865 * pos: 'auto', 1866 * frozen: false 1867 * }, 1868 * point2: { 1869 * pos: 'auto', 1870 * frozen: false 1871 * }, 1872 * min: 0, 1873 * max: 2 * Math.PI, 1874 * start: 0.3 1875 * }, 1876 * }<pre> 1877 * @example 1878 * var bound = [-4, 6]; 1879 * var view = board.create('view3d', 1880 * [[-4, -3], [8, 8], 1881 * [bound, bound, bound]], 1882 * { 1883 * projection: 'parallel', 1884 * el: { 1885 * slider: {visible: true} 1886 * } 1887 * }); 1888 * 1889 * </pre><div id="JXG8926f733-c42e-466b-853c-74feb795e879" class="jxgbox" style="width: 300px; height: 300px;"></div> 1890 * <script type="text/javascript"> 1891 * (function() { 1892 * var board = JXG.JSXGraph.initBoard('JXG8926f733-c42e-466b-853c-74feb795e879', 1893 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1894 * var bound = [-4, 6]; 1895 * var view = board.create('view3d', 1896 * [[-4, -3], [8, 8], 1897 * [bound, bound, bound]], 1898 * { 1899 * projection: 'parallel', 1900 * el: { 1901 * slider: {visible: true} 1902 * } 1903 * }); 1904 * 1905 * })(); 1906 * 1907 * </script><pre> 1908 * 1909 */ 1910 el: { 1911 pointer: { 1912 enabled: true, 1913 speed: 1, 1914 outside: true, 1915 button: -1, 1916 key: 'none' 1917 }, 1918 keyboard: { 1919 enabled: true, 1920 step: 10, 1921 key: 'ctrl' 1922 }, 1923 continuous: true, 1924 slider: { 1925 visible: 'inherit', 1926 style: 6, 1927 point1: { 1928 frozen: false, 1929 pos: 'auto' 1930 }, 1931 point2: { 1932 frozen: false, 1933 pos: 'auto' 1934 }, 1935 min: 0, 1936 max: 2 * Math.PI, 1937 start: 0.3 1938 } 1939 }, 1940 1941 /** 1942 * Specify the user handling of the bank angle. 1943 * <ul> 1944 * <li><tt>pointer</tt> sub-attributes: 1945 * <ul> 1946 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 1947 * <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. 1948 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1949 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1950 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1951 * </ul> 1952 * <li><tt>keyboard</tt> sub-attributes: 1953 * <ul> 1954 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard ('<', '>' keys) can be used to navigate the board. 1955 * <li><tt>step</tt>: Size of the step per keystroke. 1956 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1957 * </ul> 1958 * <li><tt>continuous</tt>: Boolean that specifies whether the el_slider starts again from the beginning when its end is reached. 1959 * <li><tt>slider</tt> attributes of the el_slider ({@link Slider}) with additional 1960 * <ul> 1961 * <li><tt>min</tt>: Minimum value. 1962 * <li><tt>max</tt>: Maximum value. 1963 * <li><tt>start</tt>: Start value. 1964 * </ul> 1965 * 'min' and 'max' are used only if trackball is not enabled. 1966 * Additionally, the attributes 'slider.point1.pos' and 'slider.point2.pos' control the position of the slider. Possible 1967 * values are 'auto' or an array [x, y] of length 2 for the position in user coordinates (or a function returning such an array). 1968 * </ul> 1969 * 1970 * @name View3D#bank 1971 * @type Object 1972 * @default <pre>{ 1973 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1974 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1975 * continuous: true, 1976 * slider: { 1977 * visible: true, 1978 * style: 6, 1979 * point1: { 1980 * pos: 'auto', 1981 * frozen: false 1982 * }, 1983 * point2: { 1984 * pos: 'auto', 1985 * frozen: false 1986 * }, 1987 * min: 0, 1988 * max: 2 * Math.PI, 1989 * start: 0.3 1990 * }, 1991 * }<pre> 1992 * @example 1993 * var bound = [-4, 6]; 1994 * var view = board.create('view3d', 1995 * [[-4, -3], [8, 8], 1996 * [bound, bound, bound]], 1997 * { 1998 * projection: 'parallel', 1999 * bank: { 2000 * slider: {visible: true} 2001 * } 2002 * }); 2003 * 2004 * </pre><div id="JXGb67811ea-c1e3-4d1e-b13c-3537b3436f6c" class="jxgbox" style="width: 300px; height: 300px;"></div> 2005 * <script type="text/javascript"> 2006 * (function() { 2007 * var board = JXG.JSXGraph.initBoard('JXGb67811ea-c1e3-4d1e-b13c-3537b3436f6c', 2008 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 2009 * var bound = [-4, 6]; 2010 * var view = board.create('view3d', 2011 * [[-4, -3], [8, 8], 2012 * [bound, bound, bound]], 2013 * { 2014 * projection: 'parallel', 2015 * bank: { 2016 * slider: {visible: true} 2017 * } 2018 * }); 2019 * 2020 * })(); 2021 * 2022 * </script><pre> 2023 * 2024 */ 2025 bank: { 2026 pointer: { 2027 enabled: true, 2028 speed: 0.08, 2029 outside: true, 2030 button: -1, 2031 key: 'none' 2032 }, 2033 keyboard: { 2034 enabled: true, 2035 step: 10, 2036 key: 'ctrl' 2037 }, 2038 continuous: true, 2039 slider: { 2040 visible: 'inherit', 2041 style: 6, 2042 point1: { 2043 frozen: false, 2044 pos: 'auto' 2045 }, 2046 point2: { 2047 frozen: false, 2048 pos: 'auto' 2049 }, 2050 min: -Math.PI, 2051 max: Math.PI, 2052 start: 0.0 2053 } 2054 }, 2055 2056 /** 2057 * Distance of the camera to the center of the view. Expects values 2058 * larger than zero. If set to 'auto', r will be set to 1.01. 2059 * <p> 2060 * After a call of view.setView(az, el, r), view.nextView(), 2061 * view.previousView(), or view.setCurrentView() 2062 * with an optional r, 2063 * the camera distance is set to this value of r until a call of view.freeR(). 2064 * 2065 * @type {Number|String} 2066 * @default 'auto' 2067 * @see View3D#setView 2068 * @see View3D#freeR 2069 * @see View3D#nextView 2070 * @see View3D#previousView 2071 * @see View3D#setCurrentView 2072 */ 2073 r: 'auto', 2074 2075 /** 2076 * Enable user handling by a virtual trackball that allows to move the 3D scene 2077 * with 3 degrees of freedom. If not enabled, direct user dragging (i.e. in the JSXGraph board, not manipulating the sliders) will only have 2078 * two degrees of freedom. This means, the z-axis will always be projected to a vertical 2D line. 2079 * <p> 2080 * Sub-attributes: 2081 * <ul> 2082 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 2083 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 2084 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 2085 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 2086 * </ul> 2087 * 2088 * @name View3D#trackball 2089 * @type Object 2090 * @default <pre>{ 2091 * enabled: false, 2092 * outside: true, 2093 * button: -1, 2094 * key: 'none' 2095 * } 2096 * </pre> 2097 */ 2098 trackball: { 2099 enabled: false, 2100 outside: true, 2101 button: -1, 2102 key: 'none' 2103 }, 2104 2105 /** 2106 * Field of View defines the angle of view (in radians) of the camera, determining how much of the scene is captured within the frame. 2107 * 2108 * @type Number 2109 * @default 2/5*Math.PI 2110 */ 2111 fov: 1 / 5 * 2 * Math.PI, 2112 2113 /** 2114 * Fixed values for the view, which can be changed using keyboard keys `picture-up` and `picture-down`. 2115 * Array of the form: [[el0, az0, r0], [el1, az1, r1, ...[eln, azn, rn]] 2116 * 2117 * @name View3D#values 2118 * @type Array 2119 * @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> 2120 */ 2121 values: [ 2122 [0, 1.57], 2123 [0.78, 0.62], 2124 [0, 0], 2125 [5.49, 0.62], 2126 [4.71, 0], 2127 [3.93, 0.62], 2128 [3.14, 0], 2129 [2.36, 0.62], 2130 [1.57, 1.57] 2131 ], 2132 2133 infobox: { 2134 // strokeColor: '#888888', 2135 strokeColor: '#000000', 2136 fontSize: 16, 2137 useKatex: false, 2138 useMathjax: false, 2139 intl: { 2140 enabled: true, 2141 options: { 2142 minimumFractionDigits: 2, 2143 maximumFractionDigits: 3 2144 } 2145 } 2146 }, 2147 2148 /** 2149 * @class 2150 * @ignore 2151 */ 2152 _currentView: -1 2153 2154 /**#@-*/ 2155 } 2156 }); 2157 2158 export default JXG.Options; 2159