Blue带你在vue中简单使用three.js-CSDN博客

本文链接：https://blog.csdn.net/m0_75148088/article/details/140022083

第一步：在自己的vue项目的文件夹右击鼠标

碎碎念：

Hello,hello!这里是Blue,本篇文章是俺结合自己学习three.js的路程所写的文章，嗯，因为最开始学的教程并没有结合vue，直接是js上面引文件使用，这就导致后面学习了框架却不知道怎么使用了，空有一种，有力无法使的感脚。所以我就写下这篇文章，为还在新手期的宝子们提供思路。好了，废话不多说，开始我们的正文。\(￣︶￣*\))

食用指南

第一步：创建一个vue项目

相信学过vue的宝子们，这点无疑是会的，本文核心也是讲解vue如何使用three.js，所以这里就不会去一步步的讲了。（如果不会的话，俺会尽快出一篇文章来讲解如何创建vue项目的）

第二步：安装three.js依赖

在终端输入以下指令：

npm install three

防止宝子们不会终端，也不知道怎么输入以下指令，俺会用图文来帮助大家的！！

第一步：在自己的vue项目的文件夹右击鼠标

第二步：结合图片标注顺序动手

上面的图片我标注了顺序了，宝子们跟着来就好了！！！

第三步：简单使用three.js

第一步：导包

在<script>里面我们导入以下语句

import * as THREE from "three";

就像这样：

然后我们就可以根据自己学习过的three.js使用啦！！！举个例子

第二步：使用

我们建立一个函数:

ww() {}

在这个函数里面我们写下three.js的使用

methods:{
ww(){
//创建场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(
  45,//视角
  window.innerWidth / window.innerHeight,//宽高比
  0.1,//近平面
  1000//远平面
);
//创建渲染器
const render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);

//创建几何体
const geomerty = new THREE.BoxGeometry(1, 1, 1);
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
//创建网格
const cube = new THREE.Mesh(geomerty, material);

//将网格添加到场景中
scene.add(cube);
//设置相机位置
camera.position.z = 5;
camera.lookAt(0, 0, 0);
//渲染函数
function animate() {
  requestAnimationFrame(animate);
  //旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  //渲染
  render.render(scene, camera);
}
animate();
}
}

然后在 mounted(){}钩子函数里面我们去调用刚才写的ww(){}函数