source: main/branches/3D/openPLM/document3D/templates/Display3D.htm @ 597

Revision 597, 15.1 KB checked in by agalech, 9 years ago (diff)

branch 3D: 3D view: make it possible to show/hide each shape of a stp file

Line 
1{% extends "MiddleDisplayObject.htm" %}
2{% load i18n %}
3{% load comments %}
4
5{% block css %}
6
7{% endblock %}
8
9{% block content %}
10
11<style>
12
13.ajustar {
14clear: both;
15}
16.menu {
17        margin: 10px;
18        height: 100px;
19        font-size: 9pt;
20        font-family: roman;
21}
22.menu ul {
23
24        margin: 0pt;
25        padding: 0pt;
26        position: relative;
27        z-index: 500;
28        list-style-type: none;
29        width: 11em;
30
31}
32.menu li {
33
34        background-color: #cccc99;
35        float: left;
36}
37.menu li.sub {
38        background-color: #cccc99;
39}
40
41.menu a, .menu a:visited {
42        border: 1px solid #ffffff;
43        overflow: hidden;
44        text-overflow: ellipsis;
45        display: block;
46        text-decoration: none;
47        height: 2em;
48        line-height: 2em;
49        width: 11em;
50        color: #000000;
51        padding-left: 1em;
52        font-weight: normal;
53        font-style: normal;
54        font-variant: normal;
55        text-transform: none;
56}
57.menu b {
58        float: right;
59        margin-right: 5px;
60}
61* html .menu a, * html .menu a:visited {
62        width: 11em;
63}
64* html .menu a:hover {
65        color: #ccff66;
66        background-color: #999966;
67        position: relative;
68        font-weight: normal;
69        font-style: normal;
70        font-variant: normal;
71        text-decoration: none;
72        text-transform: none;
73}
74.menu li:hover {
75        position: relative;
76}
77.menu a:active, .menu a:focus {
78        color: #ccff66;
79        background-color: #999966;
80        font-weight: normal;
81        font-style: normal;
82        font-variant: normal;
83        text-decoration: none;
84        text-transform: none;
85}
86.menu li:hover > a {
87        color: #ccff66;
88        background-color: #999966;
89        font-weight: normal;
90        font-style: normal;
91        font-variant: normal;
92        text-decoration: none;
93        text-transform: none;
94}
95.menu li ul {
96        padding: 2em;
97        visibility: hidden;
98        position: absolute;
99        top: -2em;
100        left: 7em;
101        background-color: transparent;
102}
103.menu li:hover > ul {
104        visibility: visible;
105}
106.menu ul a:hover ul ul {
107        visibility: hidden;
108}
109.menu ul a:hover ul a:hover ul ul {
110        visibility: hidden;
111}
112.menu ul a:hover ul a:hover ul a:hover ul ul {
113        visibility: hidden;
114}
115.menu ul a:hover ul {
116        visibility: visible;
117}
118.menu ul a:hover ul a:hover ul {
119        visibility: visible;
120}
121.menu ul a:hover ul a:hover ul a:hover ul {
122        visibility: visible;
123}
124.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
125        visibility: visible;
126}
127.trans{
128   
129     
130      position:absolute;
131      width:40;
132      height:15;
133      z-index:10;
134     
135    }
136    .
137    fond{
138     
139      position:relative;
140      z-index:1; 
141    }
142   
143
144</style>
145
146
147        <div class="trans" >
148                    <form method="post" action="" id="from_stp_form">
149                    {% for form in select_stp_form %}
150                        <ul><li>{{ form }}</li></ul>
151                    {% endfor %}
152                    </form>
153 
154                    <div class="menu" id="menu_">   </div>
155        </div>
156   
157           
158                       
159        <div class="fond" id="container">
160       
161        <div id="webgl_warning" class="main" style="display:none;">
162    <div class="warning_container">
163      <div class="warning">
164
165        <p><strong>WARNING:</strong> Your browser does not support <a target="_top" href="http://www.khronos.org/webgl/wiki/Main_Page">WebGL</a>. Thingiview works best with WebGL support, which is available in the following browsers:</p>
166        <ul>
167          <li><a target="_top" href="http://www.google.com/chrome">Google Chrome 9+</a> (Recommended)</li>
168          <li><a target="_top" href="http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">Firefox 4.0+</a></li>
169
170          <li><a target="_top" href="http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">Safari Nightly (OS X 10.6+ only)</a></li>
171        </ul>
172        <p>Or, you can <a href="javascript: show_thingiview();">try Thingiview at your own risk</a>. It may lock up your computer!</p>
173      </div>
174    </div>
175  </div>
176 
177  </div>
178
179
180               
181
182       
183
184{% endblock %}
185
186
187{% block scripts %}
188                <script>
189
190
191
192               
193               
194
195
196
197         //
198    //Me faltan los margenes para cuadrar bien todo
199    //Me falta desactivar la rueda dentro de la division
200    //No hacer todo el rato las comprobaciones para centrar, en cada loop, sino solo cuando pulse el boton
201    //donde pongo el media , estoy pasando el path completo y eso no es bueno para la seguridad
202    //el upload too no hace nada
203   
204    //Probar con orthographical camera
205    //ver si se muestra tmb en la franja superior
206    //si estoy en 3D y pulso 3D , lo que hago es llevar el objeto a su posicion inicial
207    //posibilidad partes sin nombre nom=''
208   
209   
210    // y si tengo al mismo tiempo para una parte shapes simples y conjuntos con sus propios shapes, es decir tendria un hijo shape y otro hijo que seria una parte
211    // tiene que estar antes el items aue el lacaca.js    *
212    // si changepart(atrib)  atrib = ''cambia el estado, sino pone cada parte el valor pasado como atributo
213         
214
215        </script>
216       
217        <script type="text/javascript" src="/media/js/jquery.hoverIntent.minified.js"></script>
218
219       
220       
221       
222       
223                <script type="text/javascript" src="/media/js/Three.js"></script>
224                {% for item in multi_image3D %}
225                <script type="text/javascript" src="/media/3D/{{ item.js.name}}"></script>
226                {% endfor %}
227                <script type="text/javascript" src="/media/3D/navigabilite/{{menu_navigabilite}}"></script>
228
229 
230
231                <script type="text/javascript">
232               
233                    var camera, scene, renderer, object3D;
234                    var geometry ;
235                    var container;
236                    var main_content;
237                   
238                   
239                        var targetRotation = 0;
240                        var targetRotationOnMouseDown = 0;
241                        var targetRotationY = 0;
242                        var targetRotationYOnMouseDown = 0;
243                        var mouseX = 0;
244                        var mouseXOnMouseDown = 0;
245                        var mouseY = 0;
246                        var mouseYOnMouseDown = 0;
247
248           
249            var width ;
250            var height ;
251            var deep ;
252
253
254                        var windowHalfX = window.innerWidth / 2;
255                        var windowHalfY = window.innerHeight / 2;
256
257               
258
259           
260                        var targetXRotation             = 0;
261            var targetXRotationOnMouseDown  = 0;
262            var mouseX                      = 0;
263            var mouseXOnMouseDown           = 0;
264            var targetYRotation             = 0;
265            var targetYRotationOnMouseDown  = 0;
266
267
268            var mouseDown                  = false;
269            var mouseOver                  = false;
270       
271                       
272                       
273                        $(document.getElementById( 'container' )).ready(init);
274                       
275                       
276
277                        function init() {
278                       
279                       
280                       
281                            if (!has_webgl()){
282
283                document.getElementById("webgl_warning").style.display = 'block';
284
285                }
286 
287
288
289                       
290                       
291                       
292
293                                main_content = document.getElementById('main_content');
294                                container=document.getElementById('container');
295
296                               
297                                scene = new THREE.Scene();
298                object3D = new THREE.Object3D();
299
300                                //object3D.overdraw = true;
301
302                               
303                scene.add( new THREE.AmbientLight( 0x0ff20 ) );
304                light1 = new THREE.PointLight( 0xff0040 );
305                                scene.add( light1 );
306                                scene.add( object3D);
307                               
308                               
309                                   
310                                {% for item in multi_image3D %}
311                object{{item.id}}.overdraw = true;
312                object3D.add(object{{item.id}});
313                {% endfor %}
314               
315
316                            centrer_objet(object3D);
317                camera = new THREE.PerspectiveCamera( 50, $(main_content).width() / $(main_content).height(), 1, deep*8 );
318                camera.position.z = deep*4;
319               
320                                renderer = new THREE.WebGLRenderer();
321                                renderer.setSize( $(main_content).width(), $(main_content).height() );
322
323                                container.appendChild( renderer.domElement );
324                                //container.addEventListener( 'mousedown', onDocumentMouseDown, false );
325 
326                container.addEventListener( 'mousedown', onDocumentMouseDown, false );
327                container.addEventListener('DOMMouseScroll', wheel, false);
328
329                    //renderer.domElement.addEventListener('touchstart',     onRendererTouchStart,    false);
330                    //renderer.domElement.addEventListener('touchend',       onRendererTouchEnd,      false);
331                    //renderer.domElement.addEventListener('touchmove',      onRendererTouchMove,     false);
332
333                //renderer.domElement.addEventListener('DOMMouseScroll', onRendererScroll,        false);
334                    //renderer.domElement.addEventListener('mousewheel',     onRendererScroll,        false);
335                    //renderer.domElement.addEventListener('gesturechange',  onRendererGestureChange, false);
336                container.focus()
337                setInterval( loop, 1000 / 60 );
338               
339                menu();
340
341                        }
342
343            function has_webgl(){
344            return !!window.WebGLRenderingContext;
345            }
346                       
347                        function centrer_objet(object3D_){             
348                        boundingBox=computeGroupBoundingBox(object3D_);                                 
349            width =Math.abs(boundingBox.x[ 1 ]-boundingBox.x[ 0 ]);
350            height =Math.abs(boundingBox.y[ 1 ]-boundingBox.y[ 0 ]);
351            deep =Math.abs(boundingBox.z[ 1 ]-boundingBox.z[ 0 ]);
352 
353           
354            object3D_.position.x=-(boundingBox.x[ 1 ]+boundingBox.x[ 0 ])/2;
355            object3D_.position.y=-(boundingBox.y[ 1 ]+boundingBox.y[ 0 ])/2; 
356                        object3D_.position.z=-(boundingBox.z[ 1 ]+boundingBox.z[ 0 ])/2;   
357
358            }
359           
360function wheel(event){
361                           
362                                var delta = 0;
363                                if (!event) event = window.event;
364                                if (event.wheelDelta) {
365                                        delta = event.wheelDelta/120;
366                                        if (window.opera) delta = -delta;
367                                } else if (event.detail) {
368                                delta = -event.detail/3;
369                                }
370                                if (delta)
371                                handle(delta);
372                               
373                                return cancelEvent(event);
374                        }
375
376                        function handle(delta) {
377                                if (delta <0){
378                                object3D.scale.x = object3D.scale.y = object3D.scale.z = object3D.scale.z * 1.01;
379                                       
380
381                                }
382                                else{
383                                //alert('boundRadius');
384                                object3D.scale.x = object3D.scale.y = object3D.scale.z = object3D.scale.z * 0.99;
385                                }       
386                                }
387
388                                               
389function onDocumentMouseDown( event ) {
390
391                                                        event.preventDefault();
392
393                                                        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
394                                                        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
395                                                        document.addEventListener( 'mouseout', onDocumentMouseOut, false );
396
397                                                        mouseXOnMouseDown = event.clientX - windowHalfX;
398                                                        mouseYOnMouseDown = event.clientY - windowHalfY;
399                                                        targetRotationOnMouseDown = targetRotation;
400                                                }
401
402                                                function onDocumentMouseMove( event ) {
403
404                                                        mouseX = event.clientX - windowHalfX;
405                                                        mouseY = event.clientY - windowHalfY;
406
407                                                        targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
408                                                        targetRotationY = targetRotationYOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
409                                                }
410
411                                                function onDocumentMouseUp( event ) {
412
413                                                        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
414                                                        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
415                                                        document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
416                                                }
417
418                                                function onDocumentMouseOut( event ) {
419
420                                                        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
421                                                        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
422                                                        document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
423                                                }
424function loop() {
425
426                                var time = new Date().getTime() * 0.0005;
427
428                                //object.rotation.x -= 0.005;
429                                //object.rotation.y -= 0.01;
430                                object3D.rotation.y += ( targetRotation - object3D.rotation.y ) * 0.02;
431                                object3D.rotation.x += ( targetRotationY - object3D.rotation.x ) * 0.02;
432
433                                                               
434                                renderer.render(scene, camera);
435
436                        }
437
438
439                        function cancelEvent(e)
440            {
441   
442            e = e ? e : window.event;
443            if(e.stopPropagation)
444                e.stopPropagation();
445            if(e.preventDefault)
446                e.preventDefault();
447            e.cancelBubble = true;
448            e.cancel = true;
449            e.returnValue = false;
450            return false;
451            }
452           
453           
454           
455function computeGroupBoundingBox(Object_Group) {
456
457
458   
459   if(Object_Group.children.length >  0 ){
460   
461   
462        Object_Group.children[ 0 ].geometry.computeBoundingBox();
463        var boundingBox = {
464        'x': [ Object_Group.children[ 0 ].geometry.boundingBox.x[ 0 ], Object_Group.children[ 0 ].geometry.boundingBox.x[ 1 ] ],
465        'y': [ Object_Group.children[ 0 ].geometry.boundingBox.y[ 0 ], Object_Group.children[ 0 ].geometry.boundingBox.y[ 1 ] ],
466        'z': [ Object_Group.children[ 0 ].geometry.boundingBox.z[ 0 ], Object_Group.children[ 0 ].geometry.boundingBox.z[ 1 ] ]}; 
467       
468
469       
470     
471        for ( var v = 1 ;v  < Object_Group.children.length; v ++ ) {
472
473        Object_Group.children[ v ].geometry.computeBoundingBox();
474       
475        if(Object_Group.children[ v ].geometry.boundingBox){
476
477        if ( Object_Group.children[ v ].geometry.boundingBox.x[ 0 ] < boundingBox.x[ 0 ] ) {
478
479        boundingBox.x[ 0 ] = Object_Group.children[ v ].geometry.boundingBox.x[ 0 ];
480        }
481        if ( Object_Group.children[ v ].geometry.boundingBox.x[ 1 ] > boundingBox.x[ 1 ] ) {
482
483        boundingBox.x[ 1 ] = Object_Group.children[ v ].geometry.boundingBox.x[ 1 ];
484
485        }
486       
487        if ( Object_Group.children[ v ].geometry.boundingBox.y[ 0 ] < boundingBox.y[ 0 ] ) {
488
489        boundingBox.y[ 0 ] = Object_Group.children[ v ].geometry.boundingBox.y[ 0 ];
490        }
491        if ( Object_Group.children[ v ].geometry.boundingBox.y[ 1 ] > boundingBox.y[ 1 ] ) {
492
493        boundingBox.y[ 1 ] = Object_Group.children[ v ].geometry.boundingBox.y[ 1 ];
494
495        }
496       
497        if ( Object_Group.children[ v ].geometry.boundingBox.z[ 0 ] < boundingBox.z[ 0 ] ) {
498
499        boundingBox.z[ 0 ] = Object_Group.children[ v ].geometry.boundingBox.z[ 0 ];
500        }
501        if ( Object_Group.children[ v ].geometry.boundingBox.z[ 1 ] > boundingBox.z[ 1 ] ) {
502
503        boundingBox.z[ 1 ] = Object_Group.children[ v ].geometry.boundingBox.z[ 1 ];
504
505        }
506       
507        }
508        }
509
510   
511   }
512   return boundingBox;
513   }
514
515
516
517
518               
519
520
521</script>
522
523{% endblock %}
Note: See TracBrowser for help on using the repository browser.