<html>
<head>
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v6.6" type="text/css">
<script language="JavaScript" src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.6"></script>
</head>
<body>
<div id="MyViewerDiv" ></div>
</body>
</html>
class sbtoolimpl {
constructor(viewer, toolName){
this.viewer=viewer;
this.toolName=toolName
}
getNames() {
return [this.toolName];
}
getName() {
return this.toolName;
}
activate(){
return true
}
deactivate(){
return true
}
update(){return false}
handleSingleClick (event) {
const camera= this.viewer.navigation.getCamera();
const vec = new THREE.Vector3();
const pos = new THREE.Vector3();
vec.set(
( event.clientX / window.innerWidth ) * 2 - 1,
- ( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
vec.unproject( camera );
vec.sub( camera.position ).normalize();
const distance = - camera.position.z / vec.z;
pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
this.viewer.impl.createOverlayScene('leaderOverlay-circle');
const circle_geometry = new THREE.CircleGeometry(1, 32);
const circle_material = new THREE.MeshBasicMaterial({color: 'rgb(1,1,1)'});
const circle = new THREE.Mesh(circle_geometry, circle_material);
circle.position.set(pos.x,pos.y,pos.z);
window.sb = circle;
this.viewer.impl.addOverlay('leaderOverlay-circle', circle);
this.viewer.impl.invalidate(true);
return false
}
}
class sbtool extends Autodesk.Viewing.Extension{
constructor(viewer, options){
super(viewer, options);
this.toolName = 'sb233';
this.tool=null
}
load () {
this.tool = new sbtoolimpl(this.viewer, this.toolName);
viewer.toolController.registerTool(this.tool);
viewer.toolController.activateTool(this.toolName);
return true;
};
unload () {
viewer.toolController.deactivateTool(this.toolName);
return true
}
}
Autodesk.Viewing.theExtensionManager.registerExtension(
'sb233',
sbtool);
const viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv'),{extensions:['sb233']});
Autodesk.Viewing.Initializer( {'env' : 'Local'}, () =>viewer.start('https://dukedhx.github.io/Forge-Workshop/shaver/0.svf'))
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |