three3D的vite+vue版本基础代码

自己稍微处理一下目录结构

javascript 复制代码
<script setup>
  // 导入three.js 
import  * as THREE from 'three'

// 创建场景
const scene =new THREE.Scene();

// 创建相机
const camera =new THREE.PerspectiveCamera(
    45, //视角
    window.innerWidth / window.innerHeight, //宽高比
    0.1, // 近平面
    1000 // 远平面
);

// 创建渲染器
const renderer= new THREE.WebGL1Renderer();
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:0x00ff00});
// 创建网络
const cube = new THREE.Mesh(geometry,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.02;

    // 渲染
    renderer.render(scene,camera);
}


animate()
</script>

<template>

</template>

<style>
*{
  margin: 0;
  padding: 0;
}

canvas{
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

</style>

效果:

three3D

相关推荐
ai小鬼头38 分钟前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz38 分钟前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子41 分钟前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边41 分钟前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客42 分钟前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua42 分钟前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb88843 分钟前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家44 分钟前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css