WEB 3D技术以vue3+vite环境为例讲解vue项目中使用three

上文 WEB 3D 技术，通过node环境创建一个three案例中我们打造了自己的第一个Web 3D界面
那么今天我们就来结合vue来开发我们的3D界面

这里我们先创建一个文件夹作为文件目录千万不要放C盘
在这里插入图片描述
我们依旧是在终端执行命令

npm init vite@latest

输入一下项目名称
在这里插入图片描述
这里我们选择第二个 vue框架

这里为了项目看着简单我们就选择js就好了

好那我们的第一个vue项目就打造好了

这里我们先用编辑器打开自己的项目

然后我们终端运行

npm install

然后终端运行

npm run dev

这样我们项目就起来了
在这里插入图片描述
浏览器访问链接即可看到我们的项目效果啦

然后我们要安装一下three
终端执行

npm install three

看到 package.json 这时我们的 three就进来了
在这里插入图片描述
然后我们在 App.vue组件编写代码如下

<script setup>import * as THREE from "three";//创建场景const scene = new THREE.Scene();//创建相机const camera = new THREE.PerspectiveCamera(45, //视角 视角越大  能看到的范围就越大window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好0.1,  //近平面  相机能看到最近的距离1000  //远平面  相机能看到最远的距离);//c创建一个canvas容器  并追加到 body上const renderer = new THREE.WebGLRenderer(0);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);//创建一个几何体const geometry = new THREE.BoxGeometry(1, 1, 1);//创建材质const material = new THREE.MeshBasicMaterial({ color:0x08ffe });//创建网格const cube = new THREE.Mesh(geometry, material);//将网格添加到场景中scene.add(cube);//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的camera.position.z = 5;//设置相机默认看向哪里   三个 0  代表 默认看向原点camera.lookAt(0, 0, 0);//将内容渲染到元素上renderer.render(scene, camera);function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();
</script><template><div></div>
</template><style>
*{margin: 0;padding: 0;
}
canvas {display: block;position: fixed;left: 0;top: 0;width: 108vw;height: 108vh;
}
</style>