3DGraphics
moxiaomomo
虚怀若谷,大爱无疆
展开
-
[Threejs]环境光与HDR贴图
本文主要记录了一次通过结合环境光与HDR贴图来实现3D场景的渲染。(Threejs版本 r.0.118.0)添加环境光// this.scene = ...this.scene.add(new AmbientLight(0xffffff, 1));const hemiLight = new HemisphereLight(0xffffff, 0x000000, 1);hemiLight.position.set(0, 100, 0);this.scene.add(hemiLight);原创 2020-07-27 15:25:22 · 11251 阅读 · 4 评论 -
Vue集成three.js 3D场景渲染示例
Demo工程目录结构如下所示│ .browserslistrc│ .eslintrc.js│ .gitignore│ babel.config.js│ package-lock.json│ package.json│ README.md│ tsconfig.json│├─public│ │ favicon.ico│ │ index.html│ ││ └─model│ agvCar.gltf│ house001.原创 2020-07-23 16:24:10 · 3696 阅读 · 2 评论 -
[Armory]实现相机的漫游功能
通过Haxe脚本实现相机的移动和旋转功能,参考代码如下:// 相机旋转,设定lookAt目标示例package arm;import iron.math.Quat;import iron.object.Object;import iron.Scene;import iron.math.Vec4;class MyTrait extends iron.Trait { var ca...原创 2020-03-30 16:25:20 · 615 阅读 · 0 评论 -
[Amory]Haxe获取场景中的对象及调用其绑定的方法
通过对象名获取场景中的对象var myObj = iron.Scene.active.getChild("the_object_name");获取对象的某个child public static function getChild(obj: Object, childName:String) { if (obj == null) { return null...原创 2020-03-09 17:21:30 · 228 阅读 · 0 评论 -
[Armory]2d canvas如何支持中文显示
替换font_default.ttf 为 unifont字体 (比如从这里下载一个:unifont )修改Kha源码git源码位置: https://github.com/Kode/Kha/blob/master/Sources/kha/graphics2/Graphics.hx#L141将public static var fontGlyphs: Array<Int&g...原创 2020-02-24 09:25:00 · 1981 阅读 · 0 评论 -
Armory3D中如何实现network通讯
对于Armory3D中如何实现网络通讯,尝试过以下几个方法,目前只有一种方法是可行的。使用haxe.http包package;class Main { static function main() { trace("Hello, world!"); var http = new haxe.Http("http://localhost:8080/test"); http...原创 2020-02-09 12:30:23 · 993 阅读 · 2 评论 -
[汇总]Haxe编程概念
Haxehttps://github.com/HaxeFoundation/haxeHaxe is an open source toolkit that allows you to easily build cross-platform tools and applications that target many mainstream platforms. The Haxe toolki...原创 2020-02-03 20:07:51 · 1301 阅读 · 0 评论 -
Blender2.8安装Armory3D插件
下载blender2.8https://www.blender.org/download/下载ArmorySDKhttps://armory3d.org/download.html将Armory3DSDK解压到指定的某个目录unzip -d /your_path/ armory.zipBlender添加Armory3D插件打开blender2.8打开addo...原创 2020-01-31 17:09:45 · 3186 阅读 · 1 评论 -
[Threejs]2D与3D场景间的交互问题(2)
由于一直没能解决上篇文章提到的编译问题, 只好使用了另外一个js库interact来替代.具体用法如下:通过npm安装interactnpm install interactjs@next --save// + interactjs@1.4.0-rc.13// added 13 packages in 13.036s具体代码逻辑示例如下import interact from...原创 2019-11-07 15:47:50 · 902 阅读 · 0 评论 -
[Threejs]2D与3D场景间的交互问题(1)
应用场景: 从2D画布中拖拽一个元素进入3D画布区域, 触发一个事件,比如在3D场景中添加相应的模型对象.可以通过@shopify/draggable库来实现改功能:通过npm安装js库npm install @shopify/draggable --save具体实现代码示例如下:import { Draggable } from '@shopify/draggable';...原创 2019-11-07 15:33:56 · 1603 阅读 · 0 评论 -
[Threejs]如何通过DragControls/TransformControls实现对象拖动效果
通过DragControls可以实现鼠标拖动三维模型的效果.DragControls的事件注册具体示例代码如下:// 基于r109// import { DragControls } from 'three/examples/jsm/controls/DragControls';// const objects: Object3D[] = ...this.dragControls =...原创 2019-10-30 13:49:58 · 5139 阅读 · 15 评论 -
[Threejs]三种坐标系位置数据的转换
webGL中主要有6种坐标系.接下来看看如何在以下三种坐标系之间进行坐标数据的转换:屏幕坐标系,标准坐标系,世界坐标系.屏幕坐标系和标准设备坐标系先来了解一下这两个坐标系的定义,具体如下图所示:屏幕坐标系的起始点(0,0)在左上角,而标准坐标系的起始点在canvas中心处.假设3D画布的大小填满window假如我们要通过鼠标来操控3D画布内的场景对象,需要将鼠标的坐标位置转换为3...原创 2019-10-29 09:23:40 · 11007 阅读 · 0 评论 -
[Threejs]Object3d对象如何获取指定名字的子元素?
现有的获取对象的方法getObjectById()根据指定的id获取对应的对象,总是返回第一个匹配到的对象getObjectByName()根据指定的name获取对应的对象,总是返回第一个匹配到的对象getObjectByProperty()根据指定的属性(键值对)获取对应的对象,总是返回第一个匹配到的对象其实getObjectById和getObjectByName的方...原创 2019-10-22 14:50:49 · 6181 阅读 · 0 评论 -
[Threejs]关于threejs入门的几点知识
关于threejs版本的问题threejs新旧版本之间的兼容性貌似不太好,几个月前能用的方法现在可能就用不了,当前最新的版本号为r106.如果你用到一些不在标准库three里的接口,一般在three-full里面都可以找到.其他一些非官方的库,特别是那些一年半载甚至更久没有更新的库,最好就不用考虑使用了,因为很可能用不了.关于画线的问题画线的过程中,很容易出现不正常显示等一些诡异的问题,...原创 2019-07-17 09:41:46 · 833 阅读 · 0 评论 -
解决blender导出带动画的GLTF模型变形问题
在blender里面给3d模型加了NLA(非线性动画),结果导出gltf/glb格式文件之后在threejs运行会出现变形的问题,效果如下:为了解决这个问题,我们需要在导出时把以下选项给勾上,具体如下:这个选项会给每一帧动画添加一个shapekey,因此也会让模型文件体积变得很大.勾上之后的效果如下:动画相关问题的讨论也可以参考github上的这个issue:https://gith...原创 2019-10-23 09:46:48 · 6950 阅读 · 3 评论