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