Published
Edited
May 11, 2022
Importers
myCanvas ={
//const renderer = new THREE.WebGLRenderer({antialias: true}); // made it global
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
invalidation.then(() => (controls.dispose(), renderer.dispose())); // omg it broke
controls.addEventListener("change", () =>{ // rendering function
renderer.render(scene, camera)
});
renderer.render(scene, camera);
return renderer.domElement;
}
renderer = new THREE.WebGLRenderer({antialias: true});
html`<strong>myCanvas.width ${myCanvas.width}<br>myCanvas.height ${myCanvas.height} </strong> `
// this cell is blocked from selection as it's updating all the time.
html`<strong>position of camera x ${xyz[0]}, ${xyz[1]},${xyz[2]}</strong> slider ${slide}`
// model.position.z = slide
viewof slide = html`<input type="range" min=-.50 max=0.58 step=0.005>`
xyz = [0,0,0]
camera = {
// Obtain object dimensions and position
let center = new THREE.Vector3 ();
let size = new THREE.Vector3();
let modelbox = new THREE.Box3().setFromObject (model);
modelbox.getCenter(center);
modelbox.getSize(size);
// let radius = size.length()/2; // 0.277
let radius = 0.01; // this lets me get closer but might not be the best way to do it as it affects not only near but far
// Camera parameters
const fov = 45; // could be 75
const aspect = width / height;
const near = radius/2; // 0.01/2
const far = 1000*radius;
console.log('radius ',radius, ' near ', near, ' far ',far)
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// move the model to the origin
model.position.set(-center.x,-center.y,-center.z)
// model.rotate
// Set the camera away from the the objec
//camera.position.set(0,0,radius*3);
// camera.position.set(0,0,0.75);
camera.position.set(-4.020385529763744e-9, 0.580335703124709, 5.803475731032992e-7);
return camera;
}
obj_url = {
const blob = await FileAttachment("RangiririPaAucklandSketchfab.obj").blob();
return URL.createObjectURL(blob);
}
md`** convert the attached jpg file into a url for it's colour data** `
material = {
return new THREE.MeshNormalMaterial();
//return new THREE.MeshStandardMaterial ({color:"#FFFFFF", side: THREE.DoubleSide})
}
md`** need to work out better lighting as i only have one **`
lights = {
let group = new THREE.Group();
let hlight = new THREE.HemisphereLight(0xffffbb, 0x080820,1);
// let dlight = new THREE.DirectionalLight( 0xffffff );
// dlight.position.set( 1, 1, 1 ).normalize();
// let dlight2 = new THREE.DirectionalLight( 0xffffff );
// dlight2.position.set( -1, -1, -1 ).normalize();
// group.add( hlight, dlight, dlight2 );
group.add( hlight );
return group;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333); // dark background
scene.add(model); // put pa in scene
scene.add(lights);
return scene;
}
tp = 0
md`** below is the render loop **`
drawloop = {
function render(tp) {
tp=tp*0.0001%1
// xyz[0] = [camera.position.x,camera.position.y,camera.position.z]
// model.rotation.x = tp;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
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.
