Skip to content

Commit a8ca433

Browse files
sblondeausblondeau
committed
add live support
1 parent 4f4b3b7 commit a8ca433

File tree

3 files changed

+82
-24
lines changed

3 files changed

+82
-24
lines changed

‎src/Threejs/assets/dist/controller.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ export default class extends Controller {
3838
static values: {
3939
three: ObjectConstructor;
4040
};
41+
private renderer;
4142
connect(): void;
43+
createScene(data: any): void;
4244
transform(object3D: THREE.Object3D, transformationData: any): any;
4345
createMesh(meshData: Mesh, scene: THREE.Scene): THREE.Mesh;
4446
createGeometry(geometryData: any): THREE.BufferGeometry;
@@ -48,4 +50,5 @@ export default class extends Controller {
4850
setControls(controlCamera: THREE.Camera, renderer: THREE.WebGLRenderer): void;
4951
createModel(modelData: any, scene: THREE.Scene): any;
5052
private dispatchEvent;
53+
threeValueChanged(): void;
5154
}

‎src/Threejs/assets/dist/controller.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,25 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
44
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
55

66
class default_1 extends Controller {
7+
constructor() {
8+
super(...arguments);
9+
this.renderer = null;
10+
}
711
connect() {
812
this.dispatchEvent('pre-connect', {
913
options: this.threeValue,
1014
});
11-
const renderer = new THREE.WebGLRenderer();
12-
const rendererValue = this.threeValue.renderer;
13-
renderer.setSize(rendererValue.width ?? window.innerWidth, rendererValue.height ?? window.innerHeight);
14-
this.element.appendChild(renderer.domElement);
15+
const threeValue = this.threeValue;
16+
this.renderer = new THREE.WebGLRenderer();
17+
this.createScene(threeValue);
18+
}
19+
createScene(data) {
20+
if (this.renderer === null) {
21+
return;
22+
}
23+
const rendererValue = data.renderer;
24+
this.renderer?.setSize(rendererValue.width ?? window.innerWidth, rendererValue.height ?? window.innerHeight);
25+
this.element.appendChild(this.renderer.domElement);
1526
const sceneValue = rendererValue.scene;
1627
let scene = new THREE.Scene();
1728
const light = new THREE.AmbientLight(0x404040);
@@ -27,16 +38,15 @@ class default_1 extends Controller {
2738
}
2839
const cameras = [];
2940
for (let cameraData of rendererValue.cameras) {
30-
cameras.push(this.createCamera(cameraData, renderer));
41+
cameras.push(this.createCamera(cameraData, this.renderer));
3142
}
3243
for (let lightData of sceneValue.lights) {
3344
this.createLight(lightData, scene);
3445
}
3546
if (rendererValue.controls) {
36-
this.setControls(cameras[0], renderer);
47+
this.setControls(cameras[0], this.renderer);
3748
}
3849
for (let modelData of this.threeValue.renderer.scene.models) {
39-
console.log(modelData);
4050
this.createModel(modelData, scene);
4151
}
4252
let animatedObjects = [];
@@ -56,12 +66,12 @@ class default_1 extends Controller {
5666
mesh.position.y += animation.translation.y;
5767
mesh.position.z = animation.translation.z;
5868
}
59-
renderer.render(scene, cameras[0]);
69+
this.renderer?.render(scene, cameras[0]);
6070
requestAnimationFrame(animate);
6171
};
6272
animate();
6373
this.dispatchEvent('connect', {
64-
renderer: renderer,
74+
renderer: this.renderer,
6575
scene: scene,
6676
});
6777
}
@@ -156,6 +166,8 @@ class default_1 extends Controller {
156166
loader.load(path, (model) => {
157167
this.transform(model.scene, modelData);
158168
scene.add(model.scene);
169+
model.scene.traverse(function (object) {
170+
});
159171
const mixer = new THREE.AnimationMixer(model.scene);
160172
const clock = new THREE.Clock();
161173
if (animation.playClip) {
@@ -184,6 +196,10 @@ class default_1 extends Controller {
184196
dispatchEvent(name, payload) {
185197
this.dispatch(name, { detail: payload, prefix: 'ux:threejs' });
186198
}
199+
threeValueChanged() {
200+
const threeValue = this.threeValue;
201+
this.createScene(threeValue);
202+
}
187203
}
188204
default_1.values = {
189205
three: Object,

‎src/Threejs/assets/src/controller.ts‎

Lines changed: 54 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,39 +46,50 @@ export default class extends Controller {
4646
static values = {
4747
three: Object,
4848
}
49+
private renderer: THREE.WebGLRenderer | null = null;
4950

5051
connect() {
5152
this.dispatchEvent('pre-connect', {
5253
options: this.threeValue,
5354
});
5455

56+
const threeValue = this.threeValue;
57+
this.renderer = new THREE.WebGLRenderer();
58+
59+
this.createScene(threeValue);
60+
}
61+
62+
63+
createScene(data: any) {
64+
if(this.renderer === null) {
65+
return;
66+
}
5567
/** init renderer */
56-
const renderer = new THREE.WebGLRenderer();
57-
const rendererValue = this.threeValue.renderer;
58-
renderer.setSize(rendererValue.width ?? window.innerWidth, rendererValue.height ?? window.innerHeight);
59-
this.element.appendChild(renderer.domElement);
68+
const rendererValue = data.renderer;
69+
this.renderer?.setSize(rendererValue.width ?? window.innerWidth, rendererValue.height ?? window.innerHeight);
70+
this.element.appendChild(this.renderer.domElement);
6071
// /** init scene */
6172
const sceneValue = rendererValue.scene;
6273
let scene = new THREE.Scene();
63-
const light = new THREE.AmbientLight(0x404040); // Lumière ambiante
74+
const light = new THREE.AmbientLight(0x404040);
6475
scene.add(light);
6576

6677
if (sceneValue.material.color) {
6778
scene.background = new THREE.Color(sceneValue.material.color);
6879
}
6980
if (sceneValue.material.map) {
7081
const texture = new THREE.TextureLoader().load(sceneValue.material.map);
71-
if(sceneValue.material.skybox)
72-
texture.mapping = THREE.EquirectangularReflectionMapping;
82+
if (sceneValue.material.skybox)
83+
texture.mapping = THREE.EquirectangularReflectionMapping;
7384
scene.background = texture;
74-
75-
}
76-
85+
86+
}
87+
7788

7889
/** cameras */
7990
const cameras: THREE.Camera[] = [];
8091
for (let cameraData of rendererValue.cameras) {
81-
cameras.push(this.createCamera(cameraData, renderer));
92+
cameras.push(this.createCamera(cameraData, this.renderer));
8293
}
8394

8495
/** lights */
@@ -88,12 +99,11 @@ export default class extends Controller {
8899

89100
/** controls */
90101
if (rendererValue.controls) {
91-
this.setControls(cameras[0], renderer);
102+
this.setControls(cameras[0], this.renderer);
92103
}
93104

94105
/** load 3d models */
95106
for (let modelData of this.threeValue.renderer.scene.models) {
96-
console.log(modelData);
97107
this.createModel(modelData, scene);
98108
}
99109

@@ -117,15 +127,15 @@ export default class extends Controller {
117127
mesh.position.y += animation.translation.y;
118128
mesh.position.z = animation.translation.z;
119129
}
120-
renderer.render(scene, cameras[0]);
130+
this.renderer?.render(scene, cameras[0]);
121131

122132
requestAnimationFrame(animate);
123133
};
124134

125135
animate();
126136

127137
this.dispatchEvent('connect', {
128-
renderer: renderer,
138+
renderer: this.renderer,
129139
scene: scene,
130140
});
131141
}
@@ -242,6 +252,28 @@ export default class extends Controller {
242252
this.transform(model.scene, modelData);
243253
scene.add(model.scene);
244254

255+
model.scene.traverse(function(object) {
256+
if (object instanceof THREE.Mesh) {
257+
// const material = object.material;
258+
// if(material.isMaterial && material.type=='MeshStandardMaterial') {
259+
// material.dispose();
260+
// object.material = new THREE.MeshBasicMaterial();
261+
// object.material.color = 'green';
262+
// }
263+
}
264+
// // Supposons que vous voulez changer la texture du premier matériau trouvé
265+
// const material = child.material;
266+
267+
// // Charger une nouvelle texture
268+
// const textureLoader = new THREE.TextureLoader();
269+
// textureLoader.load('path/to/your/new-texture.jpg', function(texture) {
270+
// // Mettre à jour la texture du matériau
271+
// material.map = texture;
272+
// material.needsUpdate = true; // Indiquer que le matériau doit être mis à jour
273+
// });
274+
// }
275+
});
276+
245277
const mixer = new THREE.AnimationMixer(model.scene);
246278
const clock = new THREE.Clock();
247279
if (animation.playClip) {
@@ -273,5 +305,12 @@ export default class extends Controller {
273305
private dispatchEvent(name: string, payload: any) {
274306
this.dispatch(name, { detail: payload, prefix: 'ux:threejs' });
275307
}
308+
309+
threeValueChanged(): void {
310+
const threeValue = this.threeValue;
311+
312+
this.createScene(threeValue);
313+
314+
}
276315
}
277316

0 commit comments

Comments
 (0)