v/PrintABrick
1
0
Fork 0
mirror of https://github.com/ToxicCrack/PrintABrick.git synced 2025-05-20 22:20:08 -07:00
Code Issues Projects Releases Wiki Activity

Fix part detail template

Browse Source
This commit is contained in:
David Hübner 2017-03-10 23:54:10 +01:00
parent b4ba2dc85b
commit a02de20c9a
2 changed files with 10 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/Resources/assets/javascripts/ModelViewer.js
View File

@ -1,19 +1,11 @@
ModelViewer = function() { ModelViewer = function() {
var container; var container;
var camera, scene, cameraTarget, renderer, controls, object; var camera, cameraTarget, scene, renderer, controls, object;
var width, height; var width, height;
this.init = function(containerId) { this.initScene = function($container) {
container = document.getElementById(containerId); width = parseFloat($container.width());
height = parseFloat($container.height());
if (document.defaultView && document.defaultView.getComputedStyle) {
width = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('width'));
height = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('height'));
} else {
width = parseFloat(container.currentStyle.width);
height = parseFloat(container.currentStyle.height);
}
camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000); camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
camera.position.set(-2, 2, 0.8); camera.position.set(-2, 2, 0.8);
@ -22,7 +14,6 @@ ModelViewer = function() {
scene = new THREE.Scene(); scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.001); scene.fog = new THREE.FogExp2(0x000000, 0.001);
var grid = new THREE.GridHelper( 30, 70 ); var grid = new THREE.GridHelper( 30, 70 );
grid.position.set(30/70,-0.5,30/70); grid.position.set(30/70,-0.5,30/70);
scene.add( grid ); scene.add( grid );
@ -51,14 +42,13 @@ ModelViewer = function() {
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.renderReverseSided = false; renderer.shadowMap.renderReverseSided = false;
container.appendChild(renderer.domElement); $container.append(renderer.domElement);
controls = new THREE.OrbitControls( camera, renderer.domElement ); controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', this.render ); // add this only if there is no animation loop (requestAnimationFrame) controls.addEventListener( 'change', this.render ); // add this only if there is no animation loop (requestAnimationFrame)
// controls.enableDamping = true; // controls.enableDamping = true;
// controls.dampingFactor = 0.25; // controls.dampingFactor = 0.25;
controls.enableZoom = true; controls.enableZoom = true;
}; };
this.loadStl = function(model) { this.loadStl = function(model) {
@ -80,13 +70,12 @@ ModelViewer = function() {
this.animate = function() { this.animate = function() {
requestAnimationFrame( this.animate ); requestAnimationFrame( this.animate );
controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
this.render(); this.render();
}; };
this.render = function() { this.render = function() {
renderer.render(scene, camera); renderer.render(scene, camera);
}; };
}; };

9
app/Resources/views/part/detail.html.twig
View File

@ -4,10 +4,7 @@
{{ dump(part) }} {{ dump(part) }}
{{ dump(localPart) }}
<div id="model" style="height: 300px; width: 300px; padding: 5px; display: inline-block"></div> <div id="model" style="height: 300px; width: 300px; padding: 5px; display: inline-block"></div>
<img src="{{ part.imgUrl }}">
{% endblock %} {% endblock %}
@ -23,9 +20,9 @@
<script type="text/javascript"> <script type="text/javascript">
window.onload = function() { window.onload = function() {
modelView = new ModelViewer(); modelView = new ModelViewer();
modelView.init('model'); var scene = modelView.initScene($('#model'));
{% if localPart.model is defined %} {% if part.model is not null %}
modelView.loadStl('{{ path('download_model', {'id' : localPart.model.id })}}'); modelView.loadStl('{{ path('download_model', {'id' : part.model.id })}}');
{% endif %} {% endif %}
modelView.render(); modelView.render();
}; };