Enable mouse rotate, pan, and zoom with TrackballControls

This commit is contained in:
Glen Whitney 2019-12-12 14:04:11 -05:00
parent c7f2feab1f
commit 9c2038e3c9
2 changed files with 28 additions and 7 deletions

View File

@ -3,7 +3,9 @@
When you load dyna3, you should initially see a three-dimensional coordinate system with labeled axes. When you load dyna3, you should initially see a three-dimensional coordinate system with labeled axes.
```javascript ```javascript
import {threeLoaded, three as J3} from './externals.js' import {threeLoaded,
three as J3,
TrackballControls as J3x} from './externals.js'
LTx = { dashed: true, plain: false } LTx = { dashed: true, plain: false }
@ -48,6 +50,10 @@ When you load dyna3, you should initially see a three-dimensional coordinate sys
camera = new J3.PerspectiveCamera 75, rwd/rht, 0.1, 1000 camera = new J3.PerspectiveCamera 75, rwd/rht, 0.1, 1000
camera.position.z = 5 camera.position.z = 5
controls = new J3x.TrackballControls camera, renderer.domElement
renderer.setAnimationLoop ->
controls.update()
renderer.render scene,camera renderer.render scene,camera
threeLoaded.then main threeLoaded.then main

View File

@ -4,7 +4,7 @@
The dyna3 program depends on some externally-maintained JavaScript libraries/modules. The package uses npm to track these external dependencies. A module externals.js is automatically generated from the package.json and package_lock.json files created by npm to load the necessary modules at runtime. The dyna3 program depends on some externally-maintained JavaScript libraries/modules. The package uses npm to track these external dependencies. A module externals.js is automatically generated from the package.json and package_lock.json files created by npm to load the necessary modules at runtime.
The generation is performed by pkglock_to_externals.litcoffee, which also records the main importable file within the library, as there does not seem to be a systematic way to generate that filename from the module name. The generation is performed by pkglock_to_externals.litcoffee, which also records all of the needed importable files within the library, as there's no way to generate that from the module name or the information in package-lock.json.
Specific packages/implementation approaches for components of dyna3 include the following items. All packages are obtained from npm unless otherwise noted. Specific packages/implementation approaches for components of dyna3 include the following items. All packages are obtained from npm unless otherwise noted.
@ -15,7 +15,10 @@ Specific packages/implementation approaches for components of dyna3 include the
```javascript ```javascript
importable = { three: 'build/three.module.js' } importable =
three:
three: 'build/three.module.js',
TrackballControls: 'examples/jsm/controls/TrackballControls.js'
``` ```
And here is the current complete list of external libraries on which operation of dyna3 depends: And here is the current complete list of external libraries on which operation of dyna3 depends:
@ -38,19 +41,31 @@ And here is the current complete list of external libraries on which operation o
if process.argv.length > 2 if process.argv.length > 2
process.stdout.write "- #{dep}\n" process.stdout.write "- #{dep}\n"
else else
exports = (
"export var #{mod};" for mod in Object.keys importable[dep]
).join "\n"
mainload = (
"#{mod} = await import('https://cdn.jsdelivr.net/npm/#{dep}@#{pldata.dependencies[dep].version}/#{importable[dep][mod]}');" for mod in Object.keys importable[dep]
).join "\n "
fallbackload = (
"#{mod} = await import('./node_modules/#{dep}/#{importable[dep][mod]}');" for mod in Object.keys importable[dep]
).join "\n "
block = block =
""" """
export var #{dep}; #{exports}
export var #{dep}Loaded = new Promise(async function(resolve, reject) { export var #{dep}Loaded = new Promise(async function(resolve, reject) {
var success = false; var success = false;
try { try {
#{dep} = await import('https://cdn.jsdelivr.net/npm/#{dep}@#{pldata.dependencies[dep].version}/#{importable[dep]}'); #{mainload}
console.log('CDN import of #{dep} module OK'); console.log('CDN import of #{dep} module OK');
success = true; success = true;
} catch(err) { } catch(err) {
console.log('CDN import of #{dep} failed: ' + JSON.stringify(err)); console.log('CDN import of #{dep} failed: ' + JSON.stringify(err));
try { try {
#{dep} = await import('./node_modules/#{dep}/#{importable[dep]}'); #{fallbackload}
success = true; success = true;
} catch(err) { } catch(err) {
} }