A child of God • Trust in «as for me and my family, we will serve the Lord» • Software Developer 💻 • Graphic Designer 😍 • Creative 👌 • Thankful
{
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: '#ff0000' });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const sizes = { width: 200, height: 150 };
const camera = new THREE.PerspectiveCamera(75, sizes.width/ sizes.height);
camera.position.z = 3
scene.add(camera);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.webgl')
})
renderer.setSize(sizes.width, sizes.height);
// Clock
const clock = new THREE.Clock();
// Animations
const tick = () => {
// Clock
const elapsedTime = clock.getElapsedTime();
//console.log(elapsedTime)
//Update objects
camera.position.y = Math.sin(elapsedTime)
camera.position.x = Math.cos(elapsedTime)
camera.lookAt(mesh.position)
// Render
renderer.render(scene, camera);
window.requestAnimationFrame(tick);
};
tick()
}
THREE = require("three@0.147.0/build/three.min.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.
