renderer.domElement
updatePos()
{
while (true) {
renderer.render(scene, camera);
yield null
}
}
function removeByName(name) {
const toDelete = scene.getObjectByName(name);
if (toDelete) {
scene.remove(toDelete);
}
}
birdMaterial = new THREE.MeshBasicMaterial({side: THREE.DoubleSide, color: "gray" })
birdShader = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
vertexShader: `
varying vec2 vUv;
void main() {
vec3 transformed = vec3( position );
vec4 mvPosition = vec4( transformed, 1.0 );
#ifdef USE_INSTANCING
mvPosition = instanceMatrix * mvPosition;
#endif
//vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
vec4 modelViewPosition = modelViewMatrix * mvPosition;
vUv = uv;
gl_Position = projectionMatrix * modelViewPosition;
}
`,
fragmentShader: `
uniform float u_time;
uniform float test;
varying vec2 vUv;
void main () {
//float hue = abs(sin(u_time));
// gl_FragColor = vec4(0.0,1.0,0.0,1.0); // green
gl_FragColor = vec4(1.0,0.0,0.0,1.0); // red
if (!gl_FrontFacing){
gl_FragColor = vec4(1.0,0.95,0.01,1.0); // yellow
}
}
`,
uniforms: {
u_time: { value: 0 }
}
});
function updatePos(){
for (let i = 0; i < params.maxBirds; ++i) {
dummy.position.set(rand(),rand(),rand());
dummy.updateMatrix();
instanceMesh.setMatrixAt(i, dummy.matrix);
}
instanceMesh.instanceMatrix.needsUpdate = true;
}
function createBirdHalfInstanceMesh(vertices) {
const instanceName = "meshBottom";
removeByName(instanceName);
const sphereGeometry = new THREE.SphereGeometry();
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const mesh = new Troika.InstancedUniformsMesh(geometry, birdShader, params.maxBirds);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
mesh.instanceMatrix.needsUpdate = true;
mesh.frustumCulled = false;
mesh.name = instanceName;
scene.add(mesh);
return mesh;
}
instanceMesh = createBirdHalfInstanceMesh(birdTopVertices)
dummy = new THREE.Object3D();
height = 600
cubeMaterial = new THREE.MeshNormalMaterial();
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x8fbbc9 );
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(22, 10, 10)
return camera;
}
controls = {
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
controls.target = new THREE.Vector3(5,5,5)
controls.update();
invalidation.then(() => (controls.dispose()));
return controls
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
invalidation.then(() => (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.
