前言

本專欄是基于uniapp實現手機端各種小功能的程序，并且基于各種通訊協議如http、websocekt等，實現手機端作為客戶端（或者是手持機、PDA等），與服務端進行數據通訊的實例開發。

發文平臺

CSDN

環境配置

系統：windows
平臺：visual studio code、HBuilderX（uniapp開發）
語言：javascript、html、vue
庫：three.js

概述

本文研究一下在uniapp中，如何添加threejs來顯示三維圖形，尤其是在app端實現3D圖形顯示。
參考鏈接：
1、threejs官網：
https://threejs.org/

2、uniapp官網：
https://uniapp.dcloud.net.cn/

1、uniapp中添加threejs的方案

uniapp提供了一種功能，叫做renderjs，renderjs的主要功能如下：

1. 大幅降低邏輯層和視圖層的通訊損耗，提供高性能視圖交互能力
2. 在視圖層操作dom，運行 for web 的 js庫

更具體的介紹請參考uniapp官網介紹：
https://uniapp.dcloud.net.cn/tutorial/renderjs.html

本文會基于uniapp提供的renderjs功能，來實現threejs庫的添加與使用。
首先，我們使用HBuilderX創建一個uniapp項目，打開默認的index頁面，刪除默認的代碼，首先我們添加UI代碼：

<template><view class="container"><view class="head-line"><text>行星演示</text></view><view class="three-view"><!-- 此view處渲染3D圖形 --></view></view>
</template>

如上圖，非常簡單，我們創建一個view元素，用于容納threejs來渲染。
接下來就是要添加threejs代碼，但是我們不能在默認的script中直接編寫，而是要新建一個script代碼塊，如下：

<script module="test3d" lang="renderjs">export default{data(