🎈 perf: Optimize material display

xiangechen · Apr 12, 2024 · d5795dd · d5795dd
1 parent 6e4c20d
commit d5795dd
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/packages/chili-three/src/threeVisual.ts b/packages/chili-three/src/threeVisual.ts
@@ -53,9 +53,10 @@ export class ThreeVisual implements IVisual {
     initScene() {
         let scene = new Scene();
         scene.background = new Color(0x888888);
-        let envLight = new AmbientLight(0x888888, 5);
+        const light = new DirectionalLight(0xffffff, 0.5);
+        let envLight = new AmbientLight(0x888888, 4);
         let axisHelper = new AxesHelper(250);
-        scene.add(envLight, axisHelper);
+        scene.add(light, envLight, axisHelper);
         return scene;
     }
 

diff --git a/packages/chili-three/src/threeVisualContext.ts b/packages/chili-three/src/threeVisualContext.ts
@@ -86,6 +86,7 @@ export class ThreeVisualContext implements IVisualContext {
         let map = new TextureLoader().load(item.texture);
         map.wrapS = RepeatWrapping;
         map.wrapT = RepeatWrapping;
+        map.center.set(0.5, 0.5);
         map.repeat.set(item.repeatU, item.repeatV);
         map.rotation = MathUtils.degToRad(item.angle);
         return map;
@@ -112,7 +113,6 @@ export class ThreeVisualContext implements IVisualContext {
             material.name = source.name;
         } else if (prop === "angle" && material.map) {
             material.map.rotation = MathUtils.degToRad(source.angle);
-            material.map.center.set(0.5, 0.5);
         } else if (prop === "repeatU" && material.map) {
             material.map.repeat.setX(source.repeatU);
         } else if (prop === "repeatV" && material.map) {

diff --git a/packages/chili-ui/src/property/material/materialEditor.ts b/packages/chili-ui/src/property/material/materialEditor.ts
@@ -128,7 +128,7 @@ export class MaterialEditor extends HTMLElement {
 
     private initEditingControl(material: Material) {
         const selectTexture = async () => {
-            let file = await readFileAsync(".png, .jpg", false, "readAsDataURL");
+            let file = await readFileAsync(".png, .jpg, .jpeg", false, "readAsDataURL");
             material.texture = file.unwrap()[0].data;
         };
         let container = div({