<uniapp><threejs>在uniapp中,怎么使用threejs来显示3D图形?
前言
本专栏是基于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(