The avatar for @christophe-yamahata
Christophe Yamahata
Public
3D (three.js, Sketchfab)
Edited
Feb 18
Paused
Fork of Embedding 3D models using three.js
1 star
13
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
while (true) {
renderer.render(scene, camera);
yield null;
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
disabled_B= animation_loop || position == "A" ? "disabled":""
Insert cell
viewof BKG_color = Inputs.color({label: "Background color", value: "#555b62"})
Insert cell
viewof Use_BKG_image = Inputs.toggle({label: "Use a texture background", value: true})
Insert cell
viewof Metalness = Inputs.range([0, 1], {value: 0.6, step: 0.1, label: "Material metalness"})
Insert cell
viewof Roughness = Inputs.range([0, 1], {value: 0.9, step: 0.05, label: "Material roughness"})
Insert cell
viewof Environment_intensity = Inputs.range([0, 1], {value: 0.5, step: 0.1, label: "Environment intensity"})
Insert cell
viewof Model_color = Inputs.color({label: "Wireframe color / uniform color", value: "#b9cdd4"})
Insert cell
viewof Wireframe = Inputs.toggle({label: "3D model as wireframe", value: false})
Insert cell
viewof DisplayCubes = Inputs.toggle({label: htl.html`Display cubes <br/>in <b>A</b> and <b>B</b>`, value: true})
Insert cell
viewof UniformColor = Inputs.toggle({label: "Uniform color", value: false})
Insert cell
viewof Grid_color = Inputs.color({label: "Grid color", value: "#d53040"})
Insert cell
viewof opacity = Inputs.range([0, 1], {value: 0.6, step: 0.1, label: "Grid opacity"})
Insert cell
viewof Display_grid = Inputs.toggle({label: "Grid display", value: true})
Insert cell
viewof n = Inputs.radio(new Map([["Very sow", 1000], ["Slow", 500], ["Medium", 200], ["Fast", 100], ["Very fast", 40]]), {value: 100, label: "Animation speed:"})
Insert cell
viewof animation_loop = Inputs.toggle({label: htl.html`Looped animation? <i>(uncheck to modify values for <b>A</b> and <b>B</b>)</i>`, value: true})
Insert cell
viewof position = Inputs.radio(["A", "B"], {label: "Active position:", value: "A"})
Insert cell
viewof theta_1_A = Inputs.range([-165, 165], {value: -50, step: 5, label: htl.html`Rotation θ<sub>1</sub>`})
Insert cell
viewof theta_1_B = Inputs.range([-165, 165], {value: 35, step: 5, label: htl.html`Rotation θ<sub>1</sub>`})
Insert cell
viewof theta_2_A = Inputs.range([-110, 110], {value: 60, step: 5, label: htl.html`Rotation θ<sub>2</sub>`})
Insert cell
viewof theta_2_B = Inputs.range([-110, 110], {value: 35, step: 5, label: htl.html`Rotation θ<sub>2</sub>`})
Insert cell
viewof theta_3_A = Inputs.range([-110, 70], {value: -15, step: 5, label: htl.html`Rotation θ<sub>3</sub>`})
Insert cell
viewof theta_3_B = Inputs.range([-110, 70], {value: 5, step: 5, label: htl.html`Rotation θ<sub>3</sub>`})
Insert cell
viewof theta_4_A = Inputs.range([-160, 160], {value: 0, step: 5, label: htl.html`Rotation θ<sub>4</sub>`})
Insert cell
viewof theta_4_B = Inputs.range([-160, 160], {value: -55, step: 5, label: htl.html`Rotation θ<sub>4</sub>`})
Insert cell
viewof theta_5_A = Inputs.range([-120, 120], {value: 45, step: 5, label: htl.html`Rotation θ<sub>5</sub>`})
Insert cell
viewof theta_5_B = Inputs.range([-120, 120], {value: 80, step: 5, label: htl.html`Rotation θ<sub>5</sub>`})
Insert cell
viewof theta_6_A = Inputs.range([-400, 400], {value: 50, step: 5, label: htl.html`Rotation θ<sub>6</sub>`})
Insert cell
viewof theta_6_B = Inputs.range([-400, 400], {value: 200, step: 5, label: htl.html`Rotation θ<sub>6</sub>`})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more