自个网站,绍兴seo外包,三门峡网站制作公司,wordpress 头像带链接目录
一、案例截图
二、安装Three.js
三、代码实现
四、Gitee源码 一、案例截图 二、安装Three.js
npm install three
三、代码实现
模型资源我是放在public文件夹下面的#xff1a; 完整代码#xff1a;
templatedivdiv refcontainer 完整代码
templatedivdiv refcontainer/div/div
/templatescript
import * as THREE from three;
import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader;
import { OrbitControls } from three/examples/jsm/controls/OrbitControls;
export default {name: HomeView,data() {return {scene: null,camera: null,renderer: null,model: null,controls: null,width: window.innerWidth,height: window.innerHeight,};},mounted() {this.initThreeJs();this.loadModel();this.animate();},beforeDestroy() {if (this.renderer) {this.renderer.dispose();}},methods: {initThreeJs() {// 初始化场景this.scene new THREE.Scene();// this.scene.background new THREE.Color(0xffffff); // 白色背景// 设置相机this.camera new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 5000);// 设置相机初始位置this.camera.position.set(0, 0.3, 1); // x 0, y 5, z 10可以根据需要调整这些值// 设置相机旋转角度以弧度为单位this.camera.rotation.x THREE.MathUtils.degToRad(-30); // 绕x轴旋转 -30度this.camera.rotation.y THREE.MathUtils.degToRad(0); // 绕y轴旋转 0度this.camera.rotation.z THREE.MathUtils.degToRad(0); // 绕z轴旋转 0度// 创建渲染器this.renderer new THREE.WebGLRenderer();this.renderer.setSize(this.width, this.height);this.$refs.container.appendChild(this.renderer.domElement);// 添加灯光const ambientLight new THREE.AmbientLight(0xffffff, 1);this.scene.add(ambientLight);const pointLight new THREE.PointLight(0xffffff, 1);pointLight.position.set(10, 10, 10);this.scene.add(pointLight);// 添加 OrbitControlsthis.controls new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableDamping true; // 启用阻尼this.controls.dampingFactor 0.25; // 阻尼因子越大越慢this.controls.enableZoom true; // 启用缩放},loadModel() {const loader new GLTFLoader();loader.load(/obj.gltf, // 模型的路径支持http请求(gltf) {this.model gltf.scene;this.scene.add(this.model);},undefined,(error) {console.error(模型加载错误:, error);});},animate() {requestAnimationFrame(this.animate);if (this.model) {this.model.rotation.y 0.01; // 让模型旋转}this.renderer.render(this.scene, this.camera);},}
};
/scriptstyle scoped langscss/style
四、Gitee源码
码云地址Vue2Three.js加载并展示一个三维模型
