three.js使用GUI

2026-09-03

03-THREE.JS GUI使用

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></sc

Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]

不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修改源码来观察不同参数对模型的效果影响. demo效果如下: ![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200102004608083-2026036975.gif) 关键代码入口文件: function init()

ReactiveX 学习笔记（28）使用 RxJS + React.js 进行 GUI 编程

课题程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工程 # 安装 CLI $ npm install -g create-react-app # 创建新的应用程序 RxExample $ create-react-app rx-example --scripts-version=react-scripts-ts $ cd rx-example $ n

ReactiveX 学习笔记（27）使用 RxJS + Vue.js 进行 GUI 编程

课题程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工程 # 安装 Vue CLI $ npm install --global @vue/cli # 创建新的应用程序 RxExample $ vue create rx-example # 选择 Manually select features # 选择 Babel 和 TypeScript $ cd

我的three.js学习记录（二）

通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例上图是之前做的一个demo,有点丑,希望不要介意. 这个主要是外面一层包裹着天空盒, 然后里面是一个由开顶的立方体做成的房子(暂且理解为房子)以及里面的家具构成,其中包括可以播放视频的电视,一个可以照的镜子,导入的沙发模型等 2. 操作步骤 2.1 准备工作首先,我们需要上一篇文章的基础,这里不再赘述,我们直接进入主题,

我的three.js学习记录（三）

此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头判断部分的代码相互结合,弄一个新的东西,可以看下图说明这次的示例是我们可以通过一个摄像头隔空控制我们屏幕中的视频的播放. 原理其实也是很简单,我们看到的摄像头图像其实是通过获取到的图像数据然后再通过canvas 画上去的,这里有两层canvas 一层是我们的正常的摄像头输出,一层是我们的播放按钮

基于Babylon.js编写宇宙飞船模拟程序1——程序基础结构、物理引擎使用、三维罗盘

计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测试场景,按住qe键可以左右倾斜相机.可以在https://github.com/ljzc002/ljzc002.github.io/tree/master/test/Spacetest查看程序代码,因时间有限,github上的代码可能和本文中的代码有少许出入. 主要内容: 一.程序基础结构二.场景

Electron中使用sql.js操作SQLite数据库

推荐sql.js——一款纯js的sqlite工具. 一.关于sql.js sql.js(https://github.com/kripken/sql.js)通过使用Emscripten编译SQLite C代码,将SQLite移植到Webassembly. 它使用存储在内存中的虚拟数据库文件,因此不会保留对数据库所做的更改. 但是,它允许您导入任何现有的sqlite文件,并将创建的数据库导出为JavaScript类型的数组. 这里没有C绑定或node-gyp编译,sql.js是一个简单的JavaS

个人项目WC.exe Node.js+electron实现

前言实现语言:Javascript 编译工具:webstorm GitHub:https://github.com/NPjuan/WC.git 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程序,模仿已有wc.exe 的功能,并加以扩充,给出某程序设计语言源文件的字符数.单词数和行数. 实现一个统计程序,它能正确统计程序文件中的字符数.单词数.行数,以及还具备其他扩展功能,并能够快速地处理多个文件. 具体功能要求: 程序处理用户需求的

three.js尝试(二)模拟游戏开发：3D人物在地图上行走

本次尝试,模拟了一个小人物在场景中行走,使用简单模型建立了森林,图片纹理模拟草地,加载3D模型呈现人物,使用按键asdw模拟人物的行走,行走和站立时人物的切换等. 主要用到点:3D模型的加载,模型的动画(行走与站立)之间的切换. 不足之处:没有检测碰撞与边界. 需要注意的是,代码需要运行在服务器端,切记. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <styl

three.js尝试(一)模拟演唱会效果

工作闲暇之余,偶然翻到了Three.js的官网,立刻被它酷炫的案例给惊艳到了,当即下定决心要试验摸索一番,于是看demo,尝试,踩坑,解决问题,终于搞定了,一个模拟演唱会场景. 主角围绕一个钢管在舞动,两个聚光灯,来回摆动,后面屏幕上显示着照片,顶上一个立方体屏幕水平滚动,垂直滚动交替,后面荧光棒来回摆动,本来想搞一波荧光屏上图片定时切换的,摸索了一番效果不是很理想,就此作罢.先来看一下截图. 需要注意的是,代码需要运行在服务器端,切记. 下面上代码: <!DOCTYPE html> <

开源 iOS 项目分类索引大全－待整理

开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助系统基础库 Category/Util sstoolkit 一套Category类型的库,附带很多自定义控件功能不错- BlocksKit 将Block风格带入UIKit和Founcation cocoa-helpers 一些Cocoa的扩展 2年前的工程 CoconutKit 一系列扩展和一些自定组件 STUtils 一系列扩展包

史上最全的常用iOS的第三方框架

文章来源:http://blog.csdn.net/sky_2016/article/details/45502921 图像: 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放等操作. 下载:https://github.com/mwaterfall/MWPhotoBrowser 目前比较活跃的社区仍旧是Github,除此以外也有一些不错的库

常用iOS的第三方框架

图像:1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放等操作. 下载:https://github.com/mwaterfall/MWPhotoBrowser 目前比较活跃的社区仍旧是Github,除此以外也有一些不错的库散落在Google Code.SourceForge等地方.由于Github社区太过主流,这里主要介绍一下Github里面流

各种less开发工具

less是前端开发CSS的神器,但如何让less代码语法高亮,智能提示,快速编译及格式化,这不是一般的IDE的less插件能做到.下面是我搜刮到的一些工具 Codekit - incident57又一华丽丽的工具,目前是beta,官网上介绍中罗列了这些功能特性: 自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件致力于js文件合并和压缩,以及js语法错误检查同时还支持Compass(Sass伴侣,官网地址:compass-style.or

开源 iOS 项目分类索引大全

GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助系统基础库 Category/Util sstoolkit 一套Category类型的库,附带很多自定义控件功能不错- BlocksKit 将Block风格带入UIKit和Founcation cocoa-helpers 一些Cocoa的扩展 2年前的工程 CoconutKit 一系列扩展和一些自定组件 STUtils 一系列扩展包 PSFoundation

Appium的前世今生

Appium的前世今生一.什么是Appium Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持IOS.Android及FirefoxOS平台.Appium使用WebDriver的json wire协议,来驱动Apple系统的UIAutomation库.Android系统的UIAutomator框架.Appium对IOS系统的支持得益于Dan Cuellar’s对于IOS自动化的研究.Appium也集成了Selendroid,来支持老android版

基于babylon3D模型研究3D骨骼动画（1）

3D骨骼动画是实现较为复杂3D场景的重要技术,Babylon.js引擎内置了对骨骼动画的支持,但Babylon.js使用的骨骼动画的模型多是从3DsMax.Blender等3D建模工具转换而来,骨骼动画的具体生成方式被透明化.本文从babylon格式的3D模型文件入手,对骨骼动画数据的生成方式进行具体分析,并尝试建立一个简易的3D骨骼动画生成工具. 一.模型文件分析我们从Babylon.js官方网站上的一个骨骼动画示例开始分析: (示例地址:https://www.babylonjs-play

【Appium】Appium工作原理

参考:http://www.cnblogs.com/zhjsll/p/5698878.html 原作者写的很好,所以直接放在这里. 一.什么是Appium Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持IOS.Android及FirefoxOS平台.Appium使用WebDriver的json wire协议,来驱动Apple系统的UIAutomation库.Android系统的UIAutomator框架.Appium对IOS系统的支持得益于Dan

iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角)--(转)

图像: 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放等操作. 下载:https://github.com/mwaterfall/MWPhotoBrowser 目前比较活跃的社区仍旧是Github,除此以外也有一些不错的库散落在Google Code.SourceForge等地方.由于Github社区太过主流,这里主要介绍一下Github里面流行的iOS库. 首先

使用Chrome控制台进行3D模型编辑的尝试

前言:3D模型编辑的核心是对顶点位置和纹理颜色的编辑,这个研究的目的在于寻找一种通过编程方式直接对模型进行编辑的方法,这种编辑方法和时下流行的通过鼠标点选.拖拽进行编辑的方法之间的关系,和前端编程中“程序员编写静态网页”与“美工进行网页切图”之间的关系很相似. 一.工具用法: 1.访问 https://ljzc002.github.io/SnowMiku/HTML/MakeRibbon.html打开条带网格生成器页面在场景世界坐标系的(0,-10,0),(0,0,0),(0,10,0)处各有一

three.js使用GUI

热门专题