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, 5, 5, 5);
const material = new THREE.MeshBasicMaterial({ color: '#ff0000' });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const sizes = { width: 800, height: 600 };
const camera = new THREE.PerspectiveCamera(75, sizes.width/ sizes.height, 1, 1000);
camera.position.x = 2
camera.position.y = 2
camera.position.z = 2
camera.lookAt(mesh.position)
scene.add(camera);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.webgl_perspective')
})
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
mesh.rotation.y = elapsedTime
// Render
renderer.render(scene, camera);
window.requestAnimationFrame(tick);
};
tick()
}
{
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1, 1, 1, 5, 5, 5);
const material = new THREE.MeshBasicMaterial({ color: "#ff0000" });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const sizes = { width: 800, height: 600 };
//const camera = new THREE.PerspectiveCamera(75, sizes.width/ sizes.height, 1, 1000);
const aspectRatio = sizes.width / sizes.height;
const camera = new THREE.OrthographicCamera(
-1 * aspectRatio,
1 * aspectRatio,
1,
-1,
0.1,
100
);
camera.position.x = 2;
camera.position.y = 2;
camera.position.z = 2;
camera.lookAt(mesh.position);
scene.add(camera);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector(".webgl_orthographic")
});
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
mesh.rotation.y = elapsedTime;
// Render
renderer.render(scene, camera);
window.requestAnimationFrame(tick);
};
tick();
}
sizes = ({ width: 800, height: 600 })
cursor = ({
x: 0,
y: 0
})
window.addEventListener('mousemove', (event) => {
cursor.x = event.clientX / sizes.width - 0.5
cursor.y = - (event.clientY / sizes.height - 0.5 - 5.8) // -5.5 is a hack because of the last canvas position.
})
{
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1, 1, 1, 5, 5, 5);
const material = new THREE.MeshBasicMaterial({ color: '#ff0000' });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const camera = new THREE.PerspectiveCamera(75, sizes.width/ sizes.height, 1, 1000);
camera.position.z = 3
scene.add(camera);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.webgl_perspective2')
})
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true
// controls.update()
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
//mesh.rotation.y = elapsedTime
//Update camera
// camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 2
// camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 2
// camera.position.y = cursor.y * 10
// camera.lookAt(mesh.position)
// Update controls
controls.update()
// Render
renderer.render(scene, camera);
window.requestAnimationFrame(tick);
};
tick()
}
THREE = {
const THREE = window.THREE = await require("three@0.147.0/build/three.min.js");
await require("three@0.147.0/examples/js/controls/OrbitControls.js").catch(() => {});
return 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.
