＜uniapp＞＜threejs＞在uniapp中，怎么使用threejs来显示3D图形？

前言

本专栏是基于uniapp实现手机端各种小功能的程序，并且基于各种通讯协议如http、websocekt等，实现手机端作为客户端（或者是手持机、PDA等），与服务端进行数据通讯的实例开发。

发文平台

优快云

环境配置

系统：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() {
   
   
			return {
   
   
				
			}