本文章是基于three.js的编辑器进行源码解析,编辑器的版本是r103dev版本。
首先从感性认识上看看编辑器都包含哪些内容,让我们从three.js-dev\editor\js\Strings.js开始。
Strings.js
包含整个ui中所有控件的名称信息,从中可以看出编辑器都包哪些ui控件、以及一些设置信息。这些控件包含中文、英文支持,现在介绍英文部分。
就整体而言,包含:
- 菜单项 menubar 信息
- 场景sidebar/scene 信息
- 属性sidebar/properties/ 信息
- 对象sidebar/object 信息
- 对象的顶点sidebar/geometry信息
- 对象的材质sidebar/material 信息
- 对象的脚本sidebar/script 信息
- 对象的设置sidebar/settings 信息
- 对象的sidebar/history 信息
- toolbar工具条(选中对象时的平移、旋转、缩放、本地世界矩阵的转换信息)
- 提示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