VUE3架构threejs 基础vite开发环境npm方式的安装流程

xiefandaren

1.安装vite框架环境

1. npm create vite@latest my-xiefan-map -- --template vue

复制代码

my-xiefan-map是你得工程文件 你可以改成自己得


2.然后安装npm

cd到安装目录下面得生成子目录

1. npm install

复制代码

3.安装less，css预处理插件

1. npm i less-loader less --save-dev

复制代码

4.安装threejs依赖

1. npm install three

复制代码

如果安装历史版本得152

1. npm install three@0.152.0

复制代码

5.添加在根目录得vite.config.js相对路径配置代码
根目录--
--vite.config.js

添加如下代码

1.   base: "./",//等同于  assetsPublicPath :'./'

复制代码

6.运行跑项目

1. npm run dev

复制代码

7.rest一下全局得默认css
在如下目录
--my-xiefan-map
--src
  --style.css

把如下rest全局css粘贴上去

点击查看

8扫尾derco压缩

1. gltf-pipeline -i model.glb -o modelDraco.glb -d
   

复制代码

9安装ajx插件

1. npm install axios
   

复制代码

10 vue3场景基础组件代码

1. <!--
   
2. * @Author: xiefan 4033638634@qq.com
   
3. * @Date: 2023-05-20 23:11:17
   
4. * @LastEditors: xiefan 4033638634@qq.com
   
5. * @LastEditTime: 2023-05-20 23:31:52
   
6. * @FilePath: \7e:\project\2023\5\20 ts学习\my-xiefan-map\src\components\threejs.vue
   
7. * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
   
8. -->
   
9. <script setup >
   
10. import { reactive, toRefs, ref, computed, onMounted } from 'vue'
    
11. import * as THREE from 'three';
    
12. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
    
13. 
    
14. const scene = new THREE.Scene();
    
15. const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    
16. 
    
17. const renderer = new THREE.WebGLRenderer();
    
18. renderer.setSize(window.innerWidth, window.innerHeight);
    
19. const geometry = new THREE.BoxGeometry(1, 1, 1);
    
20. const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    
21. const cube = new THREE.Mesh(geometry, material);
    
22. scene.add(cube);
    
23. camera.position.z = 5;
    
24. const controls = new OrbitControls( camera, renderer.domElement );
    
25. function animate() {
    
26.     requestAnimationFrame(animate);
    
27. 
    
28.     cube.rotation.x += 0.01;
    
29.     cube.rotation.y += 0.01;
    
30.     controls.update()
    
31.     renderer.render(scene, camera);
    
32. }
    
33. animate();
    
34. 
    
35. function onWindowResize() {
    
36. 
    
37. var SCREEN_WIDTH = window.innerWidth;
    
38. var SCREEN_HEIGHT = window.innerHeight;
    
39. // CSS3renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    
40. renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    
41. camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    
42. camera.updateProjectionMatrix();
    
43. 
    
44. }
    
45. 
    
46. window.addEventListener('resize', onWindowResize);//添加窗口改变相机刷新时间
    
47. 
    
48. 
    
49. onMounted(() => {
    
50.     const threediv = document.getElementById('three')
    
51.     threediv.appendChild(renderer.domElement);
    
52. })
    
53. </script>
    
54. <template>
    
55.     <div id="three">
    
56.     </div>
    
57.     <div class="title"> 谢凡threejs+vue3得结合操作</div>
    
58. </template>
    
59. 
    
60. <style scoped lang='less'>
    
61. .title{
    
62.     width: 100vw;
    
63.     height: 100vh;
    
64.     position: absolute;
    
65.     margin: auto;
    
66.     top:60px;
    
67.     color:white;
    
68.     text-align: center;
    
69.     font-size: 30px;
    
70.     // font-weight: bold;
    
71.     pointer-events: none;
    
72. }
    
73. </style>
    

复制代码

---

这个组件代码得在线效果

访问地址
https://www.xiefansq.cn/threejsP/2023/5/21/

---