做淘宝客个人网站文章推广平台
前言
本专栏是基于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的主要功能如下：
- 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
- 在视图层操作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(