2024年Go最新google glb 模型的 webXR 演示_dom overlay(1)，最详细的docker中安装并配置redis

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

• 场景：场景就像虚拟空间，具有坐标信息并设置渲染的内容和位置。因此，我们可以添加多个对象（3D 模型）、灯光并移除它们。
• 渲染器：它显示/绘制场景。Threejs 使用 webGL 进行渲染和图像处理。
• 相机：有多种类型的相机。我们将使用透视相机，它可以根据您的观察点工作并根据观察位置改变对象大小。

// inside BeagleARView component 
  const initScene = (gl, session) => {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(
      75, // fov (angle, field of view)
      window.innerWidth / window.innerHeight, // aspect
      0.1, // frustum near length
      1000, // frustum far length
    );

现在在这个 initScene 函数中，我们将加载我们的 3D 模型

//add this at top below threejs import
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const Beagle = require('./beagle.glb')


//continue now in init function
    // load our gltf model
    var loader = new GLTFLoader();
    loader.load(
      Beagle,
      gltf => {
        model = gltf.scene;
        model.scale.set(1.8, 1.8, 1.8);
        model.castShadow = true;
        model.receiveShadow = true;

        mixer = new THREE.AnimationMixer(model);
        action = mixer.clipAction(gltf.animations[0]);
        action.setLoop(THREE.LoopRepeat, 15);
      },
      () => {},
      error => console.error(error),
    );
// we have only loaded the object haven't added that in scene now. 
// we will do it later

在同一个 fnc 中，我们现在需要在我们的 3D 模型上添加一些光。我们将使用聚光灯来正确聚焦对象并获得投射阴影功能。

spotLight = new THREE.SpotLight(lightSpotColor, lightSpotIntensity);
spotLight.position.set(1, 1,  -9);
spotLight.target = scene;
//spotLight.castShadow = true; // for now we will not work on shadows
scene.add(spotLight);

我们已经完成了场景、灯光和 3D 模型加载部分，现在我们将添加最后一个 threejs 设置部分，即渲染器。

  // create and configure three.js renderer with XR support
    renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true,
      autoClear: true,
      context: gl,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.xr.enabled = true;
    renderer.xr.setReferenceSpaceType('local');
    renderer.xr.setSession(session);

    // simple sprite to indicate detected surfaces
    reticle = new THREE.Mesh(
      new THREE.RingBufferGeometry(0.12, 0.15, 20).rotateX(-Math.PI / 2),
      new THREE.MeshPhongMaterial({ color: 0x0fff00 }),
    );
    // we will update it's matrix later using WebXR hit test pose matrix
    reticle.matrixAutoUpdate = false;
    reticle.visible = false;
    scene.add(reticle);
}
// closing intiScene

在上面的代码中，我们添加了矩形对象，这将有助于识别我们指向相机的表面区域。

reticle image

在 initScene 中设置完所有 threejs 之后，我们现在将开始做与 webxrSession 相关的事情，我们称之为 initScene。

如果没有用户交互，我们将无法启动 webxrSession 我们将首先在我们的 jsx 返回中添加一个按钮

const xrButton = useRef(null);

return (
// id xrOverlay will be used later
<div id="xrOverlay">
  <button id="xrbutton"  ref={xrButton} onClick={onXRButtonClick}> 
    Start experience
  </button>
</div> )

  function checkXR() {
    if (!window.isSecureContext) {
      // show message to use secure connection, 
      // webXR need https for giving device permission
    }
    if (navigator.xr) {
     xrButton?.current?.disabled = false;
    } else {
     xrButton?.current?.disabled = true
      // show message that this device or browser does not support webXR
    }
}

  React.useEffect(() => {
    checkXR();
  }, []);

我们添加了检查是否支持 XR 的功能。现在我们将处理启动 webXR 会话的主要部分，其中包含我们需要的命中和放置功能所需的功能。

我们将要求immersive session提供dom-overlay, local, and hit-test功能。

• dom-overlay：它允许我们在会话时在屏幕上添加 html DOM 内容。
• local：在会话开始时启用您的设备作为视图位置。
• hit-test：它提供了我们击中并想要放置我们的 3D 模型的表面信息。

我们可以根据我们的需要请求更多功能，例如hand-tracking, depth sensing等。

 let xrSession = null;
  let xrRefSpace = null;
  let xrHitTestSource = null;

  function onXRButtonClick() {
    if (!xrSession) {
      navigator.xr
        .requestSession('immersive-ar', {
          optionalFeatures: ['dom-overlay'],
          requiredFeatures: ['local', 'hit-test'],
          domOverlay: { root: document.getElementById('xrOverlay') },
        })
        .then(onSessionStarted, onRequestSessionError);
    } else {
      xrSession.end();
    }
  }

我们已经通过document.getElementById(‘xrOverlay’)了，任何对此 DOM 的输入和交互都只能用于 xrSession 操作。

 function onSessionStarted(session) {
    setIsWebXRStarted(true);
    xrSession = session;

    // create a canvas element and WebGL context for rendering
    session.addEventListener('end', onSessionEnded);
    let canvas = document.createElement('canvas');
    gl = canvas.getContext('webgl', { xrCompatible: true });
    session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });

   // here we have register source from where we want to get hit test result in surronding         


![img](https://img-blog.csdnimg.cn/img_convert/9fe12974355c158c032df70fd415d830.png)
![img](https://img-blog.csdnimg.cn/img_convert/796a02bab5c8853ca7a05f4f709708ce.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618658159)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618658159)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**