石頭智能洗地機A10 Plus體驗：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機A10 Plus。從這個產品名上就不難看出，這次石頭推出的并不是常見的掃地機器
Hello，大家好，我是 Sunday。
說起 3D 模型構建，大家最先想到的應該就是 ThreeJS 了。但是 ThreeJS 本身是基于 WebGL 構建的 3D 模型庫，學習曲線較高。特別是和 Vue 這種框架配合使用時，很多同學就需要花費較多的時間才可以掌握使用的方式。
那么有沒有更加簡單、易上手的框架呢？答案肯定是 有的，它就是咱們今天要說的主角 TresJS。
圖片
TresJS 提供了完善的中文文檔，我們可以直接在他的官網查看 TresJS 的使用方式。
目前 TresJS 直接兼容 vue3 和 vite，我們可以通過如下方式對 TresJS 進行使用：
import { createApp } from 'vue'import Tres from '@tresjs/core'import App from './App.vue'export const app = createApp(App)app.use(Tres)app.mount('#app')<script setup lang="ts">import { TresCanvas } from '@tresjs/core'</script><template> <TresCanvas> <!-- Your scene here --> </TresCanvas></template>學習一個庫，最好的方式就是通過文檔進行學習。TresJS 提供了完善的中文文檔，以剛才使用的 TresCanvas 為例：
根據文檔中的內容，我們可以很輕松的了解 TresCanvas 組件 的使用。
那么接下來，就讓我們利用 TresJS 來完成一個基本的 3D 模型展示
在使用 TresJS 之前，我們先簡單了解下 3D 場景構建基礎，我們來看下面的圖：
圖片
在整個 3D 場景中，包含 4 個關鍵概念：
<script setup>import { TresCanvas } from '@tresjs/core'</script><template> <TresCanvas clear-color="#82DBC5"> <TresPerspectiveCamera /> </TresCanvas></template><style>* { margin: 0; padding: 0;}#app { height: 100vh; width: 100vw;}</style><TresCanvas clear-color="#82DBC5"> <!-- 相機 --> <TresPerspectiveCamera /> <!-- 模型 --> <TresMesh> <TresBoxGeometry /> <TresMeshNormalMaterial /> </TresMesh></TresCanvas><TresMesh :rotation="[Math.PI / 4, Math.PI / 2, 0]"> <TresBoxGeometry /> <TresMeshNormalMaterial /></TresMesh>此時渲染效果如下：
圖片
今天，咱們通過一個簡單的示例了解了 TresJS 的用法。如果感覺 ThreeJS 學習復雜度高的同學，那么可以看下 TresJS ，或許可以為你帶來不一樣的開發體驗呢？
本文鏈接：http://m.www897cc.com/showinfo-26-93082-0.htmlVue 構建 3D 模型全新方案，TresJS 火啦？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號