In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
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)
});
controls.minDistance = 0.1 //near
controls.maxDistance = 5
renderer.render(scene, camera);
return renderer.domElement;
}
renderer = new THREE.WebGLRenderer({antialias: true});
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;
}
camera.rotateX
obj_url = {
const blob = await FileAttachment("RangiririPaAucklandSketchfab.obj").blob();
return URL.createObjectURL(blob);
}
mtl = new Promise ((resolve,reject) => {
// instantiate a loader
var loader = new THREE.MTLLoader();
loader.load( // load a resource
mtl_url, // resource URL
function ( object ) { // called when resource is loaded to update colour url to file attached jpg
object.materialsInfo.RangiririPaAucklandSketchfab.map_kd = mtl_pic // change the file name / pointer
// Finally, resolve the promise
resolve(object);
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% mtl loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened in mtl load' );
reject ("Error")
}
);
})
material = {
// return new THREE.MeshNormalMaterial()
// return new THREE.MeshPhongMaterial({color:"#FFFFFF", side: THREE.DoubleSide})
return new THREE.MeshStandardMaterial ({color:"#FFFFFF", side: THREE.DoubleSide})
// it's double sided but doesn't show underside
}
lights = {
let group = new THREE.Group(); // NOT CURRENTLY using the group
let hlight = new THREE.HemisphereLight(0xffffbb, 0xffffbb ,1); // 0x080820
// 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
drawloop = {
function render(tp) {
tp=tp*0.0001%1 // was for rotating it
// model.rotation.x = tp;
// xyz[0] = [camera.position.x,camera.position.y,camera.position.z]
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.
