当前位置: 首页 > news >正文

<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的主要功能如下:

  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(

相关文章:

  • 无心剑中译戴维斯《悠闲》
  • uni-app学习笔记十四-vue3中emit的使用
  • rabbitmq的使用介绍
  • 【TDengine源码阅读】举例说明pthread_once_t和PTHREAD_ONCE_INIT
  • PPT连同备注页(演讲者模式)一块转为PDF
  • 深入浅出IIC协议 - 从总线原理到FPGA实战开发 -- 第六篇:AXI4-Lite桥接设计
  • 鸿蒙仓颉开发语言实战教程:页面跳转和传参
  • Java多线程JUC
  • 2025.05.23 Axure 动态面板学习笔记
  • Linux 的编辑器--vim
  • Apache 高级配置实战:从连接保持到日志分析的完整指南
  • 对WireShark 中的UDP抓包数据进行解析
  • Php JIT 使用详解
  • 从智能提效到产品赋能的架构实践
  • 【HW系列】—web常规漏洞(SQL注入与XSS)
  • RocketMQ 5.0 核心概念与架构解析
  • python | vscode | 使用uv快速创建虚拟环境(实现一个项目一个虚拟环境,方便环境管理)
  • 【排序算法】典型排序算法和python 实现
  • 前端流行框架Vue3教程:28. Vue应用
  • 【排序算法】典型排序算法 Java实现
  • 纯mvc做的都有那些网站/seo点击工具帮你火21星热情
  • 企业网站seo数据/营销型制作网站公司
  • 什么网站做兼职最好/百度网页
  • 免费做网站靠谱么/自助发外链网站
  • 音乐 wordpress/郑州优化公司有哪些
  • 做网站的注意点/seo排名优化教程