Rotation and zoom problem

Web
1

This is killing me, I can’t solve the problem by turning off the model’s rotation and zooming on my webpage, I want to left only the head movement to the cursor but block any opportunity to rotate or zoom my model. The most ironic thing is that you seem to have a method: EnableRotation but it simply does not work regardless of the value True or False

2

UPT. I created div that close avatar under it but now head movement doesn’t work, how to fix it?

3

For the head movement, it’s likely being blocked by the div overlay you’ve created. The head movement is tied to the mouse cursor position over the avatar, so if there’s a div blocking the avatar, the mouse events won’t reach it.

4

Hi! Thanks for the answer, I’ll be glad to remove div, but then I need the answer for my main problem: “How to block rotation and zooming for users?” Cause even when I just try scrolling page down instead of this, my model has zooming

5

What script are you using the animate the avatar? Are you using any specific package?
Ideally, you can share more info, a video and code

6

I use Visage library, for now my code looks like that:

div className={`absolute inset-0 top-[120px]  max-w-7xl mx-auto ${styles.paddingX} flex flex-row items-start gap-5 `}> 
      
      <div className="absolute inset-0 z-10">
          <div
            className="max-w-10xl mx-auto flex flex-row  items-start z-1"
          ></div>
        </div>

        <Avatar  
          className={`max-w-10xl mx-auto flex flex-row items-start z-1`}
          enableRotate={false}
          animationSrc={animationSrc}
          modelSrc={modelSrc}
          shadows={true}
          ambientOcclusion={true}
          headMovement={true}      
          ambientLightColor="#fff5b6"
          ambientLightIntensity={0.25}
          lockVertical={true}
          poseSrc={"/visage/male-pose-standing.glb"}
          bloom={{
            intensity: 0.1,
            kernelSize: 1,
            luminanceSmoothing: 1,
            luminanceThreshold: 1,
            materialIntensity: 3.3,
            mipmapBlur: true
          }}
          environment="hub"
          fov={40}
         
          onLoaded={function noRefCheck(){}}
          onLoading={function noRefCheck(){}}
          emotion={{
            "eyeSquintLeft": 0.4,
            "eyeSquintRight": 0.2,
            "mouthSmileLeft": 0.37,
            "mouthSmileRight": 0.36,
            "mouthShrugUpper": 0.27,
            "browInnerUp": 0.3,
            "browOuterUpLeft": 0.37,
            "browOuterUpRight": 0.49
          }}
          dpr={2}
          scale={0.7}
          cameraInitialDistance={1.2}
          cameraTarget={1.15}
          idleRotation={false}
          spotLightAngle={0.314}
          spotLightColor="#fff5b6"
        />

      </div>
7

And I don’t need creator mode, just an avatar without any opportunities to move or rotate him

image
image1107×979 31.8 KB

8

If you would like to completely disable the mouse input you can do as suggested in this GitHub topic: Orbit Controls & Zooming · Issue #68 · readyplayerme/visage · GitHub

You can try disabling the pointer events for the canvas or overlaying an HTML element which will hinder interacting with the canvas.

If you would like just to disable the zoom and rotation but keep the head movement following a cursor, you need to specifically block mouse-down and touch-down movements in that case.
We don’t have component-based options for disabling these interactions right now, so you can do it on the HTML level.