Public
Edited
Feb 21, 2023
1 fork
//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
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
