<template>
<div id="app">
<div id="container"></div>
</div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import Stats from "three/addons/libs/stats.module.js";
export default {
data() {
return {
mesh: null,
camera: null,
scene: null,
renderer: null,
controls: null,
stats: "",
};
},
mounted() {
this.init();
},
methods: {
// 初始化
init() {
this.createScene(); // 创建场景
this.loadGLTF(); // 加载GLTF模型
this.createLight(); // 创建光源
this.createCamera(); // 创建相机
this.createRender(); // 创建渲染器
this.createControls(); // 创建控件对象
this.render(); // 渲染
},
// 创建场景
createScene() {
this.scene = new THREE.Scene();
},
// 加载GLTF模型
loadGLTF() {
const loader = new GLTFLoader();
loader.load(`/DF10A.gltf`, (gltf) => {
this.scene.add(gltf.scene);
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Objects
});
},
// 创建光源
createLight() {
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 1); // 创建环境光
this.scene.add(ambientLight); // 将环境光添加到场景
const spotLight = new THREE.SpotLight(0xffffff); // 创建聚光灯
spotLight.position.set(150, 150, 150);
spotLight.castShadow = true;
this.scene.add(spotLight);
},
// 创建相机
createCamera() {
const element = document.getElementById("container");
const width = element.clientWidth; // 窗口宽度
const height = element.clientHeight; // 窗口高度
const k = width / height; // 窗口宽高比
// PerspectiveCamera( fov, aspect, near, far )
this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000);
this.camera.position.set(10, 10, 10); // 设置相机位置
this.camera.lookAt(new THREE.Vector3(10, 40, 0)); // 设置相机方向
this.scene.add(this.camera);
},
// 创建渲染器
createRender() {
const element = document.getElementById("container");
this.stats = new Stats();
element.appendChild(this.stats.dom);
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setSize(element.clientWidth, element.clientHeight); // 设置渲染区域尺寸
this.renderer.shadowMap.enabled = true; // 显示阴影
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.renderer.setClearColor(0xffffff, 1); // 设置背景颜色
element.appendChild(this.renderer.domElement);
},
render() {
if (this.mesh) {
this.mesh.rotation.z += 0.006;
}
//通知stats画面已被重新渲染了
this.stats.update();
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render);
},
// 创建控件对象
createControls() {
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
},
},
};
</script>
<style>
html,
body,
#app,
#container {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
</style>
three.js 加载gltf模型
最新推荐文章于 2023-12-10 10:35:16 发布