diff --git a/src/assets/images/gif-bg.gif b/src/assets/images/gif-bg.gif
new file mode 100644
index 0000000..cf42e13
Binary files /dev/null and b/src/assets/images/gif-bg.gif differ
diff --git a/src/views/screen/R_D_Environment/component/ThreeBG.vue b/src/views/screen/R_D_Environment/component/ThreeBG.vue
new file mode 100644
index 0000000..0812f9a
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/ThreeBG.vue
@@ -0,0 +1,108 @@
+<template>
+    <div ref="threeContainer"></div>
+</template>
+
+<script setup>
+import * as THREE from 'three';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { onMounted, ref } from 'vue';
+
+const threeContainer = ref(null);
+let camera, scene, renderer, model, controls;
+let width = 1920;
+let height = 1080;
+const init = () => {
+    scene = new THREE.Scene();
+    // scene.background = new THREE.Color(null);//0x100c2a
+    // scene.background.setAlpha(0);
+    camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 2000);
+    camera.position.set(0, 300, 200);
+
+    renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: true
+});
+    renderer.setSize(width, height);
+    threeContainer.value.appendChild(renderer.domElement);
+
+    const objLoader = new OBJLoader();
+    let mtlLoader = new MTLLoader();
+    mtlLoader.load('/src/assets/obj/goats_R&D.mtl', function (materials) {
+        materials.preload();
+        objLoader.setMaterials(materials);
+        objLoader.load('/src/assets/obj/goats_R&D.obj', function (obj) {
+            var scale = 0.06 / obj.scale.x;
+            obj.scale.set(scale, scale, scale);
+            model = obj;
+            const box = new THREE.Box3().setFromObject(model);
+            const size = box.getSize(new THREE.Vector3())
+            // console.log(size,'-----');
+            obj.position.set(-size.x * 0.5, -size.y * 0.5, -size.z * 0.5);
+            obj.children.forEach((child) => {
+                const c = child;
+                const cm = c.material;
+                cm.emissive = cm.color;
+                cm.emissiveMap = cm.map;
+            });
+
+            scene.add(model);
+            animate();
+        });
+    });
+    // loader.load(
+    //   '/src/assets/obj/goats_R&D.obj',
+    //   (obj) => {
+    //     var scale = 0.1 / obj.scale.x;
+    //     obj.scale.set(scale, scale, scale);
+    //     model = obj;
+    //     // 添加光照
+    //     // scene.add(new THREE.AmbientLight(0x404040));
+    //     scene.add(new THREE.DirectionalLight());
+    //     scene.add(model);
+    //   },
+    //   (xhr) => {
+    //     console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+    //   },
+    //   (error) => {
+    //     console.error('An error happened: ', error);
+    //   }
+    // );
+
+    controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+
+    animate();
+};
+
+const animate = () => {
+    requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+    controls.update();
+};
+
+onMounted(() => {
+    init();
+    window.addEventListener('resize', onWindowResize);
+});
+
+const onWindowResize = () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+};
+
+onMounted(() => {
+    window.removeEventListener('resize', onWindowResize);
+});
+</script>
+
+<style>
+#threeContainer {
+    width: 1920px;
+    height: 1080px;
+    /* 根据需要调整位置 */
+    overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/R_D_Environment/index.vue b/src/views/screen/R_D_Environment/index.vue
index d11ab39..924bbf0 100644
--- a/src/views/screen/R_D_Environment/index.vue
+++ b/src/views/screen/R_D_Environment/index.vue
@@ -1,104 +1,38 @@
 <template>
-  <div ref="threeContainer"></div>
+  <div class="container">
+    <!-- <img id="bg-img" class="img " :src="gitBG"> -->
+    <ThreeBG style="position: absolute;left: 0;top: 0;" />
+  </div>
 </template>
 
 <script setup>
-import * as THREE from 'three';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
-import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import { onMounted, ref } from 'vue';
-
-const threeContainer = ref(null);
-let camera, scene, renderer, model, controls;
-let width = 1920;
-let height = 1080;
-const init = () => {
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color(0xbfe3dd);
-
-  camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 2000);
-  camera.position.set(0, 300, 200);
-
-  renderer = new THREE.WebGLRenderer();
-  renderer.setSize(width, height);
-  threeContainer.value.appendChild(renderer.domElement);
-
-  const objLoader = new OBJLoader();
-  let mtlLoader = new MTLLoader();
-  mtlLoader.load('/src/assets/obj/goats_R&D.mtl', function (materials) {
-    materials.preload();
-    objLoader.setMaterials(materials);
-    objLoader.load('/src/assets/obj/goats_R&D.obj', function (obj) {
-      var scale = 0.06 / obj.scale.x;
-      obj.scale.set(scale, scale, scale);
-      model = obj;
-      const box = new THREE.Box3().setFromObject(model);
-      const size = box.getSize(new THREE.Vector3())
-      // console.log(size,'-----');
-      obj.position.set(-size.x * 0.5, -size.y * 0.5, -size.z * 0.5);
-      obj.children.forEach((child) => {
-        const c = child;
-        const cm = c.material;
-        cm.emissive = cm.color;
-        cm.emissiveMap = cm.map;
-      });
-
-      scene.add(model);
-      animate();
-    });
-  });
-  // loader.load(
-  //   '/src/assets/obj/goats_R&D.obj',
-  //   (obj) => {
-  //     var scale = 0.1 / obj.scale.x;
-  //     obj.scale.set(scale, scale, scale);
-  //     model = obj;
-  //     // 添加光照
-  //     // scene.add(new THREE.AmbientLight(0x404040));
-  //     scene.add(new THREE.DirectionalLight());
-  //     scene.add(model);
-  //   },
-  //   (xhr) => {
-  //     console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-  //   },
-  //   (error) => {
-  //     console.error('An error happened: ', error);
-  //   }
-  // );
-
-  controls = new OrbitControls(camera, renderer.domElement);
-  controls.enableDamping = true;
-
-  animate();
-};
-
-const animate = () => {
-  requestAnimationFrame(animate);
-  renderer.render(scene, camera);
-  controls.update();
-};
-
-onMounted(() => {
-  init();
-  window.addEventListener('resize', onWindowResize);
-});
-
-const onWindowResize = () => {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-};
-
-onMounted(() => {
-  window.removeEventListener('resize', onWindowResize);
-});
+import { onMounted } from 'vue';
+import gitBG from '@/assets/images/gif-bg.gif';
+import ThreeBG from './component/ThreeBG.vue';
 </script>
 
-<style>
-#threeContainer {
+<style lang="scss" scoped>
+.container {
   width: 1920px;
   height: 1080px;
-  overflow: hidden;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url('/src/assets/images/gif-bg.gif');
+  background-repeat: no-repeat;
+  /* 如果你不想让背景平铺 */
+  background-size: cover;
+  /* 或者其他你需要的大小设置 */
+  background-position: center;
+
+  .bg-img {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/screen/R_D_Environment/test.vue b/src/views/screen/R_D_Environment/test.vue
deleted file mode 100644
index e69de29..0000000