本文章是基於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