Code Monkey home page Code Monkey logo

threejs_editor's Introduction

Threejs Editor

学习 Threejs Editor 的项目。

项目目录结构

  • common文件夹:build里面是主要的类库threejsjqueryjs;其它是三维小例子使用的代码和资源,根据需要自己引入。
  • css文件夹:项目的样式文件,可切换皮肤。
  • docs文件夹:项目的技术点介绍。
  • examples文件夹:项目引用的场景实例。
  • js文件夹:commands里面是用来写具体撤销和重做操作的代码;libs使用的第三方代码;其它是项目的主要代码。

项目代码结构

  • index.html项目的入口文件。
  • Editor.js项目主功能的函数。
  • config.js项目的配置,会保存到localStorage本地存储。
  • History.js项目的历史记录,撤销和重做的队列。
  • Storage.js项目的indexedDB本地数据库。
  • Loader.js项目的文件加载功能。
  • Api.js项目的后台数据获取功能,项目的信息,项目的版本信息,不会保存到本地存储。

项目功能流程

定位相机

  • 勾选定位相机,在场景中选择一个点,这个点在网格平面或模型平面,高度是相机高度的值;
  • 相机的位置就是点的坐标,方向不变,通过鼠标移动控制方向,鼠标滚轮控制前进和后退;
  • W/A/S/D 控制移动,C 控制跳跃,方向键控制移动,ESC 退出控制。

模型动画

  • 选择模型后,在右侧场景页最下方的模型脚本里,新建一个模型脚本,输入脚本文件名,点击编辑写模型动画代码;
  • 在提供的函数回调名称下,编辑对应的函数名称的具体代码,函数作用域为模型,传入的参数根据需要选择;
  • 编写完模型代码后,点击菜单栏的播放按钮可以看运行效果。

场景播放

  • 点击菜单栏的场景播放按钮后,会切换到新的页面,并播放模型动画;
  • 场景播放提供了观察的控件,点击右下角的切换按钮后控件切换为游览模式;
  • 点击播放按钮后,根据定位相机时的操作和游览进行播放;
  • 在发布后的代码里,除了上面的功能之外,还有编辑功能,点击编辑场景切换到编辑器;
  • 发布功能在文件菜单栏里,发布后的代码需要在服务器上运行。

辅助功能

  • 点击辅助功能或使用快捷键,可以开启辅助平面,绘制线段;
  • 辅助平面可以使用快捷键切换三个坐标平面,可以使用下方工具条修改平面位置;
  • 在平面上或模型上绘制点和线段,可以使用快捷键撤销和重做;
  • 完成后根据情况使用线段;
  • 使用快捷键可以生成模型并加入场景中,如:二维平面、三维模型。

模型导入

  • 加载dae模型时,一般是对xml文件转为节点对象后,进行数据读取和模型实例化;
  • 当模型比较大时,比如500M的模型,无法转为节点对象,但是作为字符串处理时,部分函数还可用;
  • 所以重写了解析的文件,并利用了worker多线程读取数据。

模型合并

  • 当导入的模型比较大时,渲染模型比较卡,主要的问题是模型数量和几何体数量太多;
  • 对导入的dae模型进行合并,主要的方式是把同一种类型的模型进行合并;
  • 对模型的几何体进行分段合并,分段的依据是使用了不同的材质,而使用同一种材质时不需要分段,需要放在一起;
  • 合并后的模型几何体使用一个,大大减少了数量,材质放在一起,数量并不多;
  • 主要有四种类型的模型需要合并,而Group模型已经不需要,合并时会删除。

注意事项

项目的版本信息

  • 第一个数字表示主版本;
  • 第二个数字表示增加功能;
  • 第三个数字表示修改问题。

代码的版本问题

  • 修改代码的引用时,要把旧版本备份,确保所有功能都没问题时才能删除;

threejs_editor's People

Contributors

codehuicn avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.