如果匯入到 Three.js 中的 3D 模型沒有包含動畫，又或者需要讓模型與使用者互動產生動畫效果的話，Three.js 中可以直接的操作模型的座標、位置、縮放等等，但是若要讓動畫效果更加生動流暢，則可以使用 tween.js 這個開源的動畫補間套件來達成！

讓我們來看看這如何運作，首先，在 Three.js 中建立一個簡易的環境與模型

我們在玩手機遊戲時，應該多少都有看過第一次遊玩時，一步一步教我們要點哪裡的那種導引功能吧！這次要來介紹的套件就是讓網頁能夠快速、簡易的加上這個功能的Shepherd.js套件！

Demo專案(登入後查看效果)
官方Demo

這篇文章是這個系列的下集，還沒有看過上一篇的朋友可以參考：這裡

面試

當線上課程學習到一定程度以及個人作品的累積了幾個完整的作品後，我便開始了一連串的找工作行程，不過由於這時的我還沒有經驗，所以收到的面試通知並不多，我就抱持著盡量努力嘗試的想法，開始了這些面試之旅！

入行前端工程師到現在差不多一年左右，雖然還很菜，但是由於我是設計相關科系畢業後跨領域成為工程師的，應該可以給一些準備轉職的設計師或是設計科系的學生前端經驗的分享，但是由於我是台中人暫時沒有誇縣市找工作的打算，所以這些經驗分享主要都是以台中為主喔！

前端工程師在職場上常常會使用各種不同的按鈕特效，為了方便自己在工作時能迅速地套用，所以整理出一些常用的按鈕特效，也歡迎大家使用我撰寫的這些按鈕程式碼！

※文章內的特效按鈕皆使用scss

漸層淡入按鈕

See the Pen btn-1 by 劉育瑋 (@ecrjurxl) on CodePen.

索引

• RWD
• 置中
• 淡入淡出
• 樣式變數

Three.js有很多種載入模型的方式，在本文中使用的是筆者常用的載入方式，若有更好的方式歡迎留言建議。
在Three.js官方文件中有提到，建議使用.gltf格式的3D模型來進行外部模型的載入，可以得到更好的支援性及速度，所以若要載入的模型並非.gltf格式的檔案建議可以使用Blender來進行模型的製作以及模型的轉換(使用3D軟體轉換比較能夠確保轉出的結果接近自己想要的樣子，本文介紹主要以Blender為主，其他支援的3D軟體可以參考官方文件)，再由Three.js的載入器將模型載入。

Chart.js是一款輕巧但又包含了豐富內容的圖表套件，它可以幫助我們快速的製作出各種美觀的圖表，種類包含了折線圖(Line Chart)、圓餅圖(Pie Chart)、甜甜圈圖(Doughnut Chart)、雷達圖(Radar Chart)等多種圖形，並且每種圖形都提供了高度的客製化功能，滿足各種不同需求，在這裡介紹快速上手的方法，若想知道更多關於Chart.js可以做到的事情可以看看他們的官方文件

React

React是在所有使用React的環境中共用的函式庫。
React 是 React 函式庫的進入點。 如果你使用script標籤載入 React,這些頂層 API 可以在 React 全域變數使用。如果你使用 ES6 撰寫並使用 npm，你可以寫成 import React from ‘react’ 。如果你使用 ES5 撰寫並使用 npm，你可以寫成 var React = require(‘react’) 。

ReactDOM

React可能不是使用於網頁環境，ReactDOM則是專門用於網頁環境的函示庫。
如果使用 script 標籤載入 React 這些頂層 API 就可以在全域 ReactDOM 上找到。如果你使用 ES6 和 npm，你可以寫成 import ReactDOM from ‘react-dom’。如果你使用 ES5 和 npm，你可以寫成 var ReactDOM = require(‘react-dom’)。

哈囉！首先歡迎來到六魚丸的部落格，讓我先自我介紹一下，我是六魚丸，設計科系畢業，在大二的時候開始學網頁逐漸踏入前端領域，畢業後的第一份工作是到資訊公司擔任前端工程師，目前雖然只是一個待九個月的菜鳥，但是也累積了一些經驗和知識，心想如果再不寫下來，就會忘記啦！所以建立了一個部落格平台，開始記錄一些工作上、知識上的內容！