//THREErr = require("https://threejs.org/build/three.js")
//THREE = require("three")
/*THREE = {
const THREE = window.THREE = await require('three@0.105.1/build/three.min.js');
await require('three@0.105.1/examples/js/controls/OrbitControls.js').catch(() => {});
await require('three@0.105.1/examples/js/loaders/3DMLoader.js').catch(() => {});
return THREE;
}*/
/*THREE111 = {
const THREE = window.THREE = await require('https://cdn.jsdelivr.net/npm/three@0.126.0/build/three.module.js');
//await require("https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/rhino3dm.module.js").catch(() => {});
return THREE;
}*/
//RHL = require('https://cdn.jsdelivr.net/npm/three@0.126.0/examples/jsm/loaders/3DMLoader.js');
//Rhino3dmLoader2 = require("npm/three@0.126.0/examples/jsm/loaders/3DMLoader.js").catch(() => window.Rhino3dmLoader)
RL = import('https://cdn.jsdelivr.net/npm/three@0.126.0/examples/jsm/loaders/3DMLoader.js')
rhino3dm = import('https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/rhino3dm.module.js')
//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;
}
//three@0.107.0
/*THREEORB = {
const THREEORB = window.THREEORB = await require('three@0.96/build/three.min.js');
await require("three@0.96/examples/js/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 THREEORB;
}*/
/*THREE2 = {
const THREE = await require("three@0.82.1/build/three.min.js");
if (!THREE.OrbitControls) { // If not previously loaded.
const module = window.module = {exports: undefined};
THREE.OrbitControls = await require("three-orbit-controls@82.1.0/index.js").catch(() => module.exports(THREE));
}
return THREE;
}*/
wwwwww2rhino3dm = {
const rhino3dm = window.rhino3dm = await require('rhino3dm');
//await require('three/examples/jsm/controls/OrbitControls.js').catch(() => {});
return rhino3dm;
}
/*THREEOC = {
const THREE = window.THREE = await require('three@0.105.1/build/three.min.js');
//await require('three@0.105.1/examples/js/controls/OrbitControls.js').catch(() => {});
await require('three@0.105.1/master/examples/js/loaders/3DMLoader.js').catch(() => {});
return THREE;
}*/
//threedm = importjs("https://threejs.org/examples/jsm/loaders/3DMLoader.js","window")
//loadrrr = require("https://github.com/mrdoob/three.js/blob/b1c7e14e1209db0a3324c34bb7ea5b1359206af1/examples/jsm/loaders/3DMLoader.js")
//rhino3dm = importjs("https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0/rhino3dm.min.js","window.rhino3dm")
//THREE = importjs("https://threejs.org/build/three.js","window.THREE") https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/
//rhino3dm_module = require('three/examples/jsm/loaders/OBJLoader.js')
//rhino3dm.js 0.15.0-beta.
//rhino3dm = importjs("https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/rhino3dm.module.js","window.rhino3dm")
RhinoCompute = importjs("https://files.mcneel.com/rhino3dm/js/latest/compute.rhino3d.js","window.RhinoCompute")
//Rhino3dmLoader = importjs("examples/jsm/loaders/3DMLoader.js","window.Rhino3dmLoader")
//r3dm = importjs("three/examples/jsm/loaders/3DMLoader","r3dm")
function Distance(p1, p2) {
var a = p2[0] - p1[0];
var b = p2[1] - p1[1];
var c = p2[2] - p1[2];
return Math.sqrt(a * a + b * b + c * c);
}
{
var scene = new THREE.Scene();
var wdth = 900
var hght = 900
var camera = new THREE.PerspectiveCamera( 60, wdth/hght, 1, 1000 );
//var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1, 1000 );
camera.position.set( 20, -20, 20 );
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( wdth, hght );
//renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.outputEncoding = THREE.sRGBEncoding;
console.log(window.innerHeight)
//document.body.appendChild( renderer.domElement );
//use the 'orb' library for orbital controls
const controls = new oc.OrbitControls(camera, renderer.domElement);
var foot
let rhino//, doc
rhino3dm.default().then(async m => {
//console.log('Loaded rhino3dm.')
rhino = m // global
//init()
create()
})
const parent = new THREE.Object3D();
//const loader = new OBJLoader();
const manager = new THREE.LoadingManager();
//const loader2 = new THREE.Rhino3dmLoader( manager );
/*
const loader = new THREE.OBJLoader( manager );
loader.load( obj_url, function ( obj ) {
foot = obj
})
*/
//foot.position.set(5,5,5)
const RLoader = new RL.Rhino3dmLoader();
//RLoader.setLibraryPath('https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/')
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' );
},
)
const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 0, 0, 2 );
scene.add( directionalLight );
/*
RLoader.load(foot1,
function ( object ) {
scene.add( object );
},
/*function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
console.log("helllo"),
function ( error ) {
console.log( 'An error happened' );
}
)
*/
//const loader = new Rhino3dmLoader();
//loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/' );
function create () {
//doc = new rhino.File3dm()
const loader = new THREE.BufferGeometryLoader();
/*
// -- POINTS / POINTCLOUDS -- //
// POINTS
*/
let ptA = [2, 2, 0]
const geometry = new THREE.BufferGeometry()
const vertices = new Float32Array( ptA )
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) )
const pointsMaterial = new THREE.PointsMaterial( { color: 0x00ff00 } )
const threejsPoint = new THREE.Points( geometry, pointsMaterial )
scene.add(threejsPoint)
//doc.objects().addPoint(ptA)
//const ptA = [10, 10, 0]
const ptB = [10, 0, 0]
const ptC = [10, 10, 0]
const ptD = [0, 10, 0]
const ptE = [ 20, 20, 20]
const ptF = [30, 0, 0]
const ptG = [35, 5, 0]
const ptH = [40, -5, 0]
const ptI = [45, 5, 0]
const ptJ = [50, 0, 0]
/*
const red = { r: 255, g: 0, b: 0, a: 0 }
const pointCloud = new rhino.PointCloud()
pointCloud.add( ptA, red )
pointCloud.add( ptB, red )
pointCloud.add( ptC, red )
pointCloud.add( ptD, red )
pointCloud.add( ptE, red )
pointCloud.add( ptF, red )
pointCloud.add( ptG, red )
pointCloud.add( ptH, red )
pointCloud.add( ptI, red )
pointCloud.add( ptJ, red )
*/
//const threejsPointsGeometry = loader.parse ( pointCloud.toThreejsJSON() )
//const threejsPoints = new THREE.Points( threejsPointsGeometry, pointsMaterial )
//scene.add( threejsPoints )
const line = new rhino.LineCurve( [0,4,2], [5,0,0] )
//console.log(line.isPolyline())
const line4 = line.duplicate()
line4.translate([0,3,0])
const lineGeometry = new THREE.BufferGeometry()
const lineVertices = new Float32Array( line.line.from.concat( line.line.to ) )
lineGeometry.setAttribute( 'position', new THREE.BufferAttribute( lineVertices, 3 ) )
const lineMaterial = new THREE.LineBasicMaterial( { color: 0x00ff00 } )
const lineObject = new THREE.Line( lineGeometry, lineMaterial )
scene.add( lineObject )
const line2 = new rhino.LineCurve( [-5,4,2], [5,4,0] )
const lineGeometry2 = new THREE.BufferGeometry()
const lineVertices2 = new Float32Array( line2.line.from.concat( line2.line.to ) )
lineGeometry2.setAttribute( 'position', new THREE.BufferAttribute( lineVertices2, 3 ) )
const lineMaterial2 = new THREE.LineBasicMaterial( { color: 0x00ff00 } )
const lineObject2 = new THREE.Line( lineGeometry2, lineMaterial2 )
scene.add( lineObject2 )
const lineGeometry4 = new THREE.BufferGeometry()
const lineVertices4 = new Float32Array( line4.line.from.concat( line4.line.to ) )
lineGeometry4.setAttribute( 'position', new THREE.BufferAttribute( lineVertices4, 3 ) )
const lineMaterial4 = new THREE.LineBasicMaterial( { color: 0x00ff00 } )
const lineObject4 = new THREE.Line( lineGeometry4, lineMaterial4 )
scene.add( lineObject4 )
for (let i = .1; i < 1; i=i+.1) {
var line5 = line4.duplicate()
line5.translate([0,1*i,0])
const lineGeometry5 = new THREE.BufferGeometry()
const lineVertices5 = new Float32Array( line5.line.from.concat( line5.line.to ) )
lineGeometry5.setAttribute( 'position', new THREE.BufferAttribute( lineVertices5, 3 ) )
const lineMaterial5 = new THREE.LineBasicMaterial( { color: 0x00ff00 } )
const lineObject5 = new THREE.Line( lineGeometry5, lineMaterial5 )
scene.add( lineObject5 )
}
//console.log(Math.random())
var points = []
for (let i = 0; i < 5; i++) {
//console.log(i)
//var pt1 = new rhino.Point([5-(Math.random()*10),5-(Math.random()*10),0])
var pt1 = new rhino.Point([Math.random()*2,Math.random()*2,0])
//console.log(pt1.location[0])
points.push(pt1.location)
const geometry = new THREE.BufferGeometry()
const vertices = new Float32Array( pt1.location )
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) )
const pointsMaterial = new THREE.PointsMaterial( { color: 0x00ff00 } )
const threejsPoint = new THREE.Points( geometry, pointsMaterial )
scene.add(threejsPoint)
}
var lines = []
for (let i = 0; i < points.length; i++) {
for (let n = 0; n < points.length; n++) {
if(i!=n){
var dist = Distance(points[i],points[n])
//console.log(dist)
if(dist>1.5){
const line = new rhino.LineCurve(points[i], points[n] )
lines.push(line)
const lineGeometry = new THREE.BufferGeometry()
const lineVertices = new Float32Array( line.line.from.concat( line.line.to ) )
lineGeometry.setAttribute( 'position', new THREE.BufferAttribute( lineVertices, 3 ) )
const lineMaterial = new THREE.LineBasicMaterial( { color: 0x00ff00 } )
const lineObject = new THREE.Line( lineGeometry, lineMaterial )
scene.add( lineObject )
}
}
}
}
const circle = new rhino.Circle( 5 )
const circleGeometry = new THREE.RingGeometry( circle.radius, circle.radius, 32 )
const circleObject = new THREE.Line( circleGeometry, lineMaterial )
circleObject.position.fromArray( circle.center )
scene.add( circleObject )
/*
const mesh = new rhino.Mesh()
mesh.vertices().add( ptA[0], ptA[1], ptA[2] )
mesh.vertices().add( ptB[0], ptB[1], ptB[2] )
mesh.vertices().add( ptC[0], ptC[1], ptC[2] )
mesh.faces().addFace( 0, 1, 2 )
mesh.vertexColors().add( 255, 0, 255 )
mesh.vertexColors().add( 0, 255, 255 )
mesh.vertexColors().add( 255, 255, 255 )
mesh.normals().computeNormals()
const meshGeometry = loader.parse ( mesh.toThreejsJSON() )
const meshMaterial = new THREE.MeshBasicMaterial( { color: 0x00fff0 } );
const threejsMesh = new THREE.Mesh( meshGeometry, meshMaterial )
scene.add( threejsMesh )
*/
//rhino.Curve.LcoalClosestPoint(line, testPoint)
//var length = RhinoCompute.Curve.getLength(line)
//console.log(length)
//line.toJSON()
// Instantiate a loader to import from rhino
//const rhinoloader = new THREE.Rhino3dmLoader();
//const loader888 = new FontLoader();
//const loader6666 = new Rhino3dmLoader();
//const loader5 = new
//var cam = new THREE.Loader
//var rl = new THREE.LoadingManager
//loader6666.setLibraryPath( 'https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/' );
/*
// Load a 3DM file
loader6666.load(
// resource URL
FileAttachment("import.3dm"),
// called when the resource is loaded
function ( object ) {
scene.add( object );
},
// called as loading progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
*/
}
/*
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xf0ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
*/
//renderer.render( scene, camera );
//scene.add(foot)
var animate = function () {
requestAnimationFrame( animate );
//cube.rotation.x += 0.01;
//cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
//camera.position.z = 60;
//renderer.render( scene, camera );
animate();
//yield renderer.domElement;
yield renderer.domElement;
//renderer.render( scene, camera );
}
foot1 = FileAttachment("foot.3dm")
foot = FileAttachment("foot.obj")
import1 = FileAttachment("import.3dm")
obj_url = {
const blob = await FileAttachment("foot.obj").blob();
return URL.createObjectURL(blob);
}
rh_url = {
const blob = await FileAttachment("foot.3dm").blob();
return URL.createObjectURL(blob);
}
/*THREEORR = {
const THREE = window.THREE = require("three@0.107.0/build/three.min.js");
require("three@0.107.0/examples/jsm/controls/OrbitControls.js").catch(() => {});
return THREE;
}*/
oc = import("https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js").catch(() => {})
//https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js
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.