1. 不好意思 刚开始学three 不好的地方见谅。
模型，灵感来自哔哩哔哩的老陈打码。
完整视频
[](WeChat_20230407155019_腾讯视频 (qq.com))
1.下载 three，gsap
npm i three
npm i gsap
2.导入three gsap vue 解压缩包
import * as THREE from "three";
import { onMounted } from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import gsap from "gsap";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
3.渲染场景
let width = window.innerWidth;
let height = window.innerHeight;
const scene = new THREE.Scene();
const web = new THREE.WebGLRenderer();
const xj = new THREE.PerspectiveCamera(75, width / height, 0.1, 3000);
xj.position.set(0, 0, 20);
web.setSize(width, height);
web.render(scene, xj);
onMounted(() => {
render();
document.querySelector("#three")?.appendChild(web.domElement);
});
4.添加控制器
const controls = new OrbitControls(xj, web.domElement);
controls.update();
5.载入背景视频
let video = document.createElement("video");
video.src = "./assets/zp2.mp4";
video.loop = true;
video.muted = true;
video.play();
let videoTexture = new THREE.VideoTexture(video);
const videoGeoPlane = new THREE.PlaneGeometry(50, 30);
const videoMaterial = new THREE.MeshBasicMaterial({
map: videoTexture,
transparent: true,
side: THREE.DoubleSide,
alphaMap: videoTexture,
});
const videoMesh = new THREE.Mesh(videoGeoPlane, videoMaterial);
videoMesh.position.set(0, 0, 0);
videoMesh.rotation.set(0, 0, 0);
scene.add(videoMesh);
6.循环机器模型
const controls = new OrbitControls(xj, web.domElement);
let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/gltf/");
dracoLoader.setDecoderConfig({ type: "js" });
let gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);
for (let i = 0; i < 10; i++) {
gltfLoader.load("./assets/robot.glb", (gltf) => {
gltf.scene.position.x = Math.random() * 10 - 5;
gltf.scene.position.y = Math.random() * 10 - 5;
gltf.scene.position.z = -Math.random() * 10 + 5;
gsap.to(gltf.scene.position, {
duration: Math.random() * 10 + 1,
// 在 y 轴上旋转 360 度
z: Math.PI * 10 + 50,
repeat: -1, // 无限循环
ease: "power1.out", // 缓动函数
delay: Math.random() * 2,
});
scene.add(gltf.scene);
});
}
7.添加光
const lh = new THREE.DirectionalLight(0x7d7dff, 1);
lh.position.set(0, 1, 0);
const lh1 = new THREE.DirectionalLight(0x0080ff, 0.5);
lh1.position.set(-1, 0, 0);
scene.add(lh1);
const lh2 = new THREE.DirectionalLight(0x7d7dff, 1);
lh1.position.set(0, 0, -3);
scene.add(lh2);
8.提醒
电脑cpu内存不够好 千万不要在循环机器人了或者不循环
