项目作者: pegasus1982

项目描述 :
:muscle: design 3d sofa, calculate total price at e-commerce site for sofa seller
高级语言: JavaScript
项目地址: git://github.com/pegasus1982/3D-sofa-configurator.git
创建时间: 2019-01-11T01:54:15Z
项目社区:https://github.com/pegasus1982/3D-sofa-configurator

开源协议:

下载


3D Sofa Configurator for E-Commerse

Positioning Example
Positioning Example

Project Folder Structure

models

Contains all sofa elements

textures

Contains all texture data(leathers, sprites)

Model preparation

All models are 3DS format.

Positioning

All models should be located in x : 0 and y : 0

Positioning Example

Rotation

The backchair should be located from right

Rotation Example

Rotation Example

Rotation Example

UV Info

UV layout

All UV information should be prepared like above image

Dividing material groups

Before export to 3DS file, all objects should be named with special prefixes

For example,

The objects which should be colored with primary color, will be named with prefix : “CG-1”.

Otherwise the objects which should be colored with secondary color, will be named with prefix : “CG-2”.

The object which should have glass or metal materials, will be named with prefixes : “glass” and “metal”

Material Group

As you can see from above box, the cylinder is pillar and should have metal material.

So that it has “metal-“ as a prefix in it’s name.

Representation of expanding information

All sofa element may have expanding availabilities to every direction.

So that availabilities should be represented in javascript

That info are below

  1. combineInfo : {
  2. backChair : ['top'], //back chair position
  3. leftTop : [false,false],
  4. rightTop : [false,true],
  5. rightBottom : [true,false],
  6. leftBottom : [false,false]
  7. }

The explanations of this structure are below.

Expanding

And these information will be used to create add ( + ) sprites for every sofa elements

Code Analysis

The representation of sofa information

  1. {
  2. name : "LV8005", //category
  3. thumbImage : 'images/jori-glove-pure-2018.jpg', //thumb image url for this category
  4. description : "Cuno Frommherz", //description
  5. components : [
  6. //real sofa element
  7. {
  8. name : "LV8005 1",
  9. thumbImage : "LV8005-1.jpg", //thumb image url for this item
  10. data : "LV8005-1.3DS", //indicate model file url
  11. //expanding information
  12. combineInfo : {
  13. backChair : ['top'],
  14. leftTop : [false,false],
  15. rightTop : [false,true],
  16. rightBottom : [true,false],
  17. leftBottom : [false,false]
  18. }
  19. },
  20. {
  21. name : "LV8005 3",
  22. thumbImage : "LV8005-3.jpg",
  23. data : "LV8005-3.3DS",
  24. combineInfo : {
  25. backChair : ['top'],
  26. leftTop : [true,false],
  27. rightTop : [false,true],
  28. rightBottom : [true,false],
  29. leftBottom : [false,true]
  30. }
  31. },
  32. ................................................................
  33. {
  34. name : "LV8005 B6",
  35. thumbImage : "LV8005-B6.jpg",
  36. data : "LV8005-B6.3DS"
  37. },
  38. ]
  39. },

The Representation of color information.

  1. lstColor = [
  2. {
  3. category : "bonded", //leather type
  4. list : [
  5. "9d4f0d", //color value(rgb hex)
  6. "706166",
  7. "3c1a1b",
  8. "5d270b"
  9. ]
  10. },
  11. {
  12. category : "genuine",
  13. list : [
  14. "414352",
  15. "6b7380"
  16. ]
  17. },
  18. {
  19. category : "italian",
  20. list : [
  21. "5e602e",
  22. "412d24",
  23. ]
  24. }
  25. ]

The variable which contains all sofa information

SofaConfigurator -> lstElement;

Structure

  1. {
  2. name : object.name, //unique name for this object
  3. model : object //3ds models with sprites etc.
  4. }