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