View options demo

by fareycircles

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>View options demo</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" />
    <script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
</head>
<body>

<h1>View options demo</h1>

<h2>Central projection; depth ordering for points</h2>
<p>
  This demo shows how the new <code>projection</code> and <code>depthOrderPoints</code> options of a <code>View3D</code> affect the view. Use the controls to:
  <ul>
    <li>Switch between parallel and central projection (<code>projection</code> set to <code>'parallel'</code> and <code>'central'</code>, respectively).</li>
    <li>Switch depth ordering of points on and off (<code>depthOrderPoints</code> set to <code>true</code> or <code>false</code>).
  </ul>
  To see what depth ordering does, rotate the view to make two points overlap, and then rotate again to switch which point is in front.
</p>
<div>
    <label for="proj">Projection:</label>
    <select id="proj">
        <option value="parallel">Parallel</option>
        <option value="central">Central</option>
    </select>
</div>
<div>
    <input id="depth-ordering-ctl" type="checkbox" />
    <label for="depth-ordering-ctl">Depth-order points</label>
</div>
<div id="proj-depth-board" class="jxgbox" style="width:600px; height:600px"></div>

<h2>Virtual trackball; bank angle slider</h2>
<p>
  In the default orientation control mode, dragging the mouse changes the Tait-Bryan angles of the camera.
  <ul>
    <li>Dragging horizontally changes the azimuth.</li>
    <li>Dragging vertically changes the elevation.</li>
    <li>As of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>, doing a scroll gesture with the mouse button down changes the bank angle.</li>
  </ul>
  The Tait-Bryan angles can also be controlled with sliders, which...