{
let camera,
renderer,
scene,
controls,
mesh
;
init();
function createCamera() {
// Create a Camera
const fov = 15; // AKA Field of View
const aspect = width / 400;
const near = 0.1; // the near clipping plane
const far = 1000; // the far clipping plane
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set( -14, 4, 10 );
}
function createLights() {
// Create a directional light
const ambientLight = new THREE.HemisphereLight(0xddeeff,0x202020, 9);
const mainLight = new THREE.DirectionalLight(0xffffff, 3.0);
scene.add(ambientLight);
// move the light back and up a bit
mainLight.position.set(10,10,10);
// remember to add the light to the scene
scene.add(ambientLight,mainLight);
}
function createMeshes() {
// create a geometry
const geometry = new THREE.BoxBufferGeometry(2, 2, 2);
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('https://raw.githubusercontent.com/bumbeishvili/Assets/master/Other/junk/02_59_45_460_Earth_Diffuse_t_1%20(2).jpg')
texture.encoding = THREE.sRGBEncoding;
texture.anisotropy = 16;
// create a default (white) Basic material
const material = new THREE.MeshStandardMaterial({
map: texture
});
// create a Mesh containing the geometry and material
mesh = new THREE.Mesh(geometry, material);
// add the mesh to the scene
scene.add(mesh);
}
function createRenderer() {
// create the renderer
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, 400);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
}
function init() {
// create a Scene
scene = new THREE.Scene();
// Set the background color
scene.background = new THREE.Color('#2B1658');
createCamera();
createLights();
createMeshes();
createRenderer();
controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
}
renderer.setAnimationLoop(() => {
update();
render();
})
function render() {
renderer.render(scene, camera);
}
function update() {
//mesh.rotation.z += 0.01;
//mesh.rotation.x += 0.01;
//mesh.rotation.y += 0.01;
}
function onWindowResize() {
camera.aspect = width / 400;;
camera.updateProjectionMatrix();
renderer.setSize(width, 400)
}
window.addEventListener('resize', onWindowResize)
yield renderer.domElement
}
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;
}
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.
