Vectornaut/jsxgraph-3d-workshop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Put each script block next to the associated board div

Browse source
This commit is contained in:
Aaron Fenyes 2024-10-21 16:31:15 -07:00
parent 7a79ed1de0
commit 883e660e7c
6 changed files with 106 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

67
templates/view-demo.html
View file

@ -10,6 +10,8 @@
<h1>View options demo</h1>
<!-- central projection; depth ordering for points -->
<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:
@ -32,38 +34,6 @@
</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 are hidden by default. To show them, set the following attributes:
<ul>
<li><code>az: {slider: {visible: true}}</code></li>
<li><code>el: {slider: {visible: true}}</code></li>
<li><code>bank: {slider: {visible: true}}</code> (as of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>)</li>
</ul>
</p>
<p>
<a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">Version 1.9.2</a> introduces a new orientation control mode: the <em>virtual trackball</em>. In this mode, dragging from near the center of the board rolls the view along the drag direction, while dragging from near the edge of the board rotates the view in the plane of the board. These two motions transition smoothly into each other as the drag start position changes. To enable the virtual trackball, set the <code>trackball</code> attribute of the <code>View3D</code> to <code>{enabled: true}</code>.
</p>
<p>
This demo is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/trackball.html">virtual trackball example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.
</p>
</p>
<div>
<label for="ori-ctl">Orientation control:</label>
<select id="ori-ctl">
<option value="angles">Tait–Bryan angles</option>
<option value="trackball">Virtual trackball</option>
</select>
</div>
<div id="trackball-board" class="jxgbox" style="width:600px; height:600px"></div>
<!-- projection style; and depth ordering for points -->
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -181,6 +151,38 @@
</script>
<!-- virtual trackball; bank angle slider -->
<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 are hidden by default. To show them, set the following attributes:
<ul>
<li><code>az: {slider: {visible: true}}</code></li>
<li><code>el: {slider: {visible: true}}</code></li>
<li><code>bank: {slider: {visible: true}}</code> (as of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>)</li>
</ul>
</p>
<p>
<a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">Version 1.9.2</a> introduces a new orientation control mode: the <em>virtual trackball</em>. In this mode, dragging from near the center of the board rolls the view along the drag direction, while dragging from near the edge of the board rotates the view in the plane of the board. These two motions transition smoothly into each other as the drag start position changes. To enable the virtual trackball, set the <code>trackball</code> attribute of the <code>View3D</code> to <code>{enabled: true}</code>.
</p>
<p>
This demo is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/trackball.html">virtual trackball example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.
</p>
</p>
<div>
<label for="ori-ctl">Orientation control:</label>
<select id="ori-ctl">
<option value="angles">Tait–Bryan angles</option>
<option value="trackball">Virtual trackball</option>
</select>
</div>
<div id="trackball-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -248,5 +250,6 @@
inputOriCtl();
}
</script>
</body>
</html>