vue+three安装

最新推荐文章于 2024-05-04 19:05:28 发布

少年包青菜

最新推荐文章于 2024-05-04 19:05:28 发布

阅读量500

点赞数

文章标签： vue.js javascript 数码相机

本文链接：https://blog.csdn.net/m0_50884068/article/details/129133591

版权

// 安装依赖
npm install three @types/three

// 模板
<template>
  <div>
    
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as THREE from "three";
// 创建场景
const scene = new THREE.Scene();
// 创建透明相机参数1角度,参数2宽/高,参数3最近距离,参数4最远距离
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器得大小
renderer.setSize( window.innerWidth, window.innerHeight );
// 将渲染器添加到body中
document.body.appendChild( renderer.domElement );
// 创建一个立方体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 创建材质
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 创建网格
const cube = new THREE.Mesh( geometry, material );
// 添加到场景
scene.add( cube );
// 距离
camera.position.z = 5;
const init = () => {
  // 循环方法
  requestAnimationFrame( init );
  // 场景和相机放到渲染器中
  renderer.render( scene, camera );
  // 让物体动起来
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
}
onMounted(()=>{
  init()
})
</script>

<style scoped>

</style>