RL = import('https://cdn.jsdelivr.net/npm/three@0.126.0/examples/jsm/loaders/3DMLoader.js')
THREE = {
const THREE = window.THREE = await require('https://cdn.jsdelivr.net/npm/three@0.126.0');
await require("https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js").catch(() => {});
await require("three@0.96/examples/js/loaders/MTLLoader.js").catch(() => {});
await require("three@0.96/examples/js/loaders/OBJLoader.js").catch(() => {});
//await require('three/examples/jsm/loaders/OBJLoader.js').catch(() => {});
//await require('three@0.105.1/examples/js/loaders/GLTFLoader.js').catch(() => {});
return THREE;
}
RhinoCompute = importjs("https://files.mcneel.com/rhino3dm/js/latest/compute.rhino3d.js","window.RhinoCompute")
rhino3dm2 = import('https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/rhino3dm.module.js')
RhinoCompute.authToken ="bearer "+ "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwIjoiUEtDUyM3IiwiYyI6IkFFU18yNTZfQ0JDIiwiYjY0aXYiOiJQb2JXTUdaVXdQb1FhTTJqUEdoRzZnPT0iLCJiNjRjdCI6IlczUmFVcTM2bnRNYW9QRzhkd2NIcWx0V0JTTjhOYWh6bVFDSXBvaDF4cXBkSU9rejlEYkVZVWRaaDNXaXRmVm1yOTRyV1I2OTNpM1plZ0JGb210eHlkVWsxRDh2amdNcDdJTTc4VUxsWjIyTDZINWJsR1ZSbnNuczY3NDBsczRXL2ZpQlFFY2ZuSVJVekp4N0pPRktrM1BEQjFDOWY3dkhtekdnSG5CdHE4N3ZGeDR3TVZBNnJiTzUvUU1NS3RkSkNIZjFVU2pyNHl3YVVqV1pTR0ozVnc9PSIsImlhdCI6MTY3Njk5ODQ5NH0.1eL6XTUAVufw9_zLfxX_ndroFAFSbxgOs31iViTmbhY"
RhinoCompute.url = "https://www.rhino3d.com/compute"
rhino3dm = importjs('https://files.mcneel.com/rhino3dm/js/latest/rhino3dm.js',"window.rhino3dm")
models
viewof models = Inputs.radio(["1", "2", "none"], {label: "Models"})
{
var scene = new THREE.Scene();//three refers to the 3d environment
var wdth = 1000
var hght = 800
var camera = new THREE.PerspectiveCamera( 60, wdth/hght, 1, 1000 );
camera.position.set( 5, -10, 10 );
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( wdth, hght );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.outputEncoding = THREE.sRGBEncoding;
//use the 'orb' library for orbital controls
const controls = new oc.OrbitControls(camera, renderer.domElement);
var foot
let rhino//, doc
rhino3dm().then(async m => {
//console.log('Loaded rhino3dm.')
rhino = m // global
//init()
if(models=="1"){
load()
}
load2()
create()
})
function load(){//load the first 3dm file
const RLoader = new RL.Rhino3dmLoader();
RLoader.setLibraryPath('https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/')
RLoader.load(sphere_url,
function(object){
scene.add(object)
},function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}
)
}
function load2(){//load the second 3dm file
const RLoader = new RL.Rhino3dmLoader();
RLoader.setLibraryPath('https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/')
RLoader.load(rh_url,
function(object){
scene.add(object)
},function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}
)
}
function create () {//where object we create in observable are
const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 0, 0, 2 );
//directionalLight.target.set( 0, 0, -2 );
scene.add( directionalLight );
}
var animate = function () {//render when we change views, etc
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
yield renderer.domElement;
}
sphere = FileAttachment("sphere.3dm")
sphere_url = {
const blob = await FileAttachment("sphere.3dm").blob();
return URL.createObjectURL(blob);
}
truncated = FileAttachment("truncated.3dm")
truncated_url = {
const blob = await FileAttachment("truncated.3dm").blob();
return URL.createObjectURL(blob);
}
foot1 = FileAttachment("foot.3dm")
foot2 = FileAttachment("foot2.3dm")
import1 = FileAttachment("import.3dm")
rh_url = {
const blob = await FileAttachment("foot.3dm").blob();
return URL.createObjectURL(blob);
}
rh_url2 = {
const blob = await FileAttachment("foot2.3dm").blob();
return URL.createObjectURL(blob);
}
oc = import("https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js").catch(() => {})
ellipse = FileAttachment("ellipse.3dm")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.