doubt about the shadow - Githubissues

BrunoFigueiraBarros commented 1 year ago

The shadow doesn't work after adding the MINDAR library, could you help me

vishnusaivivek commented 1 year ago

Just make sure you are adding different types of lights to the scene like ambient, directional etc..., and make sure the model lies in its coverage, you can find bounds for lights by using a-frame inspector where you can practically visualise the entire scene, and finally make sure you are using shadow property on the model to cast shadows and have a plane to receive shadow with property shadow set to receive true.

For further clarification, just share your source code, will be happy to help you.

BrunoFigueiraBarros commented 1 year ago

Thanks for helping, this is my code, but the shadow is not working


<html>
<head>  
  <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
</head>
<body>
<a-scene id="scene-menu" mindar-image="filterMinCF: 0.002; filterBeta: 0.001; imageTargetSrc: assets/imagem/rd3.mind" color-space="sRGB" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" orientation-listener="" inspector="" keyboard-shortcuts="" screenshot="" aframe-inspector-removed-embedded="undefined">
    <a-assets>

      <a-asset-item id="Gondola" src="assets/3d/Gondola.gltf"></a-asset-item>

      <a-asset-item id="Pata473" src="assets/3d/Pata473Wei.gltf"></a-asset-item>
      <a-asset-item id="Col350Appia" src="assets/3d/Col600Demoi.gltf"></a-asset-item>

    </a-assets>
    <a-camera position="0 0 0" look-controls="enabled: false" cursor="rayOrigin: mouse" renderer="colorManagement: true, physicallyCorrectLights" raycaster="far: 10000; objects: .clickable2; direction: 0.004099493536098656 -0.09287290292898585 -0.9956695325529905; origin: 1016.8753812035798 656.8419140428822 3618.2127390604123; useWorldCoordinates: true" camera="" rotation="" wasd-controls="" data-aframe-inspector-original-camera=""></a-camera>

    <a-entity id="menu_target" position="" mindar-image-target="" camera="active: false">

      <a-gltf-model rotation="" position="0 -0.5 0" shadow="" scale="0.15 0.15 0.15" src="#Gondola" gltf-model="assets/3d/Gondola.gltf">     
        <a-gltf-model rotation="" position="-4 8.5 -0.5" scale="0.075 0.075 0.075" shadow="" src="#Col600Demoi" gltf-model="assets/3d/Col600Demoi.gltf"></a-gltf-model>
         <a-gltf-model rotation="" position="3.0 2.3 -0.5" scale="0.075 0.075 0.075" shadow="" src="#Col600Appia" ></a-gltf-model>
      </a-gltf-model>
      <a-entity light="type: ambient"></a-entity>
      <a-plane light="type: directional; color: #FFF; intensity: 1;shadowCameraVisible: true;castShadow:true" position="0.35691 1.07493 2.11279"></a-plane>
    </a-entity>
</a-scene>
</body>
</html>

vishnusaivivek commented 1 year ago

just add light as a different entity instead of a-plane, then thereafter add shadow attribute to the plane with value set to "receive:true", similarly set "cast:true" to the every a-gltf-model, and then add particular position to the light and try to visualise the scene from a-frame inspector and find the shadowCameraTop, shadowCameraLeft, shadowCameraRight, shadowCameraBottom values and add them to the light then shadow will appear, if you wish to change sharpness of shadow you can use shadowMapHeight, shadowMapWidth in the light.

Below is the reference tutorial to achieve the requirement.

https://youtu.be/Ny1Iu4vY3QY

hiukim / mind-ar-js

doubt about the shadow #289