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

Revision 592, 20.2 KB checked in by agalech, 9 years ago (diff)

add document3d app

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    .trans{
13   
14     
15      position:absolute;
16      width:40;
17      height:15;
18      z-index:10;
19     
20    }
21    .fond{
22     
23      position:relative;
24      z-index:1; 
25    }
26   
27
28</style>
29
30
31        <div class="trans" >
32                    <form method="post" action="" id="from_stp_form">
33                 
34 
35                        {% for form in select_stp_form %}
36 
37                        <ul>
38                        <li>{{ form }}</li>
39                        </ul>
40                       
41                       
42                        <div id=button_affichage ><input  type="button" value="A" onmouseover="afficher()" onmouseout="masquer()" >
43                        <li id="caca"style="DISPLAY:none">
44                       
45                       
46                       
47                       
48                       
49                        {% for item in multi_image3D %}
50
51                        <input type="checkbox" id="{{item.id}}">
52<a href="" onClick="changeBox{{item.id}}('document.getElementById({{item.id}})');return false">{{item.stp.filename}}</a>
53
54                        {% endfor %}
55
56                       
57                       
58                       
59                       
60                        </li></div>
61                        {% endfor %}
62                       
63                                               
64
65
66                     
67   
68                       
69
70            </form>
71      </div>   
72   
73    <div class="fond" id="container"></div>
74
75
76               
77
78       
79
80{% endblock %}
81
82
83{% block scripts %}
84                <script>
85
86                        {% for item in multi_image3D %}
87
88                        function changeBox{{item.id}}(cbox) {
89                        box = eval(cbox);
90                        box.checked = !box.checked;
91                        object_{{item.id}}.visible=!object_{{item.id}}.visible;
92                        }       
93
94                        {% endfor %}
95                //
96
97                                //onmouseover="over()" onmouseout="out()"
98/*$("#button_affichage").hoverIntent({
99        over: afficher,
100        timeout: 100,
101        interval: 100,
102        out: masquer
103    });*/
104               
105               
106
107
108
109         //
110    //Me faltan los margenes para cuadrar bien todo
111    //Me falta desactivar la rueda dentro de la division
112    //No hacer todo el rato las comprobaciones para centrar, en cada loop, sino solo cuando pulse el boton
113    //donde pongo el media , estoy pasando el path completo y eso no es bueno para la seguridad
114    //el upload too no hace nada
115   
116    //Probar con orthographical camera
117    //ver si se muestra tmb en la franja superior
118    //si estoy en 3D y pulso 3D , lo que hago es llevar el objeto a su posicion inicial
119       
120       
121
122        </script>
123       
124        <script type="text/javascript" src="/media/js/jquery.hoverIntent.minified.js"></script>
125
126       
127       
128       
129       
130                <script type="text/javascript" src="/media/js/Three.js"></script>
131               
132                {% for item in multi_image3D %}
133                <script type="text/javascript" src="/media/3D/{{ item.js.name}}"></script>
134                {% endfor %}
135 
136
137                <script type="text/javascript">
138               
139                    var camera, scene, renderer, object3D;
140                    var geometry ;
141                    var container;
142                    var main_content;
143                        var targetRotation = 0;
144                        var targetRotationOnMouseDown = 0;
145                        var targetRotationY = 0;
146                        var targetRotationYOnMouseDown = 0;
147                        var mouseX = 0;
148                        var mouseXOnMouseDown = 0;
149                        var mouseY = 0;
150                        var mouseYOnMouseDown = 0;
151                        var windowHalfX = window.innerWidth / 2;
152                        var windowHalfY = window.innerHeight / 2;
153                        {% for item in multi_image3D %}
154                    var object_{{item.id}};
155                    {% endfor %}
156                       
157
158                        $(document.getElementById( 'container' )).ready(init);
159                       
160                function getPos(el) {
161            for (var lx=0, ly=0;
162            el != null;
163            lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
164            return {x: lx,y: ly};
165            }
166           
167                        function init() {
168            //main_box
169                                main_content = document.getElementById('main_content');
170                                container=document.getElementById('container');
171                                //camera = new THREE.OrthographicCamera( container.innerWidth/-2, container.innerWidth/2,
172                                //container.innerHeight/2,container.innerHeight/-2,1,10000 );
173
174                //pos_container=getPos("main_content");
175                //alert("Alto de la otra : "+$(main_content).height()+" Alto de la division "+main_content.offsetHeight+"Ancho de la division "+main_content.offsetWidth+"\n");
176               
177                //camera = new THREE.OrthographicCamera(1000,1000, 1000, 1000, 1, 8000 )
178                //OrthographicCamera
179               
180                                //camera = new THREE.PerspectiveCamera( 50, main_content.offsetWidth / main_content.offsetHeight, 1, 20000 );
181                                camera = new THREE.PerspectiveCamera( 50, $(main_content).width() / $(main_content).height(), 1, 20000 );
182                               
183                               
184
185                                scene = new THREE.Scene();
186
187                                /*
188                                var from_stp_form=document.getElementById("from_stp_form");
189                                 var tables=from_stp_form.getElementsByTagName("option");
190                                 input=document.createElement('input');
191                                 txt=document.createTextNode('this is d3');
192                                 input.appendChild(txt);
193                 tables[0].appendChild(input);
194                 */
195                                 
196                 //alert("Il y a "+tables.length+" tableaux HTML dans cette page");
197               
198                                object3D = new THREE.Object3D();
199                                //object3D = new THREE.Mesh();
200                                object3D.overdraw = true;
201
202                               
203                scene.add( new THREE.AmbientLight( 0x0ff20 ) );
204                light1 = new THREE.PointLight( 0xff0040 );
205                                scene.add( light1 );
206                                scene.add( object3D);
207       
208                                //
209                                /*object = new THREE.Mesh( new Shape(), new THREE.MeshNormalMaterial({opacity:1,shading:THREE.SmoothShading}) );
210                                object.overdraw = true;
211                                object.scale.x = object.scale.y = object.scale.z = 10.;
212                                object.position.y -= 200.;
213                                */
214                                {% for item in multi_image3D %}
215                object_{{item.id}} = new THREE.Mesh( new _{{item.id}}(), new THREE.MeshNormalMaterial({opacity:0.5,shading:THREE.SmoothShading}) );
216                object_{{item.id}}.overdraw = true;
217                //object_{{item.id}}.position.x = 0;
218                //object_{{item.id}}.position.y = 0;
219                //object_{{item.id}}.position.z = 0;
220                //object_{{item.id}}.scale.x = object_{{item.id}}.scale.y = object_{{item.id}}.scale.z = 1;
221                object3D.add(object_{{item.id}});
222                {% endfor %}
223
224               
225                //object3D.position.x=0;
226                                //object3D.position.y=0;
227                                //object3D.position.z=0;
228                                //object3D.add(object)
229                                //object3D.add(object)
230                       
231                            //centrer l'object
232                            centrer_objet(object3D);
233               
234                       
235                       
236
237
238
239                                //renderer = new THREE.CanvasRenderer();
240                                renderer = new THREE.WebGLRenderer();
241                                renderer.setSize( $(main_content).width(), $(main_content).height() );
242                                //alert(main_content.innerWidth+ " " + main_content.innerHeight);
243                                //renderer.setSize( main_content.offsetWidth, main_content.offsetHeight);
244                               
245                                //main_content.appendChild( renderer.domElement );
246                                container.appendChild( renderer.domElement );
247                                container.addEventListener( 'mousedown', onDocumentMouseDown, false );
248                container.focus()
249                setInterval( loop, 1000 / 60 );
250
251                        }
252
253
254                       
255                        function centrer_objet(object3D_){             
256                        boundingBox=computeGroupBoundingBox(object3D_);                         
257            //var width =Math.abs(boundingBox.x[ 1 ]-boundingBox.x[ 0 ]);
258            //var height =Math.abs(boundingBox.y[ 1 ]-boundingBox.y[ 0 ]);
259            var deep =Math.abs(boundingBox.z[ 1 ]-boundingBox.z[ 0 ]);
260           
261            camera.position.z = deep*4;
262            object3D_.position.x-=(boundingBox.x[ 1 ]+boundingBox.x[ 0 ])/2;
263            object3D_.position.y-=(boundingBox.y[ 1 ]+boundingBox.y[ 0 ])/2; 
264                        object3D_.position.z-=(boundingBox.z[ 1 ]+boundingBox.z[ 0 ])/2;   
265
266            }
267           
268           
269                        function onDocumentMouseDown( event ) {
270
271
272                                                        event.preventDefault();
273
274                                                        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
275                                                        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
276                                                        document.addEventListener( 'mouseout', onDocumentMouseOut, false );
277
278                                                        mouseXOnMouseDown = event.clientX - windowHalfX;
279                                                        mouseYOnMouseDown = event.clientY - windowHalfY;
280                                                        targetRotationOnMouseDown = targetRotation;
281                                                }
282
283                                                function onDocumentMouseMove( event ) {
284
285                                                        mouseX = event.clientX - windowHalfX;
286                                                        mouseY = event.clientY - windowHalfY;
287                                                        targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
288                                                        targetRotationY = targetRotationYOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
289                                                }
290
291                                                function onDocumentMouseUp( event ) {
292
293                                                        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
294                                                        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
295                                                        document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
296                                                }
297
298                                                function onDocumentMouseOut( event ) {
299
300                                                        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
301                                                        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
302                                                        document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
303                                                }
304
305                        function loop() {
306
307                                var time = new Date().getTime() * 0.0005;
308
309                                //scene.rotation.x -= 0.1;
310                                //scene.rotation.y -= 0.1;
311                //object3D.scale.x = object3D.scale.y = object3D.scale.z = object3D.scale.z*1.01;
312                                //scene.rotation.y += ( targetRotation - scene.rotation.y ) * 0.02;
313                                //scene.rotation.x += ( targetRotationY - scene.rotation.x ) * 0.02;
314
315                object3D.rotation.x += ( targetRotation - object3D.rotation.y ) * 0.02;
316                object3D.rotation.y -= ( targetRotationY - object3D.rotation.x ) * 0.02;
317                //object3D.position.y+=10;
318                //alert(container.offsetWidth+ " "+ container.offsetHeight);
319                                //renderer.setSize( container.innerWidth, container.innerHeight );                             
320                                renderer.render(scene, camera);
321
322                        }
323
324
325function computeGroupBoundingBox(Object_Group) {
326
327
328   
329   if(Object_Group.children.length >  0 ){
330   
331   
332        Object_Group.children[ 0 ].geometry.computeBoundingBox();
333        var boundingBox = {
334        'x': [ Object_Group.children[ 0 ].geometry.boundingBox.x[ 0 ], Object_Group.children[ 0 ].geometry.boundingBox.x[ 1 ] ],
335        'y': [ Object_Group.children[ 0 ].geometry.boundingBox.y[ 0 ], Object_Group.children[ 0 ].geometry.boundingBox.y[ 1 ] ],
336        'z': [ Object_Group.children[ 0 ].geometry.boundingBox.z[ 0 ], Object_Group.children[ 0 ].geometry.boundingBox.z[ 1 ] ]}; 
337       
338
339       
340     
341        for ( var v = 1 ;v  < Object_Group.children.length; v ++ ) {
342
343        Object_Group.children[ v ].geometry.computeBoundingBox();
344       
345
346        if ( Object_Group.children[ v ].geometry.boundingBox.x[ 0 ] < boundingBox.x[ 0 ] ) {
347
348        boundingBox.x[ 0 ] = Object_Group.children[ v ].geometry.boundingBox.x[ 0 ];
349        }
350        if ( Object_Group.children[ v ].geometry.boundingBox.x[ 1 ] > boundingBox.x[ 1 ] ) {
351
352        boundingBox.x[ 1 ] = Object_Group.children[ v ].geometry.boundingBox.x[ 1 ];
353
354        }
355       
356        if ( Object_Group.children[ v ].geometry.boundingBox.y[ 0 ] < boundingBox.y[ 0 ] ) {
357
358        boundingBox.y[ 0 ] = Object_Group.children[ v ].geometry.boundingBox.y[ 0 ];
359        }
360        if ( Object_Group.children[ v ].geometry.boundingBox.y[ 1 ] > boundingBox.y[ 1 ] ) {
361
362        boundingBox.y[ 1 ] = Object_Group.children[ v ].geometry.boundingBox.y[ 1 ];
363
364        }
365       
366        if ( Object_Group.children[ v ].geometry.boundingBox.z[ 0 ] < boundingBox.z[ 0 ] ) {
367
368        boundingBox.z[ 0 ] = Object_Group.children[ v ].geometry.boundingBox.z[ 0 ];
369        }
370        if ( Object_Group.children[ v ].geometry.boundingBox.z[ 1 ] > boundingBox.z[ 1 ] ) {
371
372        boundingBox.z[ 1 ] = Object_Group.children[ v ].geometry.boundingBox.z[ 1 ];
373
374        }
375       
376        }
377
378   
379   }
380   return boundingBox;
381   }
382
383
384
385
386
387
388
389
390
391   
392
393       
394                /*
395                    var camera, scene, renderer, object;
396                        var targetRotation = 0;
397                        var targetRotationOnMouseDown = 0;
398                        var targetRotationY = 0;
399                        var targetRotationYOnMouseDown = 0;
400                        var mouseX = 0;
401                        var mouseXOnMouseDown = 0;
402                        var mouseY = 0;
403                        var mouseYOnMouseDown = 0;
404                        var windowHalfX = window.innerWidth / 2;
405                        var windowHalfY = window.innerHeight / 2;
406            var largDiv = 0;
407            var hautDiv = 0;
408                    var container ;
409                    var pos_container ;
410                    var main_box ;
411                    var pos_main_box;
412                    //shapes of object
413            {% for item in multi_image3D %}
414                    var object_{{item.id}};
415                    {% endfor %}
416                        var bbox; //pour encadrer un object dans une boit
417                       
418                        $(document.getElementById( 'container' )).ready(init);
419                        init();
420                        setInterval( loop, 1000 / 60 );
421                       
422                       
423
424            function getPos(el) {
425        for (var lx=0, ly=0;
426         el != null;
427         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
428        return {x: lx,y: ly};
429        }
430       
431
432       
433
434                        function init() {
435
436                               
437
438
439               
440                                //main_box = document.getElementById( 'Page' );
441                container = document.getElementById( 'main_content' );
442               
443                scene = new THREE.Scene();
444                                scene.addLight( new THREE.AmbientLight( 0x0ff20 ) );
445                                light1 = new THREE.PointLight( 0xff0040 );
446                                scene.addLight( light1 );
447                                object = new THREE.Object3D();
448                               
449                //scene.addObject( object );
450               
451
452               
453               
454               
455               
456                //alert("{{images_3D}}");
457               
458                //pos_main_box=getPos(main_box);
459                //alert("X inicial : "+pos_main_box.x+" Ancho de la web "+window.innerWidth+"Ancho de la division "+main_box.offsetWidth+"\n");
460                pos_container=getPos(container);
461
462               
463               
464                {% for item in multi_image3D %}
465                object_{{item.id}} = new THREE.Mesh( new _{{item.id}}(), new THREE.MeshNormalMaterial({opacity:0.5,shading:THREE.SmoothShading}) );
466               
467                //object.prototype.add(object_{{item.id}});
468                scene.addObject( object_{{item.id}} );
469                {% endfor %}
470                   
471
472
473
474                                //object = new THREE.Mesh( new Shape(), new THREE.MeshNormalMaterial({opacity:0.5,shading:THREE.SmoothShading}) );
475                               
476                                //object.overdraw = true;
477                               
478                                object.overdraw = false;
479                                object.scale.x = object.scale.y = object.scale.z = 1.;
480               
481                               
482                                object.geometry.computeBoundingBox();
483                               
484                                //centre geometrique d image
485                                centerX = 0.5 * ( object.geometry.boundingBox.x[ 1 ] +object.geometry.boundingBox.x[ 0 ] );
486                                centerY = 0.5 * ( object.geometry.boundingBox.y[ 1 ] + object.geometry.boundingBox.y[ 0 ] );
487                                centerZ = 0.5 * ( object.geometry.boundingBox.z[ 1 ] + object.geometry.boundingBox.z[ 0 ] );
488                                //taille       
489                                Width = Math.abs(object.geometry.boundingBox.x[ 1 ] - object.geometry.boundingBox.x[ 0 ]) ;
490                                Height = Math.abs(object.geometry.boundingBox.y[ 1 ] - object.geometry.boundingBox.y[ 0 ]) ;
491                                Depth = Math.abs(object.geometry.boundingBox.z[ 1 ] - object.geometry.boundingBox.z[ 0 ]) ;
492                               
493
494
495                                camera = new THREE.Camera( 50, (window.innerWidth-pos_container.x) / (window.innerHeight-pos_container.y), 1, centerZ+20*Depth);       
496
497                                camera.target.position.copy( object.position );
498                                camera.target.position.addSelf( new THREE.Vector3( centerX,centerY, centerZ ) );
499               
500                                camera = new THREE.Camera( 50, (window.innerWidth-pos_container.x) / (window.innerHeight-pos_container.y), 1, 1);       
501
502 
503                                z=Math.sqrt((Height*Height-(Height*Height/2))/2);
504                                y=Math.sqrt((Width*Width-(Width*Width/2))/2);
505                                if(z>y){
506                                y=z;
507                                }
508               
509                                factor=1.5; // =1 la image s afiche complete // >>1  l image se montre plus petit au debut // <<1 on commance avec un                                   zoom d image   
510                                camera.position.copy( new THREE.Vector3( centerX, centerY, centerZ+y+factor*Depth ) );
511                               
512                                //alert("Porofundidad necesaria: "+z+" "+y+"\n");
513                               
514                                //scene.add( object );
515                                               
516                //renderer = new THREE.CanvasRenderer();
517                                renderer = new THREE.WebGLRenderer();
518                                //renderer.setSize( window.innerWidth, window.innerHeight );
519                                //renderer.setSize( window.innerWidth-pos, 400 );
520                //renderer.setSize( window.innerWidth-pos_container.x-pos_main_box.x, window.innerHeight-pos_container.y -20);
521                renderer.setSize( window.innerWidth-pos_container.x, window.innerHeight-pos_container.y -20);
522                container.appendChild( renderer.domElement );
523               
524               
525                                //object.computeBoundingBox;
526                               
527                               
528                                container.addEventListener( 'mousedown', onDocumentMouseDown, false );
529                                container.addEventListener('DOMMouseScroll', wheel, false);
530                               
531                               
532
533
534                        }
535
536                        function wheel(event){
537                           
538                                var delta = 0;
539                                if (!event) event = window.event;
540                                if (event.wheelDelta) {
541                                        delta = event.wheelDelta/120;
542                                        if (window.opera) delta = -delta;
543                                } else if (event.detail) {
544                                delta = -event.detail/3;
545                                }
546                                if (delta)
547                                handle(delta);
548                               
549                                return cancelEvent(event);
550                        }
551
552                        function handle(delta) {
553                                if (delta <0){
554                                object.scale.x = object.scale.y = object.scale.z = object.scale.z * 1.01;
555                                       
556
557                                }
558                                else{
559                                //alert('boundRadius');
560                                object.scale.x = object.scale.y = object.scale.z = object.scale.z * 0.99;
561                                }       
562                                }
563
564
565                        function onDocumentMouseDown( event ) {
566
567                                                        event.preventDefault();
568       
569
570                                                        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
571                                                        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
572                                                        document.addEventListener( 'mouseout', onDocumentMouseOut, false );
573
574                                                        mouseXOnMouseDown = event.clientX - windowHalfX;
575                                                        mouseYOnMouseDown = event.clientY - windowHalfY;
576                                                        targetRotationOnMouseDown = targetRotation;
577                                                }
578
579                                                function onDocumentMouseMove( event ) {
580
581                                                        mouseX = event.clientX - windowHalfX;
582                                                        mouseY = event.clientY - windowHalfY;
583
584                                                        targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
585                                                        targetRotationY = targetRotationYOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
586                                                }
587
588                                                function onDocumentMouseUp( event ) {
589
590                                                        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
591                                                        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
592                                                        document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
593                                                }
594
595                                                function onDocumentMouseOut( event ) {
596
597                                                        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
598                                                        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
599                                                        document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
600                                                }
601                                               
602                                               
603                function resize()
604
605                {
606                pos_container=getPos(container);
607                if(typeof(renderer) != 'undefined')
608            renderer.setSize( window.innerWidth-pos_container.x-pos_main_box.x, window.innerHeight-pos_container.y-20 );
609
610
611                }
612                        function loop() {
613       
614                   
615                resize();
616   
617                                var time = new Date().getTime() * 0.0005;
618
619                                //object.rotation.x -= 0.005;
620                                //object.rotation.y -= 0.01;
621                                object.rotation.y += ( targetRotation - object.rotation.y ) * 0.02;
622                                object.rotation.x += ( targetRotationY - object.rotation.x ) * 0.02;
623
624                                                               
625                                renderer.render(scene, camera);
626
627                        }
628                       
629                        function cancelEvent(e)
630            {
631   
632            e = e ? e : window.event;
633            if(e.stopPropagation)
634                e.stopPropagation();
635            if(e.preventDefault)
636                e.preventDefault();
637            e.cancelBubble = true;
638            e.cancel = true;
639            e.returnValue = false;
640            return false;
641            }
642*/
643function afficher(){
644
645document.getElementById('caca').style.display = 'block';
646}
647
648
649function masquer(){
650
651//document.getElementById('caca').style.display = 'none';
652}
653/*                             
654var config = {   
655     over: afficher, // function = onMouseOver callback (REQUIRED)   
656     timeout: 500, // number = milliseconds delay before onMouseOut   
657     out: masquer // function = onMouseOut callback (REQUIRED)   
658};
659
660$(document.getElementById('button_affichage')).hoverIntent(  afficher,masquer );               
661*/
662               
663               
664               
665
666
667</script>
668
669{% endblock %}
Note: See TracBrowser for help on using the repository browser.