three.js 场景编辑器 源码解析(一)

本文章是基于three.js的编辑器进行源码解析,编辑器的版本是r103dev版本。

首先从感性认识上看看编辑器都包含哪些内容,让我们从three.js-dev\editor\js\Strings.js开始。

Strings.js

      包含整个ui中所有控件的名称信息,从中可以看出编辑器都包哪些ui控件、以及一些设置信息。这些控件包含中文、英文支持,现在介绍英文部分。

     就整体而言,包含:

  1. 菜单项 menubar   信息
  2. 场景sidebar/scene 信息
  3. 属性sidebar/properties/ 信息
  4. 对象sidebar/object   信息
  5. 对象的顶点sidebar/geometry信息
  6. 对象的材质sidebar/material 信息
  7. 对象的脚本sidebar/script 信息
  8. 对象的设置sidebar/settings 信息
  9. 对象的sidebar/history 信息
  10. toolbar工具条(选中对象时的平移、旋转、缩放、本地世界矩阵的转换信息)
  11. 提示viewport/info 信息
    en: {
    			//所有的菜单、及菜单下的菜单项
    			
    			//file菜单项
    			'menubar/file': 'File',
    			'menubar/file/new': 'New',
    			'menubar/file/import': 'Import',
    			'menubar/file/export/geometry': 'Export Geometry',
    			'menubar/file/export/object': 'Export Object',
    			'menubar/file/export/scene': 'Export Scene',
    			'menubar/file/export/dae': 'Export DAE',
    			'menubar/file/export/glb': 'Export GLB',
    			'menubar/file/export/gltf': 'Export GLTF',
    			'menubar/file/export/obj': 'Export OBJ',
    			'menubar/file/export/stl': 'Export STL',
    			'menubar/file/export/stl_binary': 'Export STL (Binary)',
    			'menubar/file/publish': 'Publish',
    
    			//edit菜单项
    			'menubar/edit': 'Edit',
    			'menubar/edit/undo': 'Undo (Ctrl+Z)',
    			'menubar/edit/redo': 'Redo (Ctrl+Shift+Z)',
    			'menubar/edit/clear_history': 'Clear History',
    			'menubar/edit/clone': 'Clone',
    			'menubar/edit/delete': 'Delete (Del)',
    			'menubar/edit/minify_shaders': 'Minify Shaders',
    
    			//add菜单项
    			'menubar/add': 'Add',
    			'menubar/add/group': 'Group',
    			'menubar/add/plane': 'Plane',
    			'menubar/add/box': 'Box',
    			'menubar/add/circle': 'Circle',
    			'menubar/add/cylinder': 'Cylinder',
    			'menubar/add/sphere': 'Sphere',
    			'menubar/add/icosahedron': 'Icosahedron',
    			'menubar/add/torus': 'Torus',
    			'menubar/add/tube': 'Tube',
    			'menubar/add/torusknot': 'TorusKnot',
    			'menubar/add/lathe': 'Lathe',
    			'menubar/add/sprite': 'Sprite',
    			'menubar/add/pointlight': 'PointLight',
    			'menubar/add/spotlight': 'SpotLight',
    			'menubar/add/directionallight': 'DirectionalLight',
    			'menubar/add/hemispherelight': 'HemisphereLight',
    			'menubar/add/ambientlight': 'AmbientLight',
    			'menubar/add/perspectivecamera': 'PerspectiveCamera',
    
    			//
    			'menubar/status/autosave': 'autosave',
    
    			//播放菜单项
    			'menubar/play': 'Play',
    			'menubar/play/stop': 'Stop',
    			'menubar/play/play': 'Play',
    
    			//案例菜单项
    			'menubar/examples': 'Examples',
    
    			//帮助菜单项
    			'menubar/help': 'Help',
    			'menubar/help/source_code': 'Source Code',
    			'menubar/help/about': 'About',
    
    			//场景编辑框
    			'sidebar/scene': 'Scene',
    			'sidebar/scene/background': 'Background',
    			'sidebar/scene/fog': 'Fog',
    
    			//对象、几何、材质、脚本编辑框
    			'sidebar/properties/object': 'Object',
    			'sidebar/properties/geometry': 'Geometry',
    			'sidebar/properties/material': 'Material',
    			'sidebar/properties/script': 'Script',
    
    			//对象编辑框上的属性
    			'sidebar/object/type': 'Type',
    			'sidebar/object/new': 'New',
    			'sidebar/object/uuid': 'UUID',
    			'sidebar/object/name': 'Name',
    			'sidebar/object/position': 'Position',
    			'sidebar/object/rotation': 'Rotation',
    			'sidebar/object/scale': 'Scale',
    			'sidebar/object/fov': 'Fov',
    			'sidebar/object/near': 'Near',
    			'sidebar/object/far': 'Far',
    			'sidebar/object/intensity': 'Intensity',
    			'sidebar/object/color': 'Color',
    			'sidebar/object/groundcolor': 'Ground Color',
    			'sidebar/object/distance': 'Distance',
    			'sidebar/object/angle': 'Angle',
    			'sidebar/object/penumbra': 'Penumbra',
    			'sidebar/object/decay': 'Decay',
    			'sidebar/object/shadow': 'Shadow',
    			'sidebar/object/cast': 'cast',
    			'sidebar/object/receive': 'receive',
    			'sidebar/object/visible': 'Visible',
    			'sidebar/object/frustumcull': 'Frustum Cull',
    			'sidebar/object/renderorder': 'Render Order',
    			'sidebar/object/userdata': 'User data',
    
    			//几何编辑框上的项目
    			'sidebar/geometry/type': 'Type',
    			'sidebar/geometry/new': 'New',
    			'sidebar/geometry/uuid': 'UUID',
    			'sidebar/geometry/name': 'Name',
    			'sidebar/geometry/bounds': 'Bounds',
    
    			'sidebar/geometry/box_geometry/width': 'Width',
    			'sidebar/geometry/box_geometry/height': 'Height',
    			'sidebar/geometry/box_geometry/depth': 'Depth',
    			'sidebar/geometry/box_geometry/widthseg': 'Width Seg',
    			'sidebar/geometry/box_geometry/heightseg': 'Height Seg',
    			'sidebar/geometry/box_geometry/depthseg': 'Depth Seg',
    
    			'sidebar/geometry/buffer_geometry/attributes': 'Attributes',
    			'sidebar/geometry/buffer_geometry/index': 'index',
    
    			'sidebar/geometry/circle_geometry/radius': 'Radius',
    			'sidebar/geometry/circle_geometry/segments': 'Segments',
    			'sidebar/geometry/circle_geometry/thetastart': 'Theta start',
    			'sidebar/geometry/circle_geometry/thetalength': 'Theta length',
    
    			'sidebar/geometry/cylinder_geometry/radiustop': 'Radius top',
    			'sidebar/geometry/cylinder_geometry/radiusbottom': 'Radius bottom',
    			'sidebar/geometry/cylinder_geometry/height': 'Height',
    			'sidebar/geometry/cylinder_geometry/radialsegments': 'Radial segments',
    			'sidebar/geometry/cylinder_geometry/heightsegments': 'Height segments',
    			'sidebar/geometry/cylinder_geometry/openended': 'Open ended',
    
    			'sidebar/geometry/geometry/vertices': 'Vertices',
    			'sidebar/geometry/geometry/faces': 'Faces',
    
    			'sidebar/geometry/icosahedron_geometry/radius': 'Radius',
    			'sidebar/geometry/icosahedron_geometry/detail': 'Detail',
    
    			'sidebar/geometry/lathe_geometry/segments': 'Segments',
    			'sidebar/geometry/lathe_geometry/phistart': 'Phi start (°)',
    			'sidebar/geometry/lathe_geometry/philength': 'Phi length (°)',
    			'sidebar/geometry/lathe_geometry/points': 'Points',
    
    			'sidebar/geometry/plane_geometry/width': 'Width',
    			'sidebar/geometry/plane_geometry/height': 'Height',
    			'sidebar/geometry/plane_geometry/widthsegments': 'Width segments',
    			'sidebar/geometry/plane_geometry/heightsegments': 'Height segments',
    
    			'sidebar/geometry/sphere_geometry/radius': 'Radius',
    			'sidebar/geometry/sphere_geometry/widthsegments': 'Width segments',
    			'sidebar/geometry/sphere_geometry/heightsegments': 'Height segments',
    			'sidebar/geometry/sphere_geometry/phistart': 'Phi start',
    			'sidebar/geometry/sphere_geometry/philength': 'Phi length',
    			'sidebar/geometry/sphere_geometry/thetastart': 'Theta start',
    			'sidebar/geometry/sphere_geometry/thetalength': 'Theta length',
    
    			'sidebar/geometry/torus_geometry/radius': 'Radius',
    			'sidebar/geometry/torus_geometry/tube': 'Tube',
    			'sidebar/geometry/torus_geometry/radialsegments': 'Radial segments',
    			'sidebar/geometry/torus_geometry/tubularsegments': 'Tubular segments',
    			'sidebar/geometry/torus_geometry/arc': 'Arc',
    
    			'sidebar/geometry/torusKnot_geometry/radius': 'Radius',
    			'sidebar/geometry/torusKnot_geometry/tube': 'Tube',
    			'sidebar/geometry/torusKnot_geometry/tubularsegments': 'Tubular segments',
    			'sidebar/geometry/torusKnot_geometry/radialsegments': 'Radial segments',
    			'sidebar/geometry/torusKnot_geometry/p': 'P',
    			'sidebar/geometry/torusKnot_geometry/q': 'Q',
    
    			'sidebar/geometry/tube_geometry/path': 'Path',
    			'sidebar/geometry/tube_geometry/radius': 'Radius',
    			'sidebar/geometry/tube_geometry/tube': 'Tube',
    			'sidebar/geometry/tube_geometry/tubularsegments': 'Tubular segments',
    			'sidebar/geometry/tube_geometry/radialsegments': 'Radial segments',
    			'sidebar/geometry/tube_geometry/closed': 'Closed',
    			'sidebar/geometry/tube_geometry/curvetype': 'Curve Type',
    			'sidebar/geometry/tube_geometry/tension': 'Tension',
    
    			//材质编辑框上的属性
    			'sidebar/material/new': 'New',
    			'sidebar/material/copy': 'Copy',
    			'sidebar/material/paste': 'Paste',
    			'sidebar/material/type': 'Type',
    			'sidebar/material/uuid': 'UUID',
    			'sidebar/material/name': 'Name',
    			'sidebar/material/program': 'Program',
    			'sidebar/material/info': 'Info',
    			'sidebar/material/vertex': 'Vertex',
    			'sidebar/material/fragment': 'fragment',
    			'sidebar/material/color': 'Color',
    			'sidebar/material/roughness': 'Roughness',
    			'sidebar/material/metalness': 'Metalness',
    			'sidebar/material/emissive': 'Emissive',
    			'sidebar/material/specular': 'Specular',
    			'sidebar/material/shininess': 'Shininess',
    			'sidebar/material/clearcoat': 'ClearCoat',
    			'sidebar/material/clearcoatroughness': 'ClearCoat Roughness',
    			'sidebar/material/vertexcolors': 'Vertex Colors',
    			'sidebar/material/vertexcolors/no': 'No',
    			'sidebar/material/vertexcolors/face': 'Face',
    			'sidebar/material/vertexcolors/vertex': 'Vertex',
    			'sidebar

     

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章