Technology is used
1. three version^0.156.1
2. dat.gui version ^0.7.9 debugging tool
3. gsap version ^3.12.2 animation library
vue2 2.6.12
Support vue3
Create a new three file index.js in the src folder
illustrate :
I modified it based on the original link to teach you how to write a cool 3D landing page with three.js – Nuggets blogger. I am also new to three and it hasn’t been long. There are some who are not good at writing. Include more.
I won’t publish our project information. If you need it, you can go to Baidu or get it from the original blogger.
//Introduce three.js
import * as THREE from "three";
//Import track controller
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
//Import animation library
import gsap from "gsap";
//Import dat.gui
import * as dat from "dat.gui";
let dirigible = null;
const LoginDom = (dom) => {
//Create a three-dimensional scene
const scene = new THREE.Scene();
//Create texture loader
const textureLoader = new THREE.TextureLoader();
//Import texture map basic map
const chungeLoader = textureLoader.load(
require("@/assets/images/earth_bg.png") // Plane map of the earth
);
//Create a circle object (shape)
const geometry = new THREE.SphereGeometry(70, 70, 70); //A circle with a length, width and height of 80
//Create material (appearance)
const material = new THREE.MeshLambertMaterial({
// color: 0x0000ff, //Set material color
transparent: true, //Turn on transparency
opacity: 0.8, //Set transparency
map: chungeLoader,
});
//Create a grid model object
const mesh = new THREE.Mesh(geometry, material); //Network model object Mesh
//Combined object for rotation
const Sphere_Group = new THREE.Group();
Sphere_Group.add(mesh);
Sphere_Group.position.x = -200;
Sphere_Group.position.y = 100;
Sphere_Group.position.z = 200;
scene.add(Sphere_Group);
const event = {};
event.onLoad = (e) => {
console.log("Model loading completed", e);
};
event.onProgress = (url, num, total) => {
console.log("Percentage of model loading progress", ((num / total) * 100).toFixed(2) + "%");
};
event.onError = (e) => {
console.log("Model loading failed", e);
};
//Set the loading manager model loading complete failure progress callback
const loadingManager = new THREE.LoadingManager(
event.onLoad,
event.onProgress,
event.onError
);
//Create model loader and add model loading progress callback
let loader = new GLTFLoader(loadingManager);
//Load model
loader.load(
"xxx.glb",
(glft) => {
//Set the position of the model
glft.scene.position.set(191.6, 61.556, -550.2);
dirigible = glft.scene;
scene.add(glft.scene);
//Update camera position
camera.position.set(300, 300, 300);
// re-render
renderer.render(scene, camera);
//Enter animation
gsap.to(dirigible.position, {
x: 191.6,
y: 61.556,
z: -350.2,
duration: 1.5,
yoyo: true,
});
}
);
//Add parallel light source
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
const light = new THREE.DirectionalLight(0xffffff, 2); //Directional light source, color: light color, intensity: light intensity
scene.add(ambient);
// light.position.set(200, 300, 400);
scene.add(light);
//Create a perspective camera, window width, window height
const width = window.innerWidth,
height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
//Set camera position
camera.position.set(300, 300, 300);
//Set camera direction
camera.lookAt(0, 0, 0);
//Create auxiliary coordinate axis
// const axesHelper = new THREE.AxesHelper(120); //Parameter 200 indicates the coordinate system size, which can be set according to the scene size
// scene.add(axesHelper);
//Create a WebGL renderer
//The background color becomes transparent
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearAlpha(0.1);
renderer.setSize(width, height); //Set the size of the rendering area
renderer.render(scene, camera); //Perform rendering operation, specify scene and camera as parameters
// const controls = new OrbitControls(camera, renderer.domElement); //Create control object
const controls = new OrbitControls(camera, renderer.domElement); //Create control object
//Set the controller damping to make the controller more realistic. .update() must be called in the animation loop.
controls.enableDamping = false;
//Whether it can be zoomed
controls.enableZoom = false;
//Whether to automatically rotate
controls.autoRotate = false;
//Set the farthest distance of the camera from the origin
controls.minDistance = 1;
//Set the farthest distance of the camera from the origin
// controls.maxDistance = 500;
//Whether to enable right-click dragging
controls.enablePan = false;
// Whether it can be rotated
controls.enabled = true;
dom.appendChild(renderer.domElement); // Pass data to the interface
// Set the clock
const clock = new THREE.Clock();
//Render according to each frame of the browser
const render = () => {
let time = clock.getElapsedTime();
controls.update();
renderer.render(scene, camera);
Sphere_Group.rotateY(0.001);
// The render function will be called when rendering the next frame.
requestAnimationFrame(render);
};
render();
window.addEventListener("mouseup", () => {
//The mouse loses click focus and restores the camera's initial position
camera.position.set(300, 300, 300);
});
// Monitor screen changes and update the rendering screen
window.addEventListener("resize", () => {
console.log("The screen has changed");
//Update camera
camera.aspect = window.innerWidth / window.innerHeight;
//Update the camera's projection matrix
camera.updateProjectionMatrix();
//Update renderer
renderer.setSize(window.innerWidth, window.innerHeight);
// Update the pixel ratio of the set renderer
renderer.setPixelRatio(window.devicePixelRatio);
});
};
//Method to be called when logging in
const modelLogin = (callback) => {
// Execute the animation script. After the animation ends, execute the callback and enter the login interface.
gsap.to(dirigible.position, {
x: -300,
y: 20,
z: 150,
duration: 1.5,
yoyo: true,
});
gsap.to(dirigible.scale, {
x: 0.0001,
y: 0.0001,
z: 0.0001,
duration: 1.5,
yoyo: true,
onComplete: () => {
console.log("Animation completed");
callback(true);
},
});
gsap.to(dirigible.rotation, {
x: 0.04,
y: -1,
z: 0,
// z: -0.59,
duration: 1,
yoyo: true,
// repeat: -1,
});
};
export { LoginDom, modelLogin };
<template>
<div class="login">
// three containers
<div ref="login_three" id="login-three-container"></div>
</div>
</template>
<script>
import { LoginDom, modelLogin } from "@/three";
export default {
name: "Login",
data() {
return {
};
},
mounted() {
// Pass the container to three
LoginDom(this.$refs.login_three);
},
methods: {
login () {
function f(param) {
// If true, execute jump logic
if (param) {
// Jump to the homepage or other interfaces
}
}
// Execute model flight animation
modelLogin(f);
}
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
</style>