renderer.domElement
{
const wave2 = new THREE.Object3D();
wave2.copy(wave);
wave2.position.z = -50;
scene.add(wave2);
}
wave = {
const loader = new THREE.SVGLoader();
const envMapUrl = await FileAttachment("ocean-1-4K@1.jpg").url();
return new Promise((resolve) =>
loader.load(chartSVGLoader, function (data) {
const paths = data.paths;
const group = new THREE.Group();
for (let i = 0; i < paths.length; i++) {
const path = paths[i];
const loader = new THREE.TextureLoader();
const oceanEnvMap = loader.load(envMapUrl, (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping;
texture.encoding = THREE.sRGBEncoding;
});
const material = new THREE.MeshPhysicalMaterial({
color: 0xffffff,
metalness: 1,
roughness: 0.2,
transparent: true,
opacity: 0.8,
envMap: oceanEnvMap
});
const extrudeSettings = {
steps: 2,
depth: 32,
bevelEnabled: true,
bevelThickness: 5,
bevelSize: 10,
bevelOffset: 0,
bevelSegments: 3
};
const shapes = THREE.SVGLoader.createShapes(path);
for (let j = 0; j < shapes.length; j++) {
const shape = shapes[j];
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
}
group.scale.set(0.1, 0.1, 0.1);
}
// clear scene
for (var i = scene.children.length - 1; i >= 0; i--) {
const obj = scene.children[i];
scene.remove(obj);
}
scene.add(group);
resolve(group);
})
);
}
height = 600
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
return cube;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xbee1e8);
{
const ambientLight = new THREE.AmbientLight(0xcccccc);
scene.add(ambientLight);
const light1 = new THREE.PointLight(0xffffff, 1, 0);
light1.position.set(0, 200, 0);
scene.add(light1);
const light2 = new THREE.PointLight(0xffffff, 1, 0);
light2.position.set(100, 200, 100);
scene.add(light2);
const light3 = new THREE.PointLight(0xffffff, 1, 0);
light3.position.set(-100, -200, -100);
scene.add(light3);
}
// scene.add(cube);
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 5000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 120);
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;
}
// Continuously updates
{
while (true) {
// cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield null;
}
}
pmremGenerator = {
const pmremGenerator = new THREE.PMREMGenerator(renderer);
return pmremGenerator;
}
helvetiker_regularTypeface = FileAttachment(
"helvetiker_regular.typeface.json"
).url()
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(
() => {}
);
await require("three@0.130.0/examples/js/loaders/SVGLoader.js").catch(
() => {}
);
await require("three@0.130.0/examples/js/environments/RoomEnvironment.js").catch(
() => {}
);
// await require("three@0.153.0/examples/js/loaders/FontLoader.js").catch(
// () => {}
// );
// await require("three@0.153.0/examples/js/geometries/TextGeometry.js").catch(
// () => {}
// );
return THREE;
}
{
function gradTexture(color) {
var c = document.createElement("canvas");
var ct = c.getContext("2d");
var size = 1024;
c.width = 16;
c.height = size;
var gradient = ct.createLinearGradient(0, 0, 0, size);
var i = color[0].length;
while (i--) {
gradient.addColorStop(color[0][i], color[1][i]);
}
ct.fillStyle = gradient;
ct.fillRect(0, 0, 16, size);
var texture = new THREE.Texture(c);
texture.needsUpdate = true;
return texture;
}
var buffgeoBack = new THREE.IcosahedronGeometry(3000, 2);
var back = new THREE.Mesh(
buffgeoBack,
new THREE.MeshBasicMaterial({
map: gradTexture([
[0.75, 0.6, 0.4, 0.25],
["#1B1D1E", "#3D4143", "#72797D", "#b0babf"]
]),
side: THREE.BackSide,
depthWrite: false,
fog: false
})
);
// scene.add(back);
}
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.
