LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

add customizable material and fix flatShading

Browse source
This commit is contained in:
btzr-io 2018-08-18 20:58:15 -06:00 committed by Sean Yesmunt
parent 1d277bc81f
commit fa0781595d
1 changed files with 47 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/renderer/component/viewers/threeViewer/index.jsx
View file

@ -78,6 +78,22 @@ class ThreeViewer extends React.PureComponent<Props, State> {
group.position.setY(group.position.y + meshY * scaleFactor);
}
/*
See: https://github.com/mrdoob/three.js/blob/dev/docs/scenes/js/material.js#L195
*/
static updateMaterial(material, geometry) {
material.vertexColors = +material.vertexColors; // Ensure number
material.side = +material.side; // Ensure number
material.needsUpdate = true;
// If Geometry needs update
if (geometry) {
geometry.verticesNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
}
}
constructor(props: Props) {
super(props);
const { theme } = this.props;
@ -192,8 +208,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
config.reset = () => {
// Reset material color
config.color = this.materialColor;
// Reset material
this.material.color.set(config.color);
// Reset wireframe
this.material.flatShading = false;
this.material.shininess = 30;
this.material.wireframe = false;
// Reset autoRotate
this.controls.autoRotate = false;
@ -201,8 +219,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
this.restoreCamera();
};
const materialFolder = this.gui.addFolder('Material');
// Color picker
const colorPicker = this.gui
const colorPicker = materialFolder
.addColor(config, 'color')
.name('Color')
.listen();
@ -211,15 +231,33 @@ class ThreeViewer extends React.PureComponent<Props, State> {
this.material.color.set(color);
});
this.gui
materialFolder
.add(this.material, 'shininess', 0, 100)
.name('Shininess')
.listen();
materialFolder
.add(this.material, 'flatShading')
.name('FlatShading')
.onChange(() => {
ThreeViewer.updateMaterial(this.material);
})
.listen();
materialFolder
.add(this.material, 'wireframe')
.name('Wireframe')
.listen();
this.gui
const sceneFolder = this.gui.addFolder('Scene');
sceneFolder
.add(this.controls, 'autoRotate')
.name('Auto-Rotate')
.listen();
this.gui.add(config, 'reset').name('Reset');
sceneFolder.add(config, 'reset').name('Reset');
this.guiContainer.current.appendChild(this.gui.domElement);
}
}
@ -227,13 +265,13 @@ class ThreeViewer extends React.PureComponent<Props, State> {
createGeometry(data) {
this.bufferGeometry = data;
this.bufferGeometry.computeBoundingBox();
this.bufferGeometry.computeVertexNormals();
this.bufferGeometry.center();
this.bufferGeometry.rotateX(-Math.PI / 2);
this.bufferGeometry.lookAt(new THREE.Vector3(0, 0, 1));
// Get geometry from bufferGeometry
this.geometry = new THREE.Geometry().fromBufferGeometry(this.bufferGeometry);
this.geometry.mergeVertices();
this.geometry.computeVertexNormals();
}
startLoader() {
@ -300,6 +338,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
// Get geometry from child
const geometry = new THREE.Geometry();
geometry.fromBufferGeometry(child.geometry);
geometry.mergeVertices();
geometry.computeVertexNormals();
// Create and regroup inner objects
const innerObj = new THREE.Mesh(geometry, this.material);
this.mesh.add(innerObj);
@ -357,6 +397,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
// Create model material
this.material = new THREE.MeshPhongMaterial({
depthWrite: true,
flatShading: false,
vertexColors: THREE.FaceColors,
});