ThreeJS vue3.0 立方体如此简单

vue3.0 引用 three.js

cnpm install three -S
在使用的页面 import * as Three from ‘three’
使用three绘制最简单正方体

<template><div class="Create"></div>
</template>
<script>
import * as Three from 'three'
export default {name: 'Create',data () {return {}},setup () {// 1、创建场景和摄像机const scene = new Three.Scene()// 2、创建摄像机 PerspectiveCamera('视角', '指定投影窗口长宽比', '从距离摄像机多远开始渲染', '截止多远停止渲染100')const camera = new Three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 2, 1000)// 3、创建ThreeJs 渲染器const renderer = new Three.WebGLRenderer({ antialias: true })// 设置渲染器场景大小renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 创建几何模型 BoxGeometry('x轴', '轴', 'z轴')const geometry = new Three.BoxGeometry(2, 2, 2)// 创建纹理贴图const texture = new Three.TextureLoader().load(require('../assets/img/bg-01.jpg'))// 添加材质// const material = new Three.MeshBasicMaterial({ color: 0x00ff00 })const material = new Three.MeshBasicMaterial({ map: texture })// 创建网格对象const cube = new Three.Mesh(geometry, material)// 添加到场景中去scene.add(cube)// 添加帧渲染const animate = () => {requestAnimationFrame(animate)// 网格旋转cube.rotation.x += 0.01cube.rotation.y += 0.01// 渲染场景renderer.render(scene, camera)}animate()// 摄影机空间Z轴camera.position.z = 5// 自适应window.addEventListener('resize', () => {// 初始化摄像机camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()// 初始化渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight)})}
}
</script>

ThreeJS vue3.0 立方体如此简单相关推荐

Vue3.0源码解读 - 响应式系统
一.目标对象标识 ** 类似于渲染系统,vue3.0的响应式系统也有自己的一套flag,用于标记目标对象target(通常是我们传入的数据源)的一些特性 export const enum React ...
【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言小伙伴们大家好.在前面一偏文章中我们把投票功能进行了简单的改造:引入了axios第三方库并进行了二次封装用于模拟请求服务器数据.同时添加了一 ...
基于vue3.0简单的页面使用
基于vue3.0简单的页面使用项目效果图项目文件图 package.json main.js App.vue views/Tutorial.vue views/TS.vue views/Docs. ...
VUE3.0 二. vue-cli3 配置指南
VUE3.0 二. vue-cli3配置指南一.vue.config.js 详解官网地址: https://cli.vuejs.org/zh/config/ 使用vue3 的时候需要添加一个vue ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式
作者:Mingle 转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ 前言背景:2019年2月6号,React 发布「16.8.0」版 ...
freemaker if 多个条件_第4天｜14天搞定Vue3.0，条件渲染和template
所谓的条件,指的就是满足什么条件,允许做什么事,不满足时,是不允许做的.如共享单车,规定满12周岁或以上才可以骑行,没满的则不被允许.学每门编程语言,条件语句都是必须熟练掌握的,Vue3.0的也不例外 ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
cli3解决 ie11语法错误 vue_【VUE3.0】它来了，2020年09月18日，Vue.js 3.0 正式发布，但是........
您曾见过凌晨的苹果发布会,那前端界的发布会你见过吗? 在Vue3正式发布前,Vue的作者尤雨溪发表主题演讲. 注意! 注意! 注意! 发布会中表示不建议大家立刻升级到Vue3.0版本,之前项目中某些依 ...

ThreeJS vue3.0 立方体如此简单

vue3.0 引用 three.js

ThreeJS vue3.0 立方体如此简单相关推荐

最新文章

热门文章