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

Add loadStl ModelViewer function

Browse Source
This commit is contained in:
David Hübner 2017-01-21 21:49:44 +01:00
parent d6810286dc
commit 8f7bda207b
2 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,42 +1,32 @@
ModelViewer = function(containerId) { ModelViewer = function() {
var container = document.getElementById(containerId); var container;
var camera, scene, cameraTarget, renderer, controls, object; var camera, scene, cameraTarget, renderer, controls, object;
var width, height;
this.init = function(containerId) {
container = document.getElementById(containerId);
if (document.defaultView && document.defaultView.getComputedStyle) { if (document.defaultView && document.defaultView.getComputedStyle) {
var width = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('width')); width = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('width'));
var height = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('height')); height = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('height'));
} else { } else {
var width = parseFloat(container.currentStyle.width); width = parseFloat(container.currentStyle.width);
var height = parseFloat(container.currentStyle.height); height = parseFloat(container.currentStyle.height);
} }
this.init = function() {
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);
camera.lookAt(new THREE.Vector3(0, 3, 0)); camera.lookAt(new THREE.Vector3(0, 3, 0));
scene = new THREE.Scene(); scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.1); 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 );
var loader = new THREE.STLLoader();
loader.load('./resources/3005.stl', function (geometry) {
var material = new THREE.MeshPhongMaterial({color: 0xaaaaaa, shininess:200, specular: 0x333333, shading: THREE.FlatShading});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0.5, 0);
mesh.rotation.set(Math.PI, 0, 0);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
});
// Lights // Lights
light = new THREE.DirectionalLight( 0xffffff ); light = new THREE.DirectionalLight( 0xffffff );
@ -65,17 +55,33 @@ ModelViewer = function(containerId) {
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) {
var loader = new THREE.STLLoader();
loader.load(model, function (geometry) {
var material = new THREE.MeshPhongMaterial({color: 0xaaaaaa, shininess:200, specular: 0x333333, shading: THREE.FlatShading});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0.5, 0);
mesh.rotation.set(Math.PI, 0, 0);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
renderer.render(scene, camera);
});
};
this.animate = function() { this.animate = function() {
// requestAnimationFrame(this.animate); requestAnimationFrame( this.animate );
// controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
this.render(); this.render();
}; };

10
app/Resources/views/default/index.html.twig
View File

@ -18,10 +18,10 @@
<script type="text/javascript" src="{{ asset('resources/js/ModelViewer.js') }}"></script> <script type="text/javascript" src="{{ asset('resources/js/ModelViewer.js') }}"></script>
<script type="text/javascript"> <script type="text/javascript">
window.onload = function() { // window.onload = function() {
modelView = new ModelViewer('model'); // modelView = new ModelViewer('model');
modelView.init(); // modelView.init();
modelView.animate(); // modelView.animate();
}; // };
</script> </script>
{% endblock %} {% endblock %}