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

     

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