update
This commit is contained in:
hzz
parent
0358a9f5b7
commit
df8c76b306
BIN
src/assets/images/gif-bg.gif
Normal file
BIN
src/assets/images/gif-bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
108
src/views/screen/R_D_Environment/component/ThreeBG.vue
Normal file
108
src/views/screen/R_D_Environment/component/ThreeBG.vue
Normal file
@ -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>
|
||||||
@ -1,104 +1,38 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as THREE from 'three';
|
import { onMounted } from 'vue';
|
||||||
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
|
import gitBG from '@/assets/images/gif-bg.gif';
|
||||||
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
|
import ThreeBG from './component/ThreeBG.vue';
|
||||||
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);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
#threeContainer {
|
.container {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 1080px;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user