Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (85 sloc) 2.6 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Embedding.js Iris example</title>
<style>
/* Ensures that the canvas fills the entire window, and that there are no scrollbars */
body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
margin: 0px;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/embedding.js"></script>
<script>
const { scene, camera, manager, effect, cameraControls } = EMBED.initScene({ room: true });
var dataset, embedding;
var THREE = EMBED.THREE;
lightPositions = [
[ 2, 10, 2],
[-2, 10, 0],
[ 0, 10, 2]
];
lightPositions.forEach((p) => {
let light = new THREE.PointLight(0xffffff, 1.0);
light.position.set(p[0], p[1], p[2]);
scene.add(light);
scene.add(new THREE.PointLightHelper(light, 0.1));
})
// An Iris Object3D that contains a separate mesh for every petal and sepal (3 of each),
// scaled according to the data
class Iris extends THREE.Group {
constructor(dp) {
super();
let petalMat = new THREE.MeshStandardMaterial({
color: 0xebbbf7,
emissive: 0x666666
})
let sepalMat = new THREE.MeshStandardMaterial({
color: 0xf3abfc
})
for (let i = 0; i < 3; i++) {
let petalGeo = new THREE.TetrahedronGeometry(0.02);
let petalMesh = new THREE.Mesh(petalGeo, petalMat);
petalMesh.scale.set(dp.get('petal_length'), dp.get('petal_width'), 0.2);
petalMesh.rotation.z = i * 2/3 * Math.PI;
this.add(petalMesh);
let sepalGeo = new THREE.TetrahedronGeometry(0.02);
let sepalMesh = new THREE.Mesh(sepalGeo, sepalMat);
sepalMesh.scale.set(dp.get('sepal_length'), dp.get('sepal_width'), 0.4)
sepalMesh.rotation.z = i * 2/3 * Math.PI + Math.PI / 6;
this.add(sepalMesh);
}
}
}
EMBED.Dataset.createFromCSV('data/iris.csv',
function(dataset) {
embedding = new EMBED.MeshEmbedding(scene, dataset,
{
mapping: {
x: (dp) => dp.get('petal_length') / 2,
y: (dp) => dp.get('petal_width'),
z: (dp) => dp.get('sepal_length') - 2
},
object3d: (dp) => new Iris(dp),
rotation: { y: .85 * Math.PI },
position: { z: 2 }
});
EMBED.register(embedding);
EMBED.startAnimation();
}
);
</script>
</body>
</html>