Add 3D-file-viewer component #1558

Merged
btzr-io merged 8 commits from three-viewer into master 2018-07-19 16:17:06 +02:00
Showing only changes of commit 87ffac9a52 - Show all commits

View file

@ -50,6 +50,7 @@ class ThreeViewer extends React.PureComponent<Props> {
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
},
};
// Select current theme
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
const { theme } = this.props;
this.theme = this.themes[theme] || this.themes.light;
}
@ -102,9 +103,13 @@ class ThreeViewer extends React.PureComponent<Props> {
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
material.color.set(this.materialColors.green);
const mesh = new THREE.Mesh(geometry, material);
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
// Assign name
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
mesh.name = 'objectGroup';
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
this.scene.add(mesh);
this.fitMeshToCamera(mesh);
this.createWireFrame(mesh);
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
this.setControlsTarget(mesh.position);
return mesh;
}
@ -112,7 +117,6 @@ class ThreeViewer extends React.PureComponent<Props> {
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
toggleWireFrame(show = false) {
this.wireframe.opacity = show ? 1 : 0;
this.mesh.material.opacity = show ? 0 : 1;
//this.mesh.material.shading(THREE.FlatShading);
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
}
fitMeshToCamera(group) {
@ -142,7 +146,6 @@ class ThreeViewer extends React.PureComponent<Props> {
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
group.position.y = meshY / 2 * scaleFactor;
group.position.multiplyScalar(-1);
group.position.y += meshY * scaleFactor;
this.createWireFrame(group);
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
}
setControlsTarget(point) {
@ -168,7 +171,6 @@ class ThreeViewer extends React.PureComponent<Props> {
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
handleReady() {
// Handle load ready
this.setState({ isReady: true, isLoading: false });
this.toggleWireFrame();
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
}
handleResize = () => {
@ -184,7 +186,8 @@ class ThreeViewer extends React.PureComponent<Props> {
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
}
handleProgress(url, currentItem, totalItems) {
/// Handle progress
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
// Handle progress
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
// TODO: Show progressbar...
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
}
handleColorChange(color) {
@ -242,6 +245,7 @@ class ThreeViewer extends React.PureComponent<Props> {
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
window.addEventListener('resize', this.handleResize, false);
} else {
// No webgl support, handle Error...
// TODO: Use a better error message
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
this.state({ error: 'No webgl support!' });
}
}

neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.
neb-b commented 2018-07-16 16:11:18 +02:00 (Migrated from github.com)
Review

You shouldn't need to bind this in these functions. handleStart (and the others) uses the same this reference

You shouldn't need to bind `this` in these functions. `handleStart` (and the others) uses the same `this` reference
neb-b commented 2018-07-16 16:18:25 +02:00 (Migrated from github.com)
Review

I think we will hold off on the progress bar for now, we have a progress percentage below the file.

I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.

I think we will hold off on the progress bar for now, we have a progress percentage below the file. I am going to add analytics for start to stream time, that will give us an idea of average time spent looking at the loading screen. If it's decently high I think we can add it.