hujiulong / vue-3d-model

📷 vue.js 3D model viewer component
https://vue-3d-model.netlify.app
MIT License
2.47k stars 470 forks source link

关于灯光 #170

Open bmwQAQ opened 4 years ago

bmwQAQ commented 4 years ago

大佬可不可以详细的写一下我怎样加入灯光啊

wangerzi commented 4 years ago

可以参考下 model-obj 里边对于灯光的配置

https://github.com/hujiulong/vue-3d-model/blob/77fc188dcd37e4fabf1c183ff8fad8a00f73c003/src/model-obj.vue#L20-L34

具体支持的灯光类型目前没有具体文档,可以看下组件内部的实现方法,结合这俩就会用了 https://github.com/hujiulong/vue-3d-model/blob/77fc188dcd37e4fabf1c183ff8fad8a00f73c003/src/model-mixin.vue#L361-L417

bmwQAQ commented 4 years ago

灯光搞定了,多谢帮助

ayushishah-easternts commented 4 years ago

Hi can you please guide us how did you solve the lighting problem?

wangerzi commented 4 years ago

Hi can you please guide us how did you solve the lighting problem?

@AyushiBShah What problem do you encounter, you can manage the light by modify the lights prop to the

ayushishah-easternts commented 4 years ago

@wangerzi : There is no problem as such but the model needs a different settings of light for viewing. So if you can guide me how can I do changes related to that

wangerzi commented 4 years ago

@wangerzi : There is no problem as such but the model needs a different settings of light for viewing. So if you can guide me how can I do changes related to that

@AyushiBShah If you don't want to change the lights setting for every model, you can try my light setting, although sometimes it looks a bit dazzling.

lights: [
        {
          type: 'DirectionalLight',
          position: { x: 1, y: 1, z: 1 },
          color: 0xffffff,
          intensity: lightStrength,
        },
        {
          type: 'DirectionalLight',
          position: { x: -1, y: 1, z: 1 },
          color: 0xffffff,
          intensity: lightStrength,
        },
        {
          type: 'DirectionalLight',
          position: { x: 1, y: 1, z: -1 },
          color: 0xffffff,
          intensity: lightStrength,
        },
        {
          type: 'DirectionalLight',
          position: { x: -1, y: 1, z: -1 },
          color: 0xffffff,
          intensity: lightStrength,
        },
        {
          type: 'DirectionalLight',
          position: { x: 0, y: -1, z: 0 },
          color: 0xffffff,
          intensity: lightStrength,
        },
      ]

image

Or you can use the envMap and set the lights empty, although this project can't support very well in sometimes. image

WebRookie commented 10 months ago
lightStrength 

这个在哪定义呢?