可视化组件
可视化组件演示地址: 可视化组件
three-js元宇宙开发实战
演示地址: https://scqilin.github.io/metaverse/
元宇宙项目。什么是元宇宙?这不重要,重要是我们在做。
你搞个网站,你说这不是网站,这是元宇宙,他就是。
你搞个游戏,你说这不是游戏,这是元宇宙,他就是。
你吹个牛逼,你说这不是吹牛逼,这就是元宇宙,他真的就是。
我就用3D写几行代码,我说他是元宇宙,他就是!
话不多说,直接开整。 虽然不知道要做什么,但是不重要,重要的是我们在做。
Day1:整个球,放点树。完成
Day2:树加生长动画。完成
Day3:满球乱跑的小人。完成 不过移动的不是小人,而是一条疯狂吞噬森林的大蛇,吞噬的大树越多,蛇越长也越黄!
Day4:还是加个小人吧。 未完成 steve请求加入元宇宙!
Day5:加入AR功能。完成 案例暂时仅仅支持iPhone手机自带浏览器。 使用方法:点击左下角图片,下载USDZ文件,下载完成后点击运行开启摄像头。实测并不好使。
Day6:
启动页面大改,欢迎体验!
案例列表
案例列表three开发贪吃蛇three开发贪吃蛇
滑杆吊车模拟
可视化训练营
可视化组件
可视化训练营
可视化训练营可视化训练营在线案例:可视化训练营
webgl 学习资源
书籍列表
计算机图形图像处理基础
WebGL编程指南
Three.js开发指南
OpenGL ES 2.0 游戏开发
书籍介绍:
《计算机图形图像处理基础》2011年.电子工业出版社出版的.唐波全书共分10章,主要内容包括了图形与图像处理的基本概念,图形图像处理的硬件与软件基础,基本图形的生成算法,图形显示技术,交互技术与图形软件标准,图像数字化与数学描述,图像正交变换,图像增强,图像恢复,图像分割。该书融合了计算机图形学与数字图像处理两门学科的知识,系统阐述了图形图像处理的基本理论、方法和技术,力图将图形与图像结合起来,从一个新的视角介绍可视信息处理中这两个最重要的领域。这本书可以作为课外书来读,不要去每章都去理解,最好都过一遍,做到心中有数。以后会用到的。
《WebGL编程指南》这本书要认真读,反复的阅读。入门阶段读一遍不求甚解,在提升阶段就需要掌握了。
《Three.js开发指南》(中文第2版)看第二版,第一版太旧了,而且第二版也有点旧了。这本书要认真读,把源码下载下来参考,每个案例都要自己动手写一遍。由于版本更新比较快,书中很多内容以及废弃了,注意案例 ...
echarts生成的图表在three.js中的应用
echarts生成的图表在three.js中的应用最近群里有几个人问,如何把echarts的图表贴在three.js的模型上。这个问题其实很简单,因为二者都是渲染成canvas的,直接用echarts生成的canvas当作贴图就可以了。方法确定可行,那么我们就直接开始撸代码。先搭建一个three的基本场景起来,这里不在复述。然后新建一个平面,我们把图片贴在这个平面上即可。
123456789addPlane() { var geometry = new THREE.PlaneGeometry(10,10); var material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, // transparent:true }); this.plane = new THREE.Mesh(geometry, material); this.scene.add(this.plane);}
摆好相机的角度,此时场景中是一个白板。然后 ...
待整理笔记
es6 three.js 开发移除场景 清空内存 性能优化
123456789101112131415移除场景有效,会在div中删除canvas。document.getElementById(webglDivId).removeChild(renderer.domElement);m.dispose(); 需要dispose 所有的网格和材质//渲染动画let globalID;function render() { globalID = requestAnimationFrame(render); renderer.render(scene, camera); }//套路一下 也许有用 cancelAnimationFrame(globalID); //取消定时器,先得给定时器命名。THREE.Cache.clear() // 清除cachescene = null; //设置null ,需要先取消定时器document.getElementById(webglDivId).removeChild(renderer.domEle ...
typescript基本用法
1 TypeScript介绍2 自动化工作流程3 使用函数4 TypeScript中面向对象的编程5 运行时6 应用性能7 应用测试8 装饰器9 应用框架10 汇总
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment