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 visible: "inherit" 695 696 /**#@-*/ 697 }, 698 699 plane3d: { 700 /**#@+ 701 * @visprop 702 */ 703 704 layer: 12, 705 strokeWidth: 0, 706 strokeColor: "black", 707 strokeOpacity: 1, 708 highlight: false, 709 tabindex: null, 710 needsRegularUpdate: true, 711 712 gradient: "linear", 713 gradientSecondColor: "#ffffff", 714 gradientAngle: Math.PI, 715 fillColor: "#a7a7a7", 716 fillOpacity: 0.6, 717 718 /** 719 * Optional 3D mesh of a finite plane. 720 * It is not available if the plane is infinite (at initialization time) in any direction. 721 * 722 * @type Mesh3D 723 * @name Plane3D#mesh3d 724 * @default see {@link Mesh3D} 725 */ 726 mesh3d: { 727 }, 728 729 /** 730 * If the second parameter and the third parameter are given as arrays or functions and threePoints:true 731 * then the second and third parameter are interpreted as point coordinates and not as directions, i.e. 732 * the plane is defined by three points. 733 * 734 * @name Plane3D#threePoints 735 * @type Boolean 736 * @default false 737 */ 738 threePoints: false, 739 740 /** 741 * Attributes of the defining point in case the plane is defined by [point, direction1, direction2, [range1, [range2]]]. 742 * @type Point3D 743 * @name Plane3D#point 744 * @default <pre>visible: false, name: "", fixed: true</pre> 745 */ 746 point: { visible: false, name: "", fixed: true }, 747 748 /** 749 * Attributes of the first point in case the plane is defined by [point, point, point]. 750 * @type Point3D 751 * @name Plane3D#point1 752 * @default <pre>visible: false, name: ""</pre> 753 */ 754 point1: { visible: false, name: "" }, // Used in point/point/point 755 756 /** 757 * Attributes of the second point in case the plane is defined by [point, point, point]. 758 * @type Point3D 759 * @name Plane3D#point2 760 * @default <pre>visible: false, name: ""</pre> 761 */ 762 point2: { visible: false, name: "" }, // Used in point/point/point 763 764 /** 765 * Attributes of the third point in case the plane is defined by [point, point, point]. 766 * @type Point3D 767 * @name Plane3D#point3 768 * @default <pre>visible: false, name: ""</pre> 769 */ 770 point3: { visible: false, name: "" } // Used in point/point/point 771 772 /**#@-*/ 773 }, 774 775 point3d: { 776 layer: 13, 777 infoboxDigits: "auto", 778 strokeWidth: 0, 779 gradient: "radial", 780 gradientSecondColor: "#555555", 781 fillColor: "yellow", 782 highlightStrokeColor: "#555555", 783 gradientFX: 0.7, 784 gradientFY: 0.3, 785 needsRegularUpdate: true 786 }, 787 788 polygon3d: { 789 /**#@+ 790 * @visprop 791 */ 792 793 layer: 12, 794 highlight: false, 795 tabindex: -1, 796 strokeWidth: 1, 797 fillColor: 'none', 798 needsRegularUpdate: true 799 800 801 /**#@-*/ 802 }, 803 804 polyhedron3d: { 805 /**#@+ 806 * @visprop 807 */ 808 809 /** 810 * Color array to define fill colors of faces cyclically. 811 * Alternatively, the fill color can be defined for each face individually. 812 * 813 * @type Array 814 * @name Polyhedron3D#fillColorArray 815 * @default ['white', 'black'] 816 */ 817 fillColorArray: ['white', 'black'], 818 819 needsRegularUpdate: true 820 821 /**#@-*/ 822 }, 823 824 sphere3d: { 825 /**#@+ 826 * @visprop 827 */ 828 829 layer: 12, 830 highlight: false, 831 832 strokeWidth: 1, 833 strokeColor: '#00ff80', 834 fillColor: 'white', 835 gradient: 'radial', 836 gradientSecondColor: '#00ff80', 837 gradientFX: 0.7, 838 gradientFY: 0.3, 839 fillOpacity: 0.4, 840 needsRegularUpdate: true 841 842 /**#@-*/ 843 }, 844 845 surface3d: { 846 /**#@+ 847 * @visprop 848 */ 849 850 layer: 12, 851 highlight: false, 852 tabindex: -1, 853 strokeWidth: 1, 854 855 /** 856 * Number of intervals the mesh is divided into in direction of parameter u. 857 * @type Number 858 * @name ParametricSurface3D#stepsU 859 */ 860 stepsU: 30, 861 862 /** 863 * Number of intervals the mesh is divided into in direction of parameter v. 864 * @type Number 865 * @name ParametricSurface3D#stepsV 866 */ 867 stepsV: 30, 868 869 needsRegularUpdate: true 870 871 /**#@-*/ 872 }, 873 874 text3d: { 875 /**#@+ 876 * @visprop 877 */ 878 879 withLabel: false, 880 needsRegularUpdate: true 881 882 /**#@-*/ 883 }, 884 885 ticks3d: { 886 /**#@+ 887 * @visprop 888 */ 889 890 visible: true, 891 892 ticksDistance: 1, 893 majorHeight: 10, 894 minorTicks: 0, 895 tickEndings: [0, 1], 896 drawLabels: true, 897 needsRegularUpdate: true, 898 899 label: { 900 visible: true, 901 withLabel: false 902 } 903 904 /**#@-*/ 905 }, 906 907 vectorfield3d: { 908 /**#@+ 909 * @visprop 910 */ 911 912 /** 913 * Scaling factor of the vectors. This in contrast to slope fields, where this attribute sets the vector to the given length. 914 * @name scale 915 * @memberOf Vectorfield3D.prototype 916 * @type {Number|Function} 917 * @see Slopefield.scale 918 * @default 1 919 */ 920 scale: 1, 921 922 /** 923 * Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance. 924 * Fields are: 925 * <ul> 926 * <li> enabled: Boolean 927 * <li> size: length of the arrow head legs (in pixel) 928 * <li> angle: angle of the arrow head legs In radians. 929 * </ul> 930 * @name arrowhead 931 * @memberOf Vectorfield3D.prototype 932 * @type {Object} 933 * @default <tt>{enabled: true, size: 5, angle: Math.PI * 0.125}</tt> 934 */ 935 arrowhead: { 936 enabled: true, 937 size: 5, 938 angle: Math.PI * 0.125 939 }, 940 needsRegularUpdate: true 941 942 /**#@-*/ 943 }, 944 945 view3d: { 946 /**#@+ 947 * @visprop 948 */ 949 950 needsRegularUpdate: true, 951 952 /** 953 * When this attribute is enabled, elements closer to the screen are drawn 954 * over elements further from the screen within the 3D layer. This affects 955 * all elements which are in one of the layer specified in the sub-attribute 'layers'. 956 * <p> 957 * For each layer this depth ordering is done independently. 958 * Sub-attributes: 959 * <ul> 960 * <li><tt>enabled</tt>: false/true 961 * <li><tt>layers</tt>: [12, 13] 962 * </ul> 963 * 964 * @name View3D#depthOrder 965 * @type Object 966 * @default <pre>{ 967 * enabled: false, 968 * layers: [12, 13] 969 * } 970 * </pre> 971 */ 972 depthOrder: { 973 enabled: false, 974 layers: [12, 13] 975 }, 976 977 /** 978 * Choose the projection type to be used: `parallel` or `central`. 979 * <ul> 980 * <li> `parallel` is parallel projection, also called orthographic projection 981 * <li> `central` is central projection, also called perspective projection 982 * </ul> 983 * 984 * 985 * @name View3D#projection 986 * @type String 987 * @default 'parallel' 988 * @example 989 * var bound = [-5, 5]; 990 * var view = board.create('view3d', 991 * [[-6, -3], [8, 8], 992 * [bound, bound, bound]], 993 * { 994 * projection: 'parallel' 995 * }); 996 * 997 * </pre><div id="JXG80d81b13-c604-4841-bdf6-62996440088a" class="jxgbox" style="width: 300px; height: 300px;"></div> 998 * <script type="text/javascript"> 999 * (function() { 1000 * var board = JXG.JSXGraph.initBoard('JXG80d81b13-c604-4841-bdf6-62996440088a', 1001 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1002 * var bound = [-5, 5]; 1003 * var view = board.create('view3d', 1004 * [[-6, -3], [8, 8], 1005 * [bound, bound, bound]], 1006 * { 1007 * projection: 'parallel' 1008 * }); 1009 * 1010 * })(); 1011 * 1012 * </script><pre> 1013 * 1014 * @example 1015 * var bound = [-5, 5]; 1016 * var view = board.create('view3d', 1017 * [[-6, -3], [8, 8], 1018 * [bound, bound, bound]], 1019 * { 1020 * projection: 'central' 1021 * }); 1022 * 1023 * </pre><div id="JXGdb7b7c99-631c-41d0-99bf-c0a8d0138218" class="jxgbox" style="width: 300px; height: 300px;"></div> 1024 * <script type="text/javascript"> 1025 * (function() { 1026 * var board = JXG.JSXGraph.initBoard('JXGdb7b7c99-631c-41d0-99bf-c0a8d0138218', 1027 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1028 * var bound = [-5, 5]; 1029 * var view = board.create('view3d', 1030 * [[-6, -3], [8, 8], 1031 * [bound, bound, bound]], 1032 * { 1033 * projection: 'central' 1034 * }); 1035 * })(); 1036 * 1037 * </script><pre> 1038 * 1039 */ 1040 projection: 'parallel', 1041 1042 /** 1043 * Allow vertical dragging of objects, i.e. in direction of the z-axis. 1044 * Subobjects are 1045 * <ul> 1046 * <li>enabled: true 1047 * <li>key: 'shift' 1048 * </ul> 1049 * <p> 1050 * Possible values for attribute <i>key</i>: 'shift' or 'ctrl'. 1051 * 1052 * @name View3D#verticalDrag 1053 * @type Object 1054 * @default <tt>{enabled: true, key: 'shift'}</tt> 1055 */ 1056 verticalDrag: { 1057 enabled: true, 1058 key: 'shift' 1059 }, 1060 1061 /** 1062 * Specify the user handling of the azimuth. 1063 * <ul> 1064 * <li><tt>pointer</tt> sub-attributes: 1065 * <ul> 1066 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by azimuth. 1067 * <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. 1068 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1069 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1070 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1071 * </ul> 1072 * <li><tt>keyboard</tt> sub-attributes: 1073 * <ul> 1074 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard (left/right arrow keys) can be used to navigate the board. 1075 * <li><tt>step</tt>: Size of the step per keystroke. 1076 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1077 * </ul> 1078 * <li><tt>continuous</tt>: Boolean that specifies whether the az_slider starts again from the beginning when its end is reached. 1079 * <li><tt>slider</tt> attributes of the az_slider ({@link Slider}) with additional 1080 * <ul> 1081 * <li><tt>min</tt>: Minimum value. 1082 * <li><tt>max</tt>: Maximum value. 1083 * <li><tt>start</tt>: Start value. 1084 * </ul> 1085 * 'min' and 'max' are used only if trackball is not enabled. 1086 * </ul> 1087 * 1088 * @name View3D#az 1089 * @type Object 1090 * @default <pre>{ 1091 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1092 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1093 * continuous: true, 1094 * slider: { 1095 * visible: true, 1096 * style: 6, 1097 * point1: {frozen: true}, 1098 * point2: {frozen: true}, 1099 * min: 0, 1100 * max: 2 * Math.PI, 1101 * start: 1.0 1102 * }, 1103 * }</pre> 1104 * 1105 * @example 1106 * var bound = [-4, 6]; 1107 * var view = board.create('view3d', 1108 * [[-4, -3], [8, 8], 1109 * [bound, bound, bound]], 1110 * { 1111 * projection: 'parallel', 1112 * az: { 1113 * slider: {visible: true, start: 0.75 * Math.PI} 1114 * } 1115 * }); 1116 * 1117 * </pre><div id="JXG4c381f21-f043-4419-941d-75f384c026d0" class="jxgbox" style="width: 300px; height: 300px;"></div> 1118 * <script type="text/javascript"> 1119 * (function() { 1120 * var board = JXG.JSXGraph.initBoard('JXG4c381f21-f043-4419-941d-75f384c026d0', 1121 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1122 * var bound = [-4, 6]; 1123 * var view = board.create('view3d', 1124 * [[-4, -3], [8, 8], 1125 * [bound, bound, bound]], 1126 * { 1127 * projection: 'parallel', 1128 * az: { 1129 * slider: {visible: true, start: 0.75 * Math.PI} 1130 * } 1131 * }); 1132 * 1133 * })(); 1134 * 1135 * </script><pre> 1136 * 1137 */ 1138 az: { 1139 pointer: { 1140 enabled: true, 1141 speed: 1, 1142 outside: true, 1143 button: -1, 1144 key: 'none' 1145 }, 1146 keyboard: { 1147 enabled: true, 1148 step: 10, 1149 key: 'ctrl' 1150 }, 1151 continuous: true, 1152 slider: { 1153 visible: 'inherit', 1154 style: 6, 1155 point1: { frozen: true }, 1156 point2: { frozen: true }, 1157 min: 0, 1158 max: 2 * Math.PI, 1159 start: 1.0 1160 } 1161 }, 1162 1163 /** 1164 * Specify the user handling of the elevation. 1165 * <ul> 1166 * <li><tt>pointer</tt> sub-attributes: 1167 * <ul> 1168 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 1169 * <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. 1170 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1171 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1172 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1173 * </ul> 1174 * <li><tt>keyboard</tt> sub-attributes: 1175 * <ul> 1176 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard (up/down arrow keys) can be used to navigate the board. 1177 * <li><tt>step</tt>: Size of the step per keystroke. 1178 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1179 * </ul> 1180 * <li><tt>continuous</tt>: Boolean that specifies whether the el_slider starts again from the beginning when its end is reached. 1181 * <li><tt>slider</tt> attributes of the el_slider ({@link Slider}) with additional 1182 * <ul> 1183 * <li><tt>min</tt>: Minimum value. 1184 * <li><tt>max</tt>: Maximum value. 1185 * <li><tt>start</tt>: Start value. 1186 * </ul> 1187 * 'min' and 'max' are used only if trackball is not enabled. 1188 * </ul> 1189 * 1190 * @name View3D#el 1191 * @type Object 1192 * @default <pre>{ 1193 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1194 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1195 * continuous: true, 1196 * slider: { 1197 * visible: true, 1198 * style: 6, 1199 * point1: {frozen: true}, 1200 * point2: {frozen: true}, 1201 * min: 0, 1202 * max: 2 * Math.PI, 1203 * start: 0.3 1204 * }, 1205 * }<pre> 1206 * @example 1207 * var bound = [-4, 6]; 1208 * var view = board.create('view3d', 1209 * [[-4, -3], [8, 8], 1210 * [bound, bound, bound]], 1211 * { 1212 * projection: 'parallel', 1213 * el: { 1214 * slider: {visible: true} 1215 * } 1216 * }); 1217 * 1218 * </pre><div id="JXG8926f733-c42e-466b-853c-74feb795e879" class="jxgbox" style="width: 300px; height: 300px;"></div> 1219 * <script type="text/javascript"> 1220 * (function() { 1221 * var board = JXG.JSXGraph.initBoard('JXG8926f733-c42e-466b-853c-74feb795e879', 1222 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1223 * var bound = [-4, 6]; 1224 * var view = board.create('view3d', 1225 * [[-4, -3], [8, 8], 1226 * [bound, bound, bound]], 1227 * { 1228 * projection: 'parallel', 1229 * el: { 1230 * slider: {visible: true} 1231 * } 1232 * }); 1233 * 1234 * })(); 1235 * 1236 * </script><pre> 1237 * 1238 */ 1239 el: { 1240 pointer: { 1241 enabled: true, 1242 speed: 1, 1243 outside: true, 1244 button: -1, 1245 key: 'none' 1246 }, 1247 keyboard: { 1248 enabled: true, 1249 step: 10, 1250 key: 'ctrl' 1251 }, 1252 continuous: true, 1253 slider: { 1254 visible: 'inherit', 1255 style: 6, 1256 point1: { frozen: true }, 1257 point2: { frozen: true }, 1258 min: 0, 1259 max: 2 * Math.PI, 1260 start: 0.3 1261 } 1262 }, 1263 1264 /** 1265 * Specify the user handling of the bank angle. 1266 * <ul> 1267 * <li><tt>pointer</tt> sub-attributes: 1268 * <ul> 1269 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 1270 * <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. 1271 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1272 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1273 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1274 * </ul> 1275 * <li><tt>keyboard</tt> sub-attributes: 1276 * <ul> 1277 * <li><tt>enabled</tt>: Boolean that specifies whether the keyboard ('<', '>' keys) can be used to navigate the board. 1278 * <li><tt>step</tt>: Size of the step per keystroke. 1279 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1280 * </ul> 1281 * <li><tt>continuous</tt>: Boolean that specifies whether the el_slider starts again from the beginning when its end is reached. 1282 * <li><tt>slider</tt> attributes of the el_slider ({@link Slider}) with additional 1283 * <ul> 1284 * <li><tt>min</tt>: Minimum value. 1285 * <li><tt>max</tt>: Maximum value. 1286 * <li><tt>start</tt>: Start value. 1287 * </ul> 1288 * 'min' and 'max' are used only if trackball is not enabled. 1289 * </ul> 1290 * 1291 * @name View3D#bank 1292 * @type Object 1293 * @default <pre>{ 1294 * pointer: {enabled: true, speed: 1, outside: true, button: -1, key: 'none'}, 1295 * keyboard: {enabled: true, step: 10, key: 'ctrl'}, 1296 * continuous: true, 1297 * slider: { 1298 * visible: true, 1299 * style: 6, 1300 * point1: {frozen: true}, 1301 * point2: {frozen: true}, 1302 * min: 0, 1303 * max: 2 * Math.PI, 1304 * start: 0.3 1305 * }, 1306 * }<pre> 1307 * @example 1308 * var bound = [-4, 6]; 1309 * var view = board.create('view3d', 1310 * [[-4, -3], [8, 8], 1311 * [bound, bound, bound]], 1312 * { 1313 * projection: 'parallel', 1314 * bank: { 1315 * slider: {visible: true} 1316 * } 1317 * }); 1318 * 1319 * </pre><div id="JXGb67811ea-c1e3-4d1e-b13c-3537b3436f6c" class="jxgbox" style="width: 300px; height: 300px;"></div> 1320 * <script type="text/javascript"> 1321 * (function() { 1322 * var board = JXG.JSXGraph.initBoard('JXGb67811ea-c1e3-4d1e-b13c-3537b3436f6c', 1323 * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false}); 1324 * var bound = [-4, 6]; 1325 * var view = board.create('view3d', 1326 * [[-4, -3], [8, 8], 1327 * [bound, bound, bound]], 1328 * { 1329 * projection: 'parallel', 1330 * bank: { 1331 * slider: {visible: true} 1332 * } 1333 * }); 1334 * 1335 * })(); 1336 * 1337 * </script><pre> 1338 * 1339 */ 1340 bank: { 1341 pointer: { 1342 enabled: true, 1343 speed: 0.08, 1344 outside: true, 1345 button: -1, 1346 key: 'none' 1347 }, 1348 keyboard: { 1349 enabled: true, 1350 step: 10, 1351 key: 'ctrl' 1352 }, 1353 continuous: true, 1354 slider: { 1355 visible: 'inherit', 1356 style: 6, 1357 point1: { frozen: true }, 1358 point2: { frozen: true }, 1359 min: -Math.PI, 1360 max: Math.PI, 1361 start: 0.0 1362 } 1363 }, 1364 1365 /** 1366 * Enable user handling by a virtual trackball that allows to move the 3D scene 1367 * with 3 degrees of freedom. If not enabled, direct user dragging (i.e. in the JSXGraph board, not manipulating the sliders) will only have 1368 * two degrees of freedom. This means, the z-axis will always be projected to a vertical 2D line. 1369 * <p> 1370 * Sub-attributes: 1371 * <ul> 1372 * <li><tt>enabled</tt>: Boolean that specifies whether pointer navigation is allowed by elevation. 1373 * <li><tt>outside</tt>: Boolean that specifies whether the pointer navigation is continued when the cursor leaves the board. 1374 * <li><tt>button</tt>: Which button of the pointer should be used? (<tt>'-1'</tt> (=no button), <tt>'0'</tt> or <tt>'2'</tt>) 1375 * <li><tt>key</tt>: Should an additional key be pressed? (<tt>'none'</tt>, <tt>'shift'</tt> or <tt>'ctrl'</tt>) 1376 * </ul> 1377 * 1378 * @name View3D#trackball 1379 * @type Object 1380 * @default <pre>{ 1381 * enabled: false, 1382 * outside: true, 1383 * button: -1, 1384 * key: 'none' 1385 * } 1386 * </pre> 1387 */ 1388 trackball: { 1389 enabled: false, 1390 outside: true, 1391 button: -1, 1392 key: 'none' 1393 }, 1394 1395 /** 1396 * Distance of the camera to the center of the view. 1397 * If set to 'auto', r will be calculated automatically. 1398 * 1399 * @type {Number|String} 1400 * @default 'auto' 1401 */ 1402 r: 'auto', 1403 1404 /** 1405 * Field of View defines the angle of view (in radians) of the camera, determining how much of the scene is captured within the frame. 1406 * 1407 * @type Number 1408 * @default 2/5*Math.PI 1409 */ 1410 fov: 1 / 5 * 2 * Math.PI, 1411 1412 /** 1413 * Fixed values for the view, which can be changed using keyboard keys `picture-up` and `picture-down`. 1414 * Array of the form: [[el0, az0, r0], [el1, az1, r1, ...[eln, azn, rn]] 1415 * 1416 * @name View3D#values 1417 * @type Array 1418 * @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> 1419 */ 1420 values: [ 1421 [0, 1.57], 1422 [0.78, 0.62], 1423 [0, 0], 1424 [5.49, 0.62], 1425 [4.71, 0], 1426 [3.93, 0.62], 1427 [3.14, 0], 1428 [2.36, 0.62], 1429 [1.57, 1.57] 1430 ], 1431 1432 infobox: { 1433 // strokeColor: '#888888', 1434 strokeColor: '#000000', 1435 fontSize: 16, 1436 useKatex: false, 1437 useMathjax: false, 1438 intl: { 1439 enabled: true, 1440 options: { 1441 minimumFractionDigits: 2, 1442 maximumFractionDigits: 3 1443 } 1444 } 1445 }, 1446 1447 /** 1448 * @class 1449 * @ignore 1450 */ 1451 _currentView: -1 1452 1453 /**#@-*/ 1454 } 1455 }); 1456 1457 export default JXG.Options; 1458