泸州工投建设集团网站三网合一网站系统

前言

本专栏是基于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(