移动三维应用技术栈

移动端混合跨平台开发架构：#ReactNative、#Flutter、#Xamarin（沙姆兰）、#Uniapp

移动端结合三维技术：vue + three.js + 移动端混合开发架构 

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写

HBuilder 针对android应用打包apk文件、针对ios打包ipa文件

Vue使用Three.js创建三维场景：在index.html引入Three.js相关文件。

Threejs进阶之十四：在uniapp中使用threejs创建三维图形

在uniapp中使用threejs

• 一、uni-app介绍
• 二、新建uni-app项目
• 三、安装three.js库
• 四、在vue组件中引入three.js库
• 五、创建场景(Scene)和相机(Camera)
• 六、创建渲染器(Renderer)
• 七、创建物体和灯光
• 八、渲染场景(Scene)
• 九、运行测试
• 核心代码

一、uni-app介绍

uni-app是一个基于Vue.js框架的跨平台应用开发框架，可以使用一套代码构建多个平台（包括H5、iOS、Android、小程序等），极大地提升了开发效率和用户体验。

uni-app使用了weex技术作为底层支持，并且通过了微信、支付宝等主流应用市场的认证，具有良好的兼容性和稳定性。在uni-app中，我们可以使用Vue.js的常用语法以及特有的组件和API进行开发，同时也能够方便地调用原生API，实现更丰富的功能。

这里我们使用HBuilder开发uni-app项目，HBuilder是一款非常优秀的集成开发环境（IDE），主要用于快速开发HTML5应用和跨平台应用。它支持多种前端框架，如Vue、React等，并且可以直接调用原生API，方便开发者进行混合开发。

HBuilder的下载和安装非常简单，这里不再赘述，不了解的小伙伴们可以上其官网查看下载。

二、新建uni-app项目

打开HBuilder软件，点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）

在弹出的新建uni-app项目中选择左侧的uni-app，输入项目名称，在选择模板选项中选择默认模板，在vue版本选择中选择3，然后点击创建

系统根据上面的选择创建uni-app项目

三、安装three.js库

点击HBuilder菜单栏中的视图 -> 显示终端按钮，打开终端，在终端中输入
cnpm install three --save安装threejs库，这里用了淘宝镜像，使用cnpm名录，如果你网络较好，也可以使用npm进行安装

四、在vue组件中引入three.js库

在uniapp-threejs目录树中找到pages -> index目录，打开index.vue文件，删除系统创建时的模板内容，在template模板中新建一个id为canvas的canvas标签

<template><canvas id="canvas"> </canvas>
</template>

在script标签中引入threejs

import * as THREE from 'three'

五、创建场景(Scene)和相机(Camera)

首先定义全局变量scene，camera和renderer，然后在页面生命周期函数onReady()中创建场景和相机

let scene,camera，renderer
onReady() {// 创建场景和相机scene = new THREE.Scene()scene.background = new THREE.Color(0x808080)camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,10) camera.position.set(1,1,1)			
},

六、创建渲染器(Renderer)

定义全局变量renderer，在onReady()函数中创建渲染器

	// 创建渲染器renderer = new THREE.WebGLRenderer({antialias:true})renderer.setSize(window.innerWidth,window.innerHeight)const myCanvas = document.getElementById("canvas") myCanvas.appendChild(renderer.domElement)  

七、创建物体和灯光

	// 创建物体const geometry = new THREE.BoxGeometry( 1, 1, 1 );const material = new THREE.MeshLambertMaterial( {color: 0xffff00} );const cube = new THREE.Mesh( geometry, material );scene.add(cube);camera.lookAt(cube.position)// 环境光const light = new THREE.AmbientLight( 0x404040 ); // soft white lightscene.add( light );const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );scene.add( directionalLight );

八、渲染场景(Scene)

animate()
function animate() {requestAnimationFrame(animate)cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render(scene,camera)
}

九、运行测试

点击HBuilder工具类->运行->运行到浏览器，选择需要运行的浏览器，我这里选择Chrome浏览器，查看运行效果

核心代码

<template><canvas id="canvas"> </canvas>
</template>
<script>
import * as THREE from 'three'
let scene,camera,rendererexport default {data() {return {title: 'Hello'}},onLoad() {			},onReady() {// 创建场景和相机scene = new THREE.Scene()scene.background = new THREE.Color(0x808080)camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,10)camera.position.set(1,1,1)// 创建渲染器renderer = new THREE.WebGLRenderer({antialias:true})renderer.setSize(window.innerWidth,window.innerHeight)const myCanvas = document.getElementById("canvas") myCanvas.appendChild(renderer.domElement) // 创建物体const geometry = new THREE.BoxGeometry( 1, 1, 1 );const material = new THREE.MeshLambertMaterial( {color: 0xffff00} );const cube = new THREE.Mesh( geometry, material );scene.add(cube);camera.lookAt(cube.position)// 环境光const light = new THREE.AmbientLight( 0x404040 ); // soft white lightscene.add( light );const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );scene.add( directionalLight ); animate()function animate() {requestAnimationFrame(animate)cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render(scene,camera)}},methods: { 			}}
</script>
<style> 
</style>

文章来源:https://blog.csdn.net/w137160164/article/details/130675163
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：Threejs进阶之十四：在uniapp中使用threejs创建三维图形 如若内容造成侵权/违法违规/事实不符，请联系我的编程人生网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！