Vue+Three.js搭建项目

最新推荐文章于 2025-03-12 09:24:01 发布

原创最新推荐文章于 2025-03-12 09:24:01 发布 · 948 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #vue

本文介绍了如何使用Vue结合Three.js创建一个基础的3D项目。首先通过脚手架创建Vue项目，然后安装并引入Three.js库。接着，创建一个新的JS文件，构建场景、相机、物体，使用WebGLRenderer进行渲染，并添加OrbitControls实现相机控制。最后，在Vue组件中导入这个JS文件，完成项目的基本设置。

Vue+Three.js搭建项目
1、创建好脚手架以后，首先对下载并安装three.js
在这里插入图片描述
2、新建一个js文件，three.js项目运行最基础的内容，如图所示

// An highlighted block
import * as THREE from "three";
//导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
//Clock该对象用于跟踪时间
import { Clock } from "three";
//控制物体移动
//1.创建场景
const scene = new THREE.Scene();
//2.创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
//3.设置相机位置
camera.position.set(0,0,10)
scene.add(camera);
//添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00});
//根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
//将几何体添加到场景中
scene.add(cube);
//初始化渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
//使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera);
//创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);
//添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper);
//设置时钟
const clock = new THREE.Clock();

function render(){
    renderer.render(scene,camera);
    //渲染下一帧的时候就会调用
    requestAnimationFrame(render);
}
render();