Three.js--》穿越虚拟门槛打造的3D登录界面

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
 
// 加载3D模型
const loader = new GLTFLoader();
loader.load('models/login.gltf', function (gltf) {
  scene.add(gltf.scene);
}, undefined, function (error) {
  console.error(error);
});
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

这段代码演示了如何使用Three.js加载一个GLTF格式的3D登录界面模型，并将其渲染到网页中。它包括了基本的场景设置、相机定位、渲染器初始化和模型加载。在模型加载完成后，会将其添加到场景中，并启动动画循环进行渲染。