Actualiser un affichage plutôt que le recharger complètement (Three.js)

Version imprimable

05/06/2014, 09h03
yonochi

Actualiser un affichage plutôt que le recharger complètement (Three.js)

Bonjour à tous, j'ai réussi à faire un affichage en 3D d'un fichier obj mais chaque fois que je veux changer la couleur, ou la taille de cet objet je dois tout recharger donc la caméra revient au point de départ, je voulais donc savoir s'il était possible de pouvoir modifier la taille ou la couleur de l'objet sans avoir à tout recharger et que la caméra reste à l'endroit où elle était avant la modification.

J'espère avoir été clair, merci de vos réponses :)
05/06/2014, 09h25
SylvainPV

Bien évidemment, c'est possible. Tu dois avoir une fonction de rendu et une fonction d'initialisation. Changer un paramètre de la scène ou de l'objet ne nécessite pas de relancer la fonction d'initialisation, seulement d'attendre le prochain tour de la fonction de rendu.

D'accord donc avec ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<script>
 
var camera, scene, renderer, control, controls, light;
var cross, container;
var width, height;
 
init();
animate();
render();
 
function init() {
width =window.innerWidth;
height = window.innerHeight;
container = document.createElement('div');
container.id = 'container';
document.getElementById("A6").appendChild( container );
 
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.sortObjects = false;
renderer.setSize( width, height );
container.appendChild( renderer.domElement );
 
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 15000 );
camera.position.set( 1250, 250, 2500 );
 
controls = new THREE.TrackballControls( camera, container );
controls.rotateSpeed = 2.0;
controls.zoomSpeed = 2.5;
controls.panSpeed = 2.8;
 
controls.noZoom = false;
controls.noPan = false;
 
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
 
controls.keys = [ 65, 83, 68 ];
 
controls.addEventListener( 'change', render );
 
scene = new THREE.Scene();
cross =  new THREE.GridHelper( 6500, 50 );
scene.add(cross);
 
light = new THREE.DirectionalLight( 0xf5f5f5, 2 );
light.position.set( 1, 1, 1 );
scene.add( light );
 
light = new THREE.DirectionalLight( 0x808080 );
light.position.set( -1, -1, -1 );
scene.add( light );
var textureobj = new THREE.Texture();
 
var loader = new THREE.ImageLoader();
loader.load('alu.jpg', function ( image ) {
 
textureobj.image = image;
textureobj.needsUpdate = true;
render();
} );
 
var loader = new THREE.OBJLoader();
loader.load('obj/621.obj', function ( object ) {
 
object.traverse( function ( child ) {
 
if ( child instanceof THREE.Mesh ) {
 
child.material.map = textureobj;
 
}
 
} );
 
scene.add( object );
render();
} );
 
window.addEventListener( 'resize', onWindowResize, false );
}
 
function onWindowResize() {
 
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
 
renderer.setSize( window.innerWidth, window.innerHeight );
 
controls.handleResize();
render();
 
}	
function animate() {
requestAnimationFrame( animate );
controls.update();;
}
 
function render() {
renderer.render( scene, camera );
}
</script>

je rajoute juste le code pour les modifications qu'il me faut dans la fonction init() alors, n'est-ce pas ou je créé une nouvelle fonction?

05/06/2014, 10h49
yonochi

Est-il possible de créer une fonction JavaScript qui modifierait des paramètres dans le code que j'ai donné au dessus, parce qu'en fait j'utilise WebDev pour faire cet affichage et donc le fichier correspondant à la texture est passé dans une variable que j'insère dans le code initial.
Donc est-il possible de modifier "textureobj" ou le nom de l'image ?

Salut !

Je n’ai pas bien compris tes contraintes, et ne connais tes possibilités de champs d’action . . .
mais si tu peux modifier le code source de ton script alors tu dois simplement garder une référence global sur ton objet chargé pour pouvoir le manipuler/modifier directement à partir de n’importe quel fonction

Un truc du genre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 var object; var loader = new THREE.OBJLoader(); loader.load('obj/621.obj', function ( obj ) { object = obj; object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) child.material.map = textureobj; }); scene.add( object ); render(); }); function ChangeScaleAndColor(scale, color) { object.scale = scale; object.updateMatrixWorld(true); object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.material.color = color; child.material.needsUpdate = true; } }); }

05/06/2014, 11h56
yonochi

Merci p3ga5e pour ta réponse mais je n'ai plus l'objet qui s'affiche :?

Mais par contre je viens de voir la méthode innerHTML est-ce que si j'utilise ceci en insérant tout mon code avec les modifications que je veux ça permet un affichage sans recharger? Parce que pour une phrase, ça ne recharge pas la page mais après pour un champ complet ça risque de coincer non?
05/06/2014, 12h05
SylvainPV

Aïe, faire de la programmation WebGL avant de connaître les bases de la manipulation HTML en JavaScript, c'est une mauvaise idée ça :aie:
Oublie ça, tu pars dans une direction radicalement opposée
05/06/2014, 12h21
yonochi

C'est pas du tout possible? C'est pas trop un choix le WebGL en maitrisant peu l'HTML je dois créer une page de conception pour quelqu'un :?
05/06/2014, 13h24
p3ga5e

Citation:

Envoyé par yonochi

Merci p3ga5e pour ta réponse mais je n'ai plus l'objet qui s'affiche :?

J' ai juste oublié d'ajouter l'objet a la scène et déclencher la boucle de rendu ... j'ai corriger mon 1er post.
par contre je comprend toujours pas tes contraintes de developpement
05/06/2014, 14h05
yonochi

Oui ça je les avaient ajoutés :)

En fait on me donne un tableau constitué de plusieurs nom de fichier obj et chaque obj correspond à un morceau/ une pièce d'un élément.
Pour chaque objet je le charge, le clone autant de fois que nécessaire (et aussi pour accélérer le temps d'affichage) et effectue les modifications nécessaires (scale, position et rotation) pour que la pièce soit correctement positionnée.
Mais maintenant que mon élément est bien constitué, on me demande de pouvoir changer la texture via un zone répétée d'image (au format .png) et les dimensions sans tout réinitialiser.
Car pour le moment je peux le faire mais en rechargeant toute la page, ce qui n'est pas pratique :?
06/06/2014, 10h56
p3ga5e

Bon je ne suis pas sûr de comprendre ton problème

Si les manipulations que tu effectues après un 1er rendu n’ont aucun effet alors qu’ils fonctionnaient lors de la phase d’initialisation, c’est qu’il faut "flage"r les objets manipulées a l’état modifié pour que le renderer, réactualise ces caches, cela est d’autant plus vrais pour des données devant se trouver en VRAM comme les textures ou les attributs de sommets.

En regardant la doc de three.js je suis tombé sur la propriété needsUpdate du prototype Material, donc toutes modifications, post rendu, sur un matériau, nécessite de flager cet propriété a true manuellement. J’ai recorrigé une nouvelle fois mon 1er post dans ce sens.

Concernant les changement de repères (position, rotation, scale) , le proto Object3D dispose d’une propriété booléenne matrixAutoUpdate qui force le recalcule des matrices à chaque frame , donc important pour une entité mobile.
Sinon Il y a 2 méthodes updateMatrix() et updateMatrixWorld(force) et là la doc n’est pas très claire , je suppose que updateMatrix recompose la matrice 4x4 locale en fonction des diffèrent paramètres, et updateMatrixWorld recompose la matrice 4x4 finale MODEL en fonction de la hiérarchie du scène graph, alors faut-il appeler les 2 methodes ou juste updateMatrixWorld avec true comme paramètre ? J’en ai aucune idée… faut tester ou étudier le code source de three.js