Public
Edited
May 8, 2023
renderer.domElement
// Continuously updates
{
while (true) {
//cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield null;
}
}
height = 600
function createSnowman() {
// geometries
let geometryBody = new THREE.SphereGeometry(50, 32, 32);
let geometryHead = new THREE.SphereGeometry(30, 32, 32);
let geometryEye = new THREE.SphereGeometry(5, 16, 16);
let geometryNose = new THREE.ConeGeometry(10, 30, 8);
let hatGeometry = new THREE.CylinderGeometry(32, 32, 20, 50);
let hatGeometry2 = new THREE.CylinderGeometry(40, 40, 7, 50);
// materials
let materialBody = new THREE.MeshBasicMaterial({ color: 0xffffff });
let materialHead = new THREE.MeshBasicMaterial({ color: 0xffffff });
let materialEye = new THREE.MeshBasicMaterial({ color: 0x000000 });
let materialNose = new THREE.MeshBasicMaterial({ color: 0xff6600 });
let hatMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 });
// meshes
let meshBody = new THREE.Mesh(geometryBody, materialBody);
let meshHead = new THREE.Mesh(geometryHead, materialHead);
let meshEyeLeft = new THREE.Mesh(geometryEye, materialEye);
let meshEyeRight = new THREE.Mesh(geometryEye, materialEye);
let meshNose = new THREE.Mesh(geometryNose, materialNose);
let hatMesh = new THREE.Mesh(hatGeometry, hatMaterial);
let hatMesh2 = new THREE.Mesh(hatGeometry2, hatMaterial);
let button1 = new THREE.Mesh(geometryEye, materialEye);
let button2 = new THREE.Mesh(geometryEye, materialEye);
let button3 = new THREE.Mesh(geometryEye, materialEye);
meshBody.position.set(0, 50, 0);
meshHead.position.set(0, 100, 0);
meshEyeLeft.position.set(-15, 105, 20);
meshEyeRight.position.set(15, 105, 20);
meshNose.position.set(0, 90, 30);
meshNose.rotation.set(Math.PI / 2, 0, 0);
hatMesh.position.set(0, 130, 0);
hatMesh2.position.set(0, 123, 0);
button1.position.set(0, 50, 50);
button2.position.set(0, 30, 45);
button3.position.set(0, 70, 45);
let group = new THREE.Group();
group.add(meshBody);
group.add(meshHead);
group.add(meshEyeLeft);
group.add(meshEyeRight);
group.add(meshNose);
group.add(hatMesh);
group.add(hatMesh2);
group.add(button1);
group.add(button2);
group.add(button3);
return group;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color("blue");
scene.add(createSnowman());
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(2, 2, -2);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
THREE = {
const THREE = (window.THREE =
await require("three@0.130.0/build/three.min.js"));
await require("three@0.130.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.
