在 Magic Leap 上使用 MagicScript + Three.js 渲染 3D 图形：WebGL 入门实践

最新推荐文章于 2025-10-29 14:59:28 发布
原创 最新推荐文章于 2025-10-29 14:59:28 发布 · 703 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #3d #webgl #Magic Leap #WebGL开发 #JavaScript图形渲染 #空间计算应用开发

作者：科采通
标签：Magic Leap、MagicScript、Three.js、WebGL、空间计算

一、项目背景

Magic Leap 是一款支持空间计算的混合现实（MR）设备，开发者可通过多种方式为其开发应用，其中 MagicScript 是官方支持的 JavaScript 语言栈开发框架，支持 WebGL 与空间 UI 的原生整合。

本文将介绍如何使用 MagicScript 配合 Three.js 在 Magic Leap 上构建一个基础的 WebGL 应用，渲染一个可以旋转的 3D 立方体，实现从 JavaScript 代码直接操控三维场景。

产品资料：

Magic Leap 2 AR眼镜 | 企业级MR头显-科采通

二、环境准备

建议使用如下开发环境：

  • Magic Leap One 设备（Lumin OS v0.96.0）

  • Node.js 16+

  • magic-script-cli v2.1.1

  • Lumin SDK v0.21.0

  • magic-script-webgl-prism-controller 与 three 模块

安装开发工具：

 


                

        

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
【three.js】简介和本地部署

				
			

			

				

					蜗牛~~
				

				

					10-08
					
					6564
					
				

			

		

		

			
				
实现企业网站三维呈现，让企业形象更直观、更立体地展现给客户，打破传统平面展示模式，打造智慧、个性、创新的企业形象。因此我们可以访问b站大佬在国内搭建好的本地three.js官网，大家访问如下链接即可，当然也可以自己搭建，下面有讲解。什么是点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等基础概念，搞定一个最基础的场景和3d物体的显示。接着3d渲染要真实性，肯定离不开PBR，详细了解什么是PBR，PBR基于物理的光照原理的渲染,。由于访问three.js官网是国外的网站，非常慢。

			
		

	



                

            
              



	

		

			

				
					
threeJs 入门篇

				
			

			

				

					好川的博客
				

				

					08-08
					
					1万+
					
				

			

		

		

			
				
1.什么是threeJs

简单的说 ，就是一门 绘制 3D 的 javaScript 轻量级框架；
主要采用 ，HTML5 Canvas提供硬件3D加速渲染；
于是web 端 ，就能制作出 3D 系统 ，访问就能操作 ，十分方便。

文章目录1.什么是threeJsⅠ.为什么要学这门前沿技术Ⅱ.应用场景2. 学习Three .js  入门篇 （一）Ⅰ.安装下载Ⅱ. 创建场景、摄像机、渲染器（画布）Ⅲ. 创建坐标系Ⅳ.平面、立方体、球 的创建Ⅴ. 光源的创建Ⅵ.添加投影Ⅶ.鼠标操控三维场景3. 整合代码
Ⅰ

			
		

	



              


  
              

                


	

		

			

				
					
【Three.js--manual script】 1.basic

					
最新发布

				
			

			

				

					illhm的博客
				

				

					10-29
					
					548
					
				

			

		

		

			
				
其次有一个场景图 它是一个树状结构，由很多对象组成，比如图中包含了一个场景(Scene)对象 ，多个网格(Mesh)对象，光源(Light)对象，群组(Group)，三维物体(Object3D)，和摄像机(Camera)对象。网格(Mesh)对象可以理解为用一种特定的材质(Material)来绘制的一个特定的几何体(Geometry)。你传入一个场景(Scene)和一个摄像机(Camera)到渲染器(Renderer)中，然后它会将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上。

			
		

	





	

		

			

				
					
threejs概览

				
			

			

				

					目尽地平线
				

				

					02-15
					
					3386
					
				

			

		

		

			
				
本文讲述threejs的总体概况，希望从一个较高的角度看threejs到底能做什么

			
		

	



		

			
		



	

		

			

				
					
magic-script是一款基于JVM的脚本语言，目前主要是为magic-api项目设计

				
			

			

				

					05-02
				

			

		

		

			
				
magic-script是一款基于JVM的脚本语言，目前主要是为magic-api项目设计。magic-api，接口快速开发框架，通过Web页面配置，自动映射为HTTP接口；spider-flow，新一代爬虫平台，以图形化方式定义爬虫流程，不写代码即可完成爬虫

			
		

	





	

		

			

				
					
magic-script-components:MagicScript组件框架

				
			

			

				

					05-23
				

			

		

		

			
				
MagicScript组件
 MagicScript组件框架
安装
安装magic-script-cli ： 
npm install -g magic-script-cli
 创建一个新的MagicScript应用程序： 
magic-script init
 按照步骤。
 请求应用程序类型时，选择“组件”。
 从app文件夹安装所需的npm软件包： 
npm install
 生成并安装您的应用程序： 
magic-script build -i
 有关更多信息，请参阅《 MagicScript 。
例子
使用以下代码替换app.js内容，以实现更具交互性的用例： 
 import React from "react" ;
import { View , Text , Button } from "magic-script-components" ;
export default cl

			
		

	





	

		

			

          精选资源
				
					
threejs-leapjs:使用 Three.js 和 Leap Motion 控制器玩 jenga

				
			

			

				

					06-20
				

			

		

		

			
				
Three.js 是一个基于 WebGL 的 JavaScript 库，用于在网页上创建三维图形和动画。WebGL 是一种在浏览器中实现的 API，允许开发者在无需插件的情况下进行硬件加速的3D图形渲染。Three.js 提供了一个简单易用的接口，...

			
		

	





	

		

			

          精选资源
				
					
threejs_vr_box:使用Three.js的WebVR样机

				
			

			

				

					05-11
				

			

		

		

			
				
【标签】中的“threejs”指的是Three.js库，它是WebGL的一个高级封装，简化了3D渲染的过程，让开发者无需深入了解底层图形编程即可创建复杂的3D场景。“vr”代表虚拟现实，是该项目的核心特性，使用户可以通过VR设备...

			
		

	





	

		

			

				
					
虚实交互新突破：Three.js融合AR技术的孪生数据操控方法

				
			

			

				

					贝格前端工场的博客
				

				

					09-02
					
					957
					
				

			

		

		

			
				
空间穿越：厘米级空间锚定让虚拟模型"长"在物理设备上；手势革命：自然手势替代鼠标键盘，操作直觉提升10倍；实时闭环：操作指令200ms内驱动物理设备，形成双向控制流；普惠落地：千元手机即可实现工业级精度操控。当机械师隔空"捏"住虚拟螺栓完成装配，当工程师挥手调出隐藏的电流数据——人机交互的终极形态正在显现。"未来的工业操控，将没有屏幕与按钮，只有意念与现实的直接对话。—— MIT媒体实验室主任 Hiroshi Ishii。

			
		

	





	

		

			

          精选资源
				
					
three-leap:ThreeJS 的 Leap Motion 控制器

				
			

			

				

					07-04
				

			

		

		

			
				
6. **WebGL**：虽然不是直接的知识点，但理解WebGL的基础概念有助于更好地理解和使用Three.js，因为Three.js是建立在WebGL之上的。  7. **项目结构和版本控制**：理解开源项目的一般结构，以及版本控制系统（如Git）...

			
		

	





	

		

			

				
					
【亲测免费】 探索Magic UI：拖拽式WebGL UI代码生成器

				
			

			

				

					gitblog_00150的博客
				

				

					09-14
					
					689
					
				

			

		

		

			
				
探索Magic UI：拖拽式WebGL UI代码生成器
项目介绍
Magic UI 是一款基于WebGL技术的拖拽式UI代码生成应用。通过直观的拖拽操作，用户可以轻松创建复杂的用户界面，并自动生成相应的代码。无论是前端开发者还是设计师，都能在Magic UI中找到高效、便捷的UI设计解决方案。
项目技术分析
Magic UI的核心技术栈包括：

WebGL: 利用WebGL的高性能图形渲染能力，M...

			
		

	





	

		

			

				
					
【基础】Three.js的零基础入门篇（附案例代码）

				
			

			

				

					stay hungry, stay foolish
				

				

					10-27
					
					2万+
					
				

			

		

		

			
				
在使用Three.js时，初学者需要了解如何从零开始创建一个简单的3D场景。以下是创建步骤和一些注意点： 1. 初始化基本组件每个Three.js场景需要几个核心组件：场景（Scene）、相机（Camera）和渲染器（Renderer）。

			
		

	





	

		

			

				
					
Threejs简单介绍(含案例演示)

				
			

			

				

					土豆块嘎嘣脆的博客
				

				

					10-14
					
					1万+
					
				

			

		

		

			
				
编写canvas的方法

			
		

	





	

		

			

				
					
threejs官网

				
			

			

				

					u014291990的博客
				

				

					12-01
					
					1万+
					
				

			

		

		

			
				
Threejs官网中文文档：https://threejs.org/docs/index.html#manual/zh/threejs数学几何计算：http://www.webgl3d.cn/pages/001888/threejs基础教程：http://www.webgl3d.cn/pages/aac9ab/webgl基础教程：http://www.webgl3d.cn/pages/9bc0db/blender基础：http://www.webgl3d.cn/pages/00cfc0/

			
		

	





	

		

			

				
					
【Three.js】入门必读

					
热门推荐

				
			

			

				

					liangzhenmeng的博客
				

				

					09-13
					
					3万+
					
				

			

		

		

			
				
Three.js的官网在国外, 访问速度比较慢, 而我们需要经常参考和因此, 考虑将Three.js的官网部署到本地。

			
		

	





	

		

			

				
					
前端前沿web 3d可视化技术 ThreeJS学习全记录

				
			

			

				

					Beatingworldline的博客
				

				

					03-11
					
					1万+
					
				

			

		

		

			
				
就像前端需要webpack来进行模块化开发  three JS也需要一个对应的工具，他就是PARCEL https://www.parceljs.cn/随着浏览器性能和网络带宽的提升  使得3D技术不再是桌面的专利  打破传统平面展示模式。Threejs封装了WebGL的底层细节，可拓展性强，有很多开源的插件和工具，更易上手。就像2G时代文字信息是主要传输媒介  3G时代的图片  4G时代的视频。拷贝项目到本地即可查看文档  案例文件  使用编辑器等。随着硬件性能与技术的提升，未来的前端也一定是3D的。

			
		

	





	

		

			

				
					
Three.js 入门篇

				
			

			

				

					好好学习,天天向上
				

				

					01-23
					
					4040
					
				

			

		

		

			
				
Three.js 是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

			
		

	





	

		

			

				
					
Three.js（three入门）

				
			

			

				

					yong_su的博客
				

				

					02-22
					
					1万+
					
				

			

		

		

			
				
Three.js是用JavaScript编写的一个第三方库，用于实现很多的3D功能，它是基于WebGL进行封装的。而WebGL又是由OpenGL ES2.0+Javascript进行封装的，而OpenGLES 2.0又是OpenGL 三维图形 API 的一个子集，而OpenGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。

			
		

	





	

		

			

				
					
『Three.js』入门教程

				
			

			

				

					ReturnTmp的博客
				

				

					10-28
					
					2万+
					
				

			

		

		

			
				
目的：方便模块化进行three.js项目的学习和开发Building a web app with Parcel | Parcel 中文网。

			
		

	





	

		

			

				
					
LeapMotion手势识别与three.js交互实例解析

				
			

			

				

					
				

			

		

		

			
				
描述中提到的“基于leapmotion的js例子”意味着这些例子是用JavaScript语言编写的，而且与three.js库结合，可以实现手势控制下的3D图形渲染。  让我们从以下几个方面更详细地探讨这些知识点：  1. Leap Motion硬件与...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值