1
0
mirror of https://github.com/ToxicCrack/PrintABrick.git synced 2025-05-17 04:40:08 -07:00

Make ModelViewer resizable

This commit is contained in:
David Hübner 2017-04-13 18:59:23 +02:00
parent aed7bbfc1f
commit 5f757f9756
2 changed files with 10 additions and 11 deletions

View File

@ -26,9 +26,9 @@ var ModelViewer = function($dom_element, model_url) {
this.initScene(); this.initScene();
this.stats = new Stats(); // this.stats = new Stats();
this.stats.dom.style.position = 'absolute'; // this.stats.dom.style.position = 'absolute';
this.container.append(this.stats.dom); // this.container.append(this.stats.dom);
function renderLoop() { function renderLoop() {
@ -44,8 +44,11 @@ var ModelViewer = function($dom_element, model_url) {
} }
$this.render(); $this.render();
} }
$this.resize(parseInt($this.dom_element.width()), parseInt($this.dom_element.height()));
} }
renderLoop(); renderLoop();
}; };
@ -73,8 +76,8 @@ ModelViewer.prototype.initHtml = function () {
ModelViewer.prototype.initCamera = function () { ModelViewer.prototype.initCamera = function () {
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, .1, 300); this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, .1, 300);
this.camera.position.z = 35; this.camera.position.z = 80;
this.camera.position.y = -35; this.camera.position.y = -45;
this.camera.position.x = 35; this.camera.position.x = 35;
this.camera.up = new THREE.Vector3(0, 0, 1); this.camera.up = new THREE.Vector3(0, 0, 1);
}; };
@ -112,9 +115,6 @@ ModelViewer.prototype.initScene = function() {
this.container.append(this.renderer.domElement); this.container.append(this.renderer.domElement);
// this.renderer.shadowMap.enabled = true;
// this.renderer.shadowMap.renderReverseSided = false;
this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement ); this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
this.controls.enableZoom = true; this.controls.enableZoom = true;
}; };
@ -208,7 +208,7 @@ ModelViewer.prototype.centerCamera = function(mesh) {
var distanceZ = (geometry.boundingBox.max.z - geometry.boundingBox.min.z) / 2 / Math.tan(this.camera.fov * Math.PI / 360); var distanceZ = (geometry.boundingBox.max.z - geometry.boundingBox.min.z) / 2 / Math.tan(this.camera.fov * Math.PI / 360);
var maxDistance = Math.max(Math.max(distanceX, distanceY), distanceZ); var maxDistance = Math.max(Math.max(distanceX, distanceY), distanceZ);
maxDistance *= 1.6 * this.scale; maxDistance *= 1.9 * this.scale;
var cameraPosition = this.camera.position.normalize().multiplyScalar(maxDistance); var cameraPosition = this.camera.position.normalize().multiplyScalar(maxDistance);

View File

@ -1,6 +1,5 @@
.model-container { .model-container {
width:700px; width: 100%;
height: 525px;
position: relative; position: relative;
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;