md`# Three JS Geometry`
x=1+3+4
html`<span style="background:pink;">
My name is wrt.
</span>`
slider = html`<input type=range>`
html`<span style="background:red;">
This is the slider I added to control the speed of the object.
</span>`
sliderValue = Generators.input(slider)
{
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
// const controls = new THREE.OrbitControls(camera, renderer.domElement);
// invalidation.then(() => (controls.dispose(), renderer.dispose()));
// controls.addEventListener("change", () => renderer.render(scene, camera));
while (true) {
for(let geo of geos){
geo.rotation.x += sliderValue ;
geo.rotation.y += sliderValue ;
}
renderer.render(scene, camera);
yield renderer.domElement;
}
}
geoCamIndex
height = 600
normalMaterial = new THREE.MeshNormalMaterial();
icosahedron = {
const geometry = new THREE.IcosahedronGeometry(2, 0);//Changing this value can change the number of edges of the object
return new THREE.Mesh(geometry, normalMaterial);
}
dodecahedron = {
const geometry = new THREE.IcosahedronGeometry(1, 2);
return new THREE.Mesh(geometry, normalMaterial);
}
geos = [cube, icosahedron, dodecahedron]
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x3f3f3f);
for(let geo of geos){
scene.add(geo);
geo.position.x = 3 * geos.indexOf(geo);
}
return scene;
}
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 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.
