หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

ตัวแก้ไขเงา

ภาษาอังกฤษ / 中文 | Windows Server | เซิร์ฟเวอร์ Ubuntu | การสาธิตเว็บ เว็บไซต์ทางการ

หมายเหตุ: เซิร์ฟเวอร์เป็นเวอร์ชันที่รวบรวมพร้อมกับ MongoDB ในตัวดำเนินการ start.bat หรือ start.sh เพื่อเริ่มต้นและเยี่ยมชม http://localhost:2020 ใน Google Chrome เวอร์ชัน Windows ต้องใช้ Visual C++ Redistributable for Visual Studio 2015

ข่าวดี เวอร์ชันที่ใช้ VITE4 + VUE3 + TS5 + ANT-DESIGN-VUE7 กำลังจะมาเร็ว ๆ นี้ คลิกที่นี่เพื่อดูรายละเอียดเพิ่มเติม

  • ชื่อ: Shadow Editor
  • เวอร์ชัน: v0.6.1 (เร็ว ๆ นี้)
  • คำอธิบาย: ตัวแก้ไขฉาก 3D แบบข้ามแพลตฟอร์มตามสาม.JS, Golang และ MongoDB
  • ที่มา: GitHub Gitee | เอกสาร: Gitee | ตัวอย่าง: GitHub Gitee | วิดีโอ: Weibo Bilibili | สินทรัพย์: BaidunetDisk (RFJA)
  • Technology Stack: HTML, CSS, JavaScript, Rollup, React.js, WebGL, Three.js, Golang, MongoDB, NodeJS, อิเล็กตรอน, บัฟเฟอร์โปรโตคอล
  • หากเป็นประโยชน์กับคุณโปรดบริจาคเพื่อสนับสนุนเรา ขอบคุณ!

เวอร์ชันโอเพ่นซอร์ส

เวอร์ชันโปร

v0.6.1 กำลังจะมาเร็ว ๆ นี้

เริ่มต้นจาก v0.6.1 , ShadowEditor มีเพียงคุณสมบัติหลักและ APIs เพิ่มเติมและคุณสมบัติอื่น ๆ จะมีให้ในส่วนขยายเช่น VSCODE เราจะพัฒนาในสาขา dev

  1. แก้ไขข้อผิดพลาดที่ข้อผิดพลาดในการจัดการรายการการจัดการแบบอักษร GO บางรุ่น
  2. ซ่อนแท็บรุ่นประวัติโมเดล
  3. เมื่อเลือกสไปรต์เส้นขอบจะไม่ปรากฏขึ้นอีกต่อไป
  4. แก้ไขข้อผิดพลาดสไตล์ดรอปดาวน์ Searchfield

v0.6.0 ได้เปิดตัวแล้ว

  • วันที่วางจำหน่าย: 24 กรกฎาคม 2564
  • อัปเดตบันทึก:
  1. แก้ไขข้อผิดพลาดที่สร้างการเชื่อมต่อ Mongo ใหม่เมื่อมีการร้องขอ
  2. ตรวจสอบ VR ในแถบสถานะเพื่อเปิดใช้งาน VR
  3. ชุดการแปลงฉาก
  4. วิธีป๊อปอัพหน้าต่างเมื่อคลิกวัตถุ: https://gitee.com/tengge1/shadoweditor/issues/i3apgi
  5. คุณสามารถเปิดใช้งาน https ใน config.toml
  6. เพิ่มเหตุการณ์ในเบราว์เซอร์มือถือลงในสคริปต์: onTouchStart , onTouchEnd , onTouchMove
  7. อัพเกรด three.js เป็น R130
  8. เพิ่มเหตุการณ์ VR ลงในสคริปต์: onVRConnected , onVRDisconnected , onVRSelectStart , onVRSelectEnd
  9. VR All-in-one Handle Controller รองรับตัวอย่างเช่น: HTC Vive
  10. แก้ไขข้อผิดพลาดของสคริปต์การลบ
  11. แก้ไขข้อผิดพลาดที่ Geometry ไม่สามารถเป็นอนุกรมเนื่องจากการอัพเกรดของ three.js
  12. เพิ่มวัสดุ polygonOffset , polygonOffsetFactor , การตั้งค่าพารามิเตอร์ polygonOffsetUnits การตั้งค่าพารามิเตอร์เพื่อแก้ปัญหาความขัดแย้งเชิงลึก
  13. แก้ไขข้อผิดพลาดที่ส่วนประกอบในตาข่ายไม่สามารถบันทึกแอตทริบิวต์ visible
  14. โมเดลประเภท Bin ไม่ได้รับการสนับสนุนอีกต่อไป
  15. แก้ไขข้อผิดพลาดพื้นผิวลูกบาศก์
  16. เขียน prototype ทั้งหมดไปยัง class ES6 ในซอร์สโค้ด
  17. ลบโมดูลภาพ
  18. แก้ไขข้อผิดพลาดที่ไม่คัดลอกพื้นผิวสกายบอลเมื่อส่งออกฉาก
  19. แก้ไขฝนและแมลงหิมะ
  20. ปรับเปลี่ยนสีพื้นหลังและแสงเพื่อไม่ให้เพิ่มสีเดียวกับพื้นหลังและทำให้มองเห็นได้ยาก
  21. แก้ไขข้อผิดพลาดของตัวส่งอนุภาค
  22. แก้ไขข้อผิดพลาดผ้า
  23. แก้ไขข้อผิดพลาดของเงาการตั้งค่าแบบไดนามิก

รายการคุณสมบัติ

  • ทั่วไป
    • ข้ามแพลตฟอร์ม
      • Windows, Linux, Mac
      • เดสก์ท็อปเว็บ
    • การสนับสนุนหลายภาษา
      • ภาษาอังกฤษ 、中文、繁體中文、日本語、한국어、 руский、 le français
    • การจัดการสินทรัพย์
      • ฉาก, ตาข่าย, พื้นผิว, วัสดุ, เสียง, แอนิเมชัน, ภาพหน้าจอ, วิดีโอ, typeface
    • การบริหารอำนาจ
      • องค์กรผู้ใช้
      • บทบาทอำนาจ
      • การลงทะเบียนการเข้าสู่ระบบการปรับเปลี่ยนรหัสผ่าน
    • การจัดการเวอร์ชัน
      • ประวัติฉากและบันทึก
      • undo, redo, ประหยัดอัตโนมัติ
    • ผู้เล่น
      • เล่นแอนิเมชั่นในฉากแบบเรียลไทม์และสามารถเล่นเต็มหน้าจอและในหน้าต่างใหม่
    • การตั้งค่า
      • แสดง, renderer, ผู้ช่วย, ตัวกรอง, สภาพอากาศ, โหมดควบคุม, โหมดเลือก, โหมดเพิ่ม, ภาษา, ภาษา
  • การแก้ไขฉากเล็ก ๆ
    • เพิ่มตาข่าย
      • 3DS, 3MF, AMF, Assimp, AWD, Babylon, BVH, Collada, CTM
      • DRACO, FBX, GCODE, GLTF, GLB, JS, KMZ, LMESH, MD2, PMD, PMX
      • NRRD, OBJ, PCD, PDB, PLY, PRWM, SEA3D, STL, VRM, VRML, VTK, X
    • วัตถุในตัว
      • กลุ่ม
      • ระนาบ, ลูกบาศก์, วงกลม, ทรงกระบอก, ทรงกลม, icosahedron, torus, torus knot, teapot, lathe
      • ข้อความที่ไม่ได้ปรับขนาดข้อความ 3D
      • ส่วนของเส้น, เส้นโค้ง catmullrom, เส้นโค้ง bezier กำลังสอง, เส้นโค้ง bezier ลูกบาศก์, เส้นโค้งวงรี
      • คะแนนชี้
      • ตัวช่วยลูกศร, Axes Helper
      • เทพดา
    • ไฟในตัว
      • แสงโดยรอบ, แสงทิศทาง, แสงจุด, สปอตไลท์, แสงซีกโลก, แสงพื้นที่ rect
      • แสงจุดไฟซีกโลก
    • ส่วนประกอบในตัว
      • เพลงพื้นหลังตัวปล่อยอนุภาค
      • ท้องฟ้า, ไฟ, น้ำ, ควัน, ผ้า
      • ภูมิประเทศเบอร์ลินทรงกลมท้องฟ้า
    • การแก้ไขวัสดุ
      • linebasicmaterial, linedashedmaterial, meshbasicmaterial, meshdepthmaterial, meshnormalmaterial
      • meshlambertmaterial, meshphongmaterial, matermaterial, meshstandardmaterial, meshphysicalmaterial
      • spritematerial, shadermaterial, rawshadermaterial
    • การโพสต์
      • หลังภาพ, bokeh, dot screen, fxaa, glitch
      • Halftone, Pixel, RGB Shift, SAO
      • SMAA, SSAA
      • ssao, taa
    • การแก้ไขข้อความ
      • การแก้ไข JavaScript ด้วย Intelligence
      • การแก้ไข Shader
      • การแก้ไขไฟล์ JSON
    • การส่งออกตาข่าย
      • gltf、 obj、 ply、 stl、 Collada、 draco
    • สำนักพิมพ์ฉาก
      • เผยแพร่ฉากเป็นทรัพยากรคงที่และสามารถฝังใน iframe
    • ตัวอย่าง
      • Arkanoid, กล้อง, อนุภาค, ปิงปอง, shader
    • เครื่องมือทั่วไป
      • เลือกกระทะหมุน, ซูม
      • มุมมองมุมมอง, มุมมองด้านหน้า, มุมมองด้านข้าง, มุมมองด้านบน, โหมด wireframe
      • ภาพหน้าจอบันทึก
      • จุดวาด, วาดเส้น, วาดรูปหลายเหลี่ยม, สเปรย์
      • วัดระยะทาง
    • คนอื่น
      • VR： กระดาษแข็ง, HTC Vive, Chrome, Firefox
      • เครื่องยนต์ฟิสิกส์กระสุนปืน
  • การควบคุม UI
    • ผ้าใบ
    • แบบฟอร์ม: ปุ่ม, ช่องทำเครื่องหมาย, แบบฟอร์ม, FormControls, IconButton, IconMenubutton, ImageButton, อินพุต, ฉลาก, LinkButton, Radio, Searchfield, Select, Textarea, สลับ
    • ไอคอน
    • รูปภาพ: image, imageList, imageselector, imageUploader
    • เลย์เอาต์: Absolutelayout, AccordionLayout, BorderLayout, HboxLayout, Tablelayout, VboxLayout
    • เมนู: ContextMenu, Menubar, Menubarfiller, Menuitem, Menuitemseparator, Menutab
    • แผง
    • ความคืบหน้า: loadmask
    • คุณสมบัติ: ButtonProperty, ButtonSproperty, CheckBoxProperty, ColorProperty, DisplayProperty, IntegerProperty, NumberProperty, PropertyGrid, PropertyGroup, SelectProperty, TextProperty, TextureProperty
    • SVG
    • ตาราง: DataGrid, Table, Tablebody, Tablecell, Table Head, Tablelow
    • เส้นเวลา
    • แถบเครื่องมือ: แถบเครื่องมือ, ToolBarfiller, ToolbarsParator
    • ต้นไม้
    • หน้าต่าง: แจ้งเตือน, ยืนยัน, ข้อความ, ภาพถ่าย, พรอมต์, ขนมปังปิ้ง, วิดีโอ, หน้าต่าง,

ความต้องการ

  1. MongoDB v3.6.8+
  2. Chrome 81.0+ หรือ Firefox 75.0+

สิ่งต่อไปนี้จำเป็นก็ต่อเมื่อคุณต้องการสร้างจากแหล่งที่มา

  1. Golang 1.14.2+
  2. nodejs 14.1+
  3. GCC 9.3.0+ ( tdm-gcc , MinGW-w64 หรือ MinGW บน Windows และตรวจสอบให้แน่ใจว่าสามารถเข้าถึง gcc ผ่านบรรทัดคำสั่ง)
  4. Git 2.25.1+

หมายเหตุ: หมายเลขเวอร์ชันใช้สำหรับการอ้างอิงเท่านั้น

ดาวน์โหลดและรวบรวม

คุณสามารถใช้ Git เพื่อดาวน์โหลดซอร์สโค้ด 

git clone https://github.com/tengge1/ShadowEditor.git

ใน ประเทศจีน github ช้ามากคุณสามารถใช้ gitee แทน 

git clone https://gitee.com/tengge1/ShadowEditor.git

สร้างทั้ง Windows และ Ubuntu

เว็บเวอร์ชัน:

  1. หากคุณอยู่ใน China ให้เรียกใช้ npm run set-proxy เพื่อตั้งค่า Golang และ NodeJS พร็อกซี
  2. เรียกใช้ npm install เพื่อติดตั้งการพึ่งพา NODEJS
  3. เรียกใช้ npm run build เพื่อสร้างเซิร์ฟเวอร์และเว็บ
  4. แก้ไข build/config.toml และแก้ไขโฮสต์และพอร์ต MongoDB
  5. เรียกใช้ npm start เปิดเซิร์ฟเวอร์ ตอนนี้คุณสามารถเยี่ยมชม: http://localhost:2020
  6. หากคุณเปิดใช้งาน https ในไฟล์กำหนดค่า กรุณาเยี่ยมชม: https://localhost:2020

เดสก์ท็อปเวอร์ชัน:

  1. ดาวน์โหลด MongoDB และเปิดเครื่องซิปในโฟลเดอร์ utils/mongodb
  2. สร้างเวอร์ชันเว็บ
  3. เรียกใช้ npm run build-desktop เพื่อสร้างแอพเดสก์ท็อปในโฟลเดอร์ build/desktop

ติดตั้งเป็นบริการ Windows

  1. Open PowerShell หรือ cmd ในโฟลเดอร์ build เป็นผู้ดูแลระบบ
  2. Run .ShadowEditor install เพื่อติดตั้ง ShadowEditor เป็นบริการ
  3. Run .ShadowEditor start ให้บริการ ShadowEditor
  4. ตอนนี้คุณสามารถเยี่ยมชม: http://localhost:2020
  5. คุณยังสามารถจัดการบริการนี้ได้ใน Windows Services Manager

ติดตั้งเป็นบริการ Ubuntu

  1. แก้ไข ./scripts/service_linux/shadoweditor.service ตั้งค่าเส้นทางที่ถูกต้อง
  2. เรียกใช้ sudo cp ./scripts/service_linux/shadoweditor.service /etc/systemd/system/
  3. เรียกใช้ sudo systemctl daemon-reload เพื่อโหลดบริการ Daemon
  4. เรียกใช้ sudo systemctl start shadoweditor เพื่อเริ่มบริการ
  5. เรียกใช้ sudo systemctl enable shadoweditor เพื่อเริ่มบริการอัตโนมัติ

การใช้บรรทัดคำสั่ง 

 PS E:githubShadowEditorbuild> .ShadowEditor
ShadowEditor is a 3D scene editor based on three.js, golang and mongodb.
This application uses mongodb to store data.

Usage:
  ShadowEditor [command]

Available Commands:
  debug       Debug service on Windows
  help        Help about any command
  install     Install service on Windows
  serve       Start server
  start       Start service on Windows
  stop        Stop service on Windows
  version     Print the version number

Flags:
      --config string   config file (default "./config.toml")
  -h, --help            help for ShadowEditor

Use "ShadowEditor [command] --help" for more information about a command.

คู่มือการพัฒนา

  1. ดาวน์โหลดและติดตั้ง NodeJs , golang , MongoDB และ Visual Studio Code
  2. ขอแนะนำให้ติดตั้งส่วนขยาย VSCODE ต่อไปนี้ซึ่งอาจเป็นประโยชน์ 
 ESLint, Go, Shader languages support for VS Code, TOML Language Support.

การใช้สคริปต์ NPM: 

 npm install:            install nodejs dependencies.
npm run build:          build the server and web client.
npm run build-server:   build only the server. (For development)
npm run build-web:      build only the web client. (For development)
npm run build-desktop:  build the desktoop version.
npm run dev:            build the web client automatically when files changes.(For development)
npm run copy:           Copy assets from web folder to build folder.
npm run start:          start the web server.
npm run set-proxy:      set golang and nodejs proxy. (In China only)
npm run unset-proxy:    unset golang and nodejs proxy.
npm run install-dev:    install golang development tools.
npm run eslint:         check js files and fix errors automatically.
npm run clean:          delete the web and desktop builds.
npm run clear:          delete useless nodejs packages.

การบริจาค

ขยายเพื่อดูรายละเอียด

ShadowEditor เป็นโครงการสำหรับทั้งผู้ใช้และนักพัฒนา คุณสามารถมีส่วนร่วมและลองใช้ความคิดของคุณในโครงการนี้ ไม่มีเงินบำนาญ แต่สนุกมาก เพื่อมีส่วนร่วมคุณควร:

  1. แยกที่เก็บ
  2. สร้างสาขา feat_xxx
  3. สร้างรหัสของคุณ
  4. สร้างคำขอดึง

หมายเหตุ: อย่าส่งไบนารีขนาดใหญ่หรือ Pull Request อาจถูกปฏิเสธ หากจำเป็นคุณสามารถเพิ่มไฟล์หรือไดเรกทอรีที่จะถูกละเว้นไปยังไฟล์. .gitignore

คำถามที่พบบ่อย

ขยายเพื่อดูรายละเอียด
  1. ล้มเหลวเมื่ออัปโหลดโมเดล

คุณต้องบีบอัดสินทรัพย์โมเดลลงในไฟล์ zip และไฟล์รายการไม่สามารถซ้อนกันในโฟลเดอร์ เซิร์ฟเวอร์จะคลายการบีบอัดและวางไว้ในโฟลเดอร์ ./build/public/Upload/Model public/upload/model และเพิ่มบันทึกในคอลเลกชัน mongoDB _Mesh

  1. จะรวมหลายรุ่นเข้าด้วยกันได้อย่างไร?

เรขาคณิตพื้นฐานรองรับการทำรังหลายระดับ คุณสามารถเพิ่ม group (ในเมนูเรขาคณิต) จากนั้นลากหลายรุ่นไปยัง group ในแผง Hierachy

  1. จะเปิดใช้งานอำนาจได้อย่างไร?

แก้ไข config.toml และตั้ง authority.enabled เป็น true ชื่อผู้ใช้ผู้ดูแลระบบเริ่มต้นคือ admin และรหัสผ่านคือ 123456

  1. รายงาน Brower asm.js has been disabled because the script debugger is connected. Please disconnect the debugger to enable asm.js. ข้อผิดพลาด.

ข้อผิดพลาดที่สมบูรณ์ : ASM.JS ถูกปิดใช้งานเนื่องจากตัวดีบักสคริปต์เชื่อมต่อกัน โปรดยกเลิกการเชื่อมต่อดีบักเกอร์เพื่อเปิดใช้งาน ASM.JS. ammo.js (1,1) script1028: script1028: ตัวระบุที่คาดหวัง, สตริงหรือ number shadoweditor.js (3948,8) script5009: 'Shadow' ไม่ได้กำหนด

วิธีแก้ปัญหา : เบราว์เซอร์ Tencent ไม่รองรับ ammo.js (webassembly) ที่รวบรวมด้วย Emscripten ขอแนะนำให้ใช้ Chrome หรือ Firebox แทน

  1. ฉันจะอัปเกรดจาก C# เป็น Golang เวอร์ชันได้อย่างไร

โครงสร้างข้อมูลและเว็บไคลเอ็นต์ไม่เปลี่ยนแปลงเพียงแค่คัดลอก ./ShadowEditor.Web/Upload/ โฟลเดอร์เพื่อ build/public/Upload/

  1. ไม่สามารถเปิดเวอร์ชันเดสก์ท็อปได้

Windows ต้องใช้ Visual C++ Redistributable for Visual Studio 2015 คุณสามารถติดตั้งได้จาก: https://www.microsoft.com/en-us/download/details.aspx?id=48145
หากไม่สามารถเปิดเวอร์ชันเดสก์ท็อปได้คุณสามารถดู logs.txt ; หากพอร์ตขัดแย้งกันคุณสามารถแก้ไข MongoDB และพอร์ตเว็บไซต์ใน resources/app/config.toml

  1. ฉันจะสร้างใบรับรอง HTTPS ได้อย่างไร

ติดตั้ง openssl และไคลเอนต์ Git มีอยู่แล้ว เปิด cmd , Powershell หรือ shell และเรียกใช้คำสั่งต่อไปนี้: 

openssl genrsa -out privatekey.pem 1024
openssl req -new -key privatekey.pem -out certrequest.csr
openssl x509 -req -in certrequest.csr -signkey privatekey.pem -out certificate.pem

ในบรรดาไฟล์ที่สร้างขึ้น certificate.pem คือใบรับรองและ privatekey.pem เป็นคีย์

ใบอนุญาต

ใบอนุญาต MIT

โครงการโอเพ่นซอร์ส

ขยายเพื่อดูรายละเอียด

ขอบคุณโครงการโอเพ่นซอร์สต่อไปนี้

https://github.com/golang/go
https://github.com/burntsushi/toml
https://github.com/dgrijalva/jwt-go
https://github.com/dimfeld/httptreemux
https://github.com/inconshrevable/mousetrap
https://github.com/json-iterator/go
https://github.com/mozillazg/go-pinyin
https://github.com/otiai10/copy
https://github.com/sirupsen/logrus
https://github.com/spf13/cobra
https://github.com/spf13/viper
https://github.com/urfave/Negroni
https://go.mongoDb.org/mongo-driver

https://github.com/facebook/react
https://github.com/mrdoob/three.js
https://github.com/rollup/rollup
https://github.com/babel/babel
https://github.com/eslint/eslint
https://github.com/rollup/rollup-plugin-babel
https://github.com/rollup/rollup-plugin-commonjs
https://github.com/rollup/rollup-plugin-json
https://github.com/rollup/rollup-plugin-node-resolve
https://github.com/egoist/rollup-plugin-postcsss
https://github.com/rollup/rollup-plugin-replace
https://github.com/mjeanroy/rollup-plugin-strip-banner
https://github.com/andyearnshaw/rollup-plugin-bundle-worker

https://github.com/tweenjs/tween.js
https://github.com/jedwatson/classnames
https://github.com/d3/d3-dispatch
https://github.com/i18next/i18next
https://github.com/js-cookie/js-cookie
https://github.com/facebook/prop-types
https://github.com/codemirror/codemirror
https://github.com/jquery/esprima
https://github.com/tschw/glslprep.js
https://github.com/zaach/jsonlint
https://github.com/acornjs/acorn
https://github.com/kripken/ammo.js
https://github.com/dataarts/dat.gui
https://github.com/toji/gl-matrix
https://github.com/squarefeet/shaderparticleEngine
https://github.com/mrdoob/stats.js
https://github.com/mrdoob/texgen.js
https://github.com/yomotsu/volumetricfire
https://github.com/jonbretman/amd-to-as6
https://github.com/chandlerprall/threecsg

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด