Discussion :

[yonochi]

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

[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.

[yonochi]

D'accord donc avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[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 ?

[p3ga5e]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
		}
	});
}

[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?