本章节实现效果,通过gui快速添加场景,家具,并且可以快速设置家具实现一个编辑器效果

一.基础设置与物体添加列表

用之前做过的一个案例来改

首先不要这个模型,然后换个背景颜色,并且添加一个网格辅助器

1.1 添加场景

先往事件对象里面添加一个函数,到时候点击就会调用这个函数,而这个函数就是往场景加这个变量,到时候会把这个变量赋值为要加载的场景模型

一样的加载模型,只不过不是直接加载而是而是点击后才会把basicscene放进去

1.2 添加物体

接下来做两个按钮去添加盆栽和沙发

因为这里可能会有很多物体,所以采用循环的方式,假如数据为这样,这样的数据可以后端给

给gui创建一个文件夹,用循环的方式,去给这个文件夹添加按钮,并且注意点击的按钮是去哪里面找这个函数才能添加这个物体进来

二.使用变换控制器操作物体

导入后创建控制器

首先需要传入两个参数摄像机和canvas元素

然后当控制器改变的时候,也不断的去刷新场景的变化

同时监听拖动物体上的控制器这个事件,拖动的时候轨道控制器不动,也就是场景不动

然后当添加一个物体进来的时候要让这个物体有控制器,就通过他的attach方法绑定物体

犯了一个巨傻的错误搞了半天,不多说了

反正最后效果就是这样

2.1 家具列表与控制物体切换

先创建一个家具列表文件夹

然后逻辑就是在之前点击新增一个物体之后就往这个文件夹里面丢一个gui并且作用是给这个物体添加变化控制器起到选择到他的作用

2.2 位移旋转缩放模式

需要用到模式

当然也可以通过设置键盘事件来快速设置

2.3 坐标的切换以及取消选择物体

有两个坐标局部和世界坐标,可以让物体绕着什么坐标来旋转位移等,取消选择直接调用方法

2.4 缩放位移旋转的固定比例

现在的缩放位移等都是比较随意,如果想固定每次位移等距离就可以这么设置,首先在gui可以定义一个变量不再是函数

然后创建一个文件夹,注意如果gui是变量,可以在后面跟一个对象,来设置变量的可选值范围,然后通过eventobj拿到每一次改变的值,赋值给tcontrols

旋转缩放同理,就是设置方法不同

注意gui可以设置一个范围,并且每次拖动改变的大小

2.5 吸附地面与室内灯光开关

现在随意拖动是可以拖到场景下面的,如果想要保持物体一直在地面

同样设置一个gui的变量

添加一个按钮

改变这个变量即可,随后可以利用控制器的change事件,去不断地获取变量的值,让y轴一直为0就不会掉入地面

室内的灯光开启,首先定义一个gui

需要给渲染器色调映射

同时把曝光调为1

通过判断灯光的值来改变曝光

ThreeJs-07操控物体实现家具编辑器的更多相关文章

  1. 用threejs 实现3D物体在浏览器展示

    用threejs 实现3D物体在浏览器展示,通过鼠标平移,缩放,键盘箭头按钮左右移动等功能展示. <!DOCTYPE html> <html> <head> < ...

  2. threejs构建web三维视图入门教程

    本文是一篇简单的webGL+threejs构建web三维视图的入门教程,你可以了解到利用threejs创建简单的三维图形,并且控制图形运动.若有不足,欢迎指出. 本文使用的框架是three.js gi ...

  3. [译]如何在Unity编辑器中添加你自己的工具

    在这篇教程中你会学习如何扩展你的Unity3D编辑器,以便在你的项目中更好的使用它.你将会学习如何绘制你自己的gizmo,用代码来实现创建和删除物体,创建编辑器窗口,使用组件,并且允许用户撤销他们所作 ...

  4. Nico Game Studio 3.地图纹理编辑 物体皮肤编辑

    完成功能: 1.地图纹理编辑功能. 图层编辑,添加/删除纹理,地图编辑.网格绘制.

  5. Implementation Model Editor of AVEVA in OpenSceneGraph

    Implementation Model Editor of AVEVA in OpenSceneGraph eryar@163.com 摘要Abstract:本文主要对工厂和海工设计软件AVEVA的 ...

  6. [译文]详细解析如何做一款成功的APP应用

    译者注: 本文作者从自身丰富的应用开发设计实践经验和大量的优秀应用实例中,总结提炼了从产品概念.设计.开发到市场推广等一系列的相关原则,指导移动开发人员怎样来打造一款成功赚钱的应用.姗姗来迟的这篇文章 ...

  7. (译)开发优秀的虚拟现实体验:从开发I Expect You to Die中总结的六个要点

    这篇文章是我从网上找来的,我觉得他非常详细的解释了VR发展的需求和必要.我认为通过这篇文章可以让大家了解VR. 译者写在最前: 来到追光动画有好几个月了,抱歉这段时间也没有什么文章与大家分享,我现在在 ...

  8. Unity3D脚本中文系列教程(十)

    http://dong2008hong.blog.163.com/blog/static/4696882720140312627682/?suggestedreading&wumii Unit ...

  9. unity3d 数学的数学基础和辅助类

    转载注明smartdot:http://my.oschina.net/u/243648/blog/67193 1.  数学(点乘/叉乘)/unity3d的数学辅助类 2.  坐标系统(本地/世界/屏幕 ...

  10. Unity预计算光照的学习(速度优化,LightProb,LPPV)

    1.前言 写这篇文章一方面是因为unity的微博最近出了关于预计算光照相关的翻译文章,另一方面一些美术朋友一直在抱怨烘培速度慢 所以抱着好奇的心态来学习一下unity5的PRGI预计算实时光照 2.基 ...

随机推荐

  1. Nuxt Kit 实用工具的使用示例

    title: Nuxt Kit 实用工具的使用示例 date: 2024/9/25 updated: 2024/9/25 author: cmdragon excerpt: 摘要:本文介绍了Nuxt ...

  2. 通过MobaXterm操作远程服务器电脑的方法

      本文介绍在Windows电脑中,下载.配置MobaXterm软件,从而连接.操作远程服务器的方法.   因为是在Windows操作系统的电脑中连接服务器,所以建议使用MobaXterm.PuTTY ...

  3. LeetCode 218. 天际线问题 (扫描线+优先队列)

    扫描线+优先队列 https://leetcode-cn.com/problems/the-skyline-problem/solution/tian-ji-xian-wen-ti-by-leetco ...

  4. 29. GIL全局解释器锁、信号量、线程池进程池

    1. GIL全局解释器锁 1.1 概念 '''In CPython, the global interpreter lock, or GIL, is a mutex that prevents mul ...

  5. amfe-flexible 包设置rem的基本值 vue 移动端适配方案

    下载 安装 :npm i -S amfe-flexible gw:GitHub - amfe/lib-flexible: 可伸缩布局方案 下载 2 个第三方包即可实现移动端适配 amfe-flexib ...

  6. Android复习(三)清单文件中的元素——>uses-sdk

    <uses-sdk> Google Play 会利用在应用清单中声明的 <uses-sdk> 属性,从不符合其平台版本要求的设备上滤除您的应用.在设置这些属性前,请确保您了解  ...

  7. BUU XSS COURSE 1

    启动靶机 有留言板和登录功能,很明显是存储性xss,通过留言功能插入xss代码,获取cookie登录后台 先测试过滤 <script>alert(1);</script> 查看 ...

  8. KubeSphere 镜像构建器(S2I)服务证书过期解决方案

    目前 KubeSphere 所有 3.x.x 版本,如果开启了 DevOps 模块并使用了镜像构建器功能(S2I)都会遇到证书过期问题. 解决方法 已开启 DevOps 模块 下载这个更新 S2I 服 ...

  9. schedule-执行周期性任务

    模块介绍 该模块主要用于python的任务调度,使用简便友好的python语法定期运行python函数或者一些其他的调用对象,这个模块就类似于windows的任务计划和linux的crontab,都是 ...

  10. RocketMQ 5.0 多语言客户端的设计与实现

    本文作者:古崟佑,阿里云中间件开发. RocketMQ 5.0 版本拥有非常多新特性,比如存储计算分离. batch 能力的提升等,它是具有里程碑意义的版本. 提到新版本,我们往往会首先想到服务端架构 ...