Update ModelViewer.js

app/Resources/assets/javascripts/ModelViewer.js

@@ -1,109 +1,86 @@
-$(document).ready(function () {
+ModelViewer = function(containerId) {
-    var container;
+    var container = document.getElementById(containerId);
-    var camera, cameraTarget, scene, renderer, controls;
+    var camera, scene, cameraTarget, renderer, controls, object;
-    var stats;
 
-    init();
+    if (document.defaultView && document.defaultView.getComputedStyle) {
-    animate();
+        var width  = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('width'));
-});
+        var height = parseFloat(document.defaultView.getComputedStyle(container,null).getPropertyValue('height'));
-
+    } else {
-function init() {
+        var width  = parseFloat(container.currentStyle.width);
-    container = document.getElementById('model');
+        var height = parseFloat(container.currentStyle.height);
-
+    }
-    modelView = $('#model');
-
-    camera = new THREE.PerspectiveCamera(45, modelView.innerWidth() / modelView.innerHeight(), 0.1, 2000);
-    camera.position.set(4, 1.5, 4);
-    camera.lookAt(new THREE.Vector3(0, -0.7, 0));
-
-    scene = new THREE.Scene();
-    scene.fog = new THREE.Fog(0x72645b, 2, 15);
 
 
-    var loader = new THREE.STLLoader();
+    this.init = function() {
-    loader.load('./resources/30000.stl', function (geometry) {
+        camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
-        var material = new THREE.MeshPhongMaterial({color: 0xaaaaaa, shininess:200,  specular: 0x333333, shading: THREE.FlatShading});
+        camera.position.set(-2, 2, 0.8);
-        var mesh = new THREE.Mesh(geometry, material);
+        camera.lookAt(new THREE.Vector3(0, 3, 0));
-        mesh.position.set(0, 0, 0);
+
-        mesh.rotation.set(Math.PI, 0, 0);
+        scene = new THREE.Scene();
-        mesh.castShadow = true;
+        scene.fog = new THREE.FogExp2(0x000000, 0.1);
-        mesh.receiveShadow = true;
-        scene.add(mesh);
-    });
 
 
-    // Lights
+        var grid = new THREE.GridHelper( 30, 70 );
+        grid.position.set(30/70,-0.5,30/70);
+        scene.add( grid );
 
-    light = new THREE.DirectionalLight( 0xffffff );
+        var loader = new THREE.STLLoader();
-    light.position.set( 1, 1, 1 );
+        loader.load('./resources/3005.stl', function (geometry) {
-    scene.add( light );
+            var material = new THREE.MeshPhongMaterial({color: 0xaaaaaa, shininess:200,  specular: 0x333333, shading: THREE.FlatShading});
 
-    light = new THREE.DirectionalLight( 0x002288 );
+            var mesh = new THREE.Mesh(geometry, material);
-    light.position.set( -1, -1, -1 );
+            mesh.position.set(0, 0.5, 0);
-    scene.add( light );
+            mesh.rotation.set(Math.PI, 0, 0);
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+            scene.add(mesh);
+        });
 
 
-    scene.add( new THREE.AmbientLight( 0xf0f0f0 ));
+        // Lights
-    scene.background = new THREE.Color( 0x000000 );
 
-    // renderer
+        light = new THREE.DirectionalLight( 0xffffff );
-    renderer = new THREE.WebGLRenderer();
+        light.position.set( 1, 1, 1 );
-    renderer.setClearColor( scene.fog.color );
+        scene.add( light );
-    renderer.setPixelRatio( window.devicePixelRatio );
-    renderer.setSize( modelView.innerWidth(), modelView.innerHeight() );
-    renderer.gammaInput = true;
-    renderer.gammaOutput = true;
-    renderer.shadowMap.enabled = true;
-    renderer.shadowMap.renderReverseSided = false;
 
-    container.appendChild(renderer.domElement);
+        light = new THREE.DirectionalLight( 0x002288 );
-
+        light.position.set( -1, -1, -1 );
-    // Stats
+        scene.add( light );
-
-    stats = new Stats();
-    container.appendChild( stats.dom );
-
-    window.addEventListener('resize', onWindowResize, false);
-}
-
-function addShadowedLight(x, y, z, color, intensity) {
-    var directionalLight = new THREE.DirectionalLight(color, intensity);
-    directionalLight.position.set(x, y, z);
-    scene.add(directionalLight);
-    directionalLight.castShadow = true;
-    var d = 1;
-    directionalLight.shadow.camera.left = -d;
-    directionalLight.shadow.camera.right = d;
-    directionalLight.shadow.camera.top = d;
-    directionalLight.shadow.camera.bottom = -d;
-    directionalLight.shadow.camera.near = 1;
-    directionalLight.shadow.camera.far = 4;
-    directionalLight.shadow.mapSize.width = 1024;
-    directionalLight.shadow.mapSize.height = 1024;
-    directionalLight.shadow.bias = -0.005;
-}
-
-function onWindowResize() {
-
-    // camera.aspect = window.innerWidth / window.innerHeight;
-    // camera.updateProjectionMatrix();
-    // renderer.setSize(window.innerWidth, window.innerHeight);
-
-}
-
-function animate() {
-
-    requestAnimationFrame(animate);
-
-    stats.update();
-
-    render();
-
-}
-
-function render() {
 
 
-    renderer.render(scene, camera);
+        scene.add( new THREE.AmbientLight( 0xf0f0f0 ));
+        scene.background = new THREE.Color( 0x000000 );
 
-}
+        // renderer
+        renderer = new THREE.WebGLRenderer();
+        renderer.setClearColor( scene.fog.color );
+        renderer.setPixelRatio( window.devicePixelRatio );
+        renderer.setSize( width, height );
+        renderer.gammaInput = true;
+        renderer.gammaOutput = true;
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.renderReverseSided = false;
+
+        container.appendChild(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.enableDamping = true;
+        controls.dampingFactor = 0.25;
+        controls.enableZoom = true;
+
+    };
+
+    this.animate = function() {
+
+        // requestAnimationFrame(this.animate);
+
+        // controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
+
+        this.render();
+    };
+
+    this.render = function() {
+        renderer.render(scene, camera);
+    };
+};

app/Resources/views/default/index.html.twig

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

gulpfile.js

@@ -22,15 +22,14 @@ gulp.task('three', function() {
         'node_modules/three/build/three.js',
         'node_modules/three/examples/js/libs/stats.min.js',
         'node_modules/three/examples/js/loaders/STLLoader.js',
-        'node_modules/three/examples/js/controls/TrackballControls.js',
     ])
         .pipe(plugins.concat('three.js'))
         .pipe(gulp.dest('web/resources/js'));
 
     gulp.src([
-        'node_modules/three/examples/js/libs/stats.min.js',
+        'node_modules/three/examples/js/controls/OrbitControls.js',
     ])
-        .pipe(plugins.concat('stats.js'))
+        .pipe(plugins.concat('OrbitControls.js'))
         .pipe(gulp.dest('web/resources/js'));
 
     gulp.src([