The avatar for @masonproco
masonproco
Student at UCF Major: Computer Science Clubs: Robotics Hobbies: Blender
Public
Edited
Feb 28, 2024
Insert cell
Insert cell
Insert cell
{
let scene,
height = 400;

// create a Scene
scene = new THREE.Scene();

// Set the background color
scene.background = new THREE.Color('#000000');

scene.add(mainLight, ambientLight);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.3;
controls.enableRotate = true;
controls.zoomSpeed = 0.1;
controls.target.set(318166.105, 5813182.322, -987.067);

load(
"cloud.js",
"https://rawcdn.githack.com/masonproco/melbournePotree/f1a32efa243bd3c7a61f975e3c1155078ecf73d5/pointcloud/"
);

invalidation.then(() => {
console.log('invalidated');
renderer.setAnimationLoop(null);
controls.dispose();
renderer.dispose();
});


renderer.setAnimationLoop(() => {
//update(mutable i++);
update();
render(scene);
controls.update();
});

yield renderer.domElement;

function update() {
// This is where most of the potree magic happens. It updates the visiblily of the octree nodes
// based on the camera frustum and it triggers any loads/unloads which are necessary to keep the
// number of visible points in check.
potree.updatePointClouds(pointClouds, camera, renderer);
potree._pointBudget = getBudget();
// Render your scene as normal
renderer.clear();
renderer.render(scene, camera);
}

function load(cloud, baseUrl) {
return potree
.loadPointCloud(cloud, relativeUrl => `${baseUrl}${relativeUrl}`)
.then(pco => {
pointClouds.push(pco);
scene.add(pco);

pco.material.size = 1.0;
});
}
}
Insert cell
mutable i = 1
Insert cell
Insert cell
Insert cell
Insert cell
function render(scene) {
renderer.render(scene, camera);
}
Insert cell
renderer = {
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
return renderer;
}
Insert cell
Insert cell
cubeGroup = {
const group = new THREE.Group();
group.add(cubeMesh);
return group;
}
Insert cell
Insert cell
cubeMesh = {
const cubeMesh = new THREE.Mesh( cubeGeometry, cubeMaterial );
return cubeMesh;
}
Insert cell
Insert cell
cubeMaterial ={
const cube = new THREE.MeshStandardMaterial({
color: '#F8CE3B',
flatShading: true
});
cube.color.convertSRGBToLinear();
return cube;
}
Insert cell
Insert cell
cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
Insert cell
Insert cell
mainLight = {
const light = new THREE.DirectionalLight(0xffffff, 3.0);
light.position.set(10, 10, 10);
return light;
}
Insert cell
ambientLight = {
const light = new THREE.HemisphereLight(0xddeeff, 0x202020, 9);
return light;
}
Insert cell
Insert cell
height = 400
Insert cell
Insert cell
fov = 60
Insert cell
aspect = 1
Insert cell
near = 0.1
Insert cell
far = 100000000
Insert cell
camera = {
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(316526.678, 5813229.624, 4323.195);
return camera;
}
Insert cell
Insert cell
THREE = {
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
return window.THREE;
}
Insert cell
potree = new potree_loader.Potree()
Insert cell
pointClouds = []
Insert cell
potree_loader = require('https://bundle.run/@pix4d/three-potree-loader@0.0.8')
Insert cell
import {slider, radio, color} from "@jashkenas/inputs"
Insert cell

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.
Learn more