therejs vrjs实例练习

最新推荐文章于 2025-05-27 17:11:53 发布

tang05709

最新推荐文章于 2025-05-27 17:11:53 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/tang05709/article/details/86611517

js 同时被 2 个专栏收录

109 篇文章

订阅专栏

threejs与webar

10 篇文章

订阅专栏

本文介绍如何使用AR.js和Three.js库在Web上实现增强现实效果，包括设置WebGL渲染器、创建场景、配置AR工具包上下文、添加几何体以及实时更新渲染。通过实例代码详细展示了从摄像头读取数据、处理AR标记和渲染3D模型的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考： https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/basic.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>three ar</title>
    <style>
      #canvas-frame {
        width: 100%;
        height: 600px;
      }
      canvas {
        width: 100%;
        height: 600px;
      }
    </style>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/stats.min.js"></script>
    <script type="text/javascript" src="js/ar.min.js"></script>
    <script>
      THREEx.ArToolkitContext.baseURL = '';
    </script>
    
  </head>
  <body>
    
    <script>
      // 初始化 renderer
      var renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
      });
      renderer.setClearColor(new THREE.Color('lightgrey'), 0);
      renderer.setSize(640, 480);
      renderer.domElement.style.position = 'absolute';
      renderer.domElement.style.top = '0px';
      renderer.domElement.style.left = '0px';
      document.body.appendChild(renderer.domElement);

      //
      var onRenderFcts = [];
      
      // 创建场景
      var scene = new THREE.Scene();
      // 创建相机
      var camera = new THREE.Camera();
      scene.add(camera);

      // arToolkitSource
      var arToolkitSource = new THREEx.ArToolkitSource({
        sourceType: 'webcam', // 从摄像头读取

        // sourceType: 'image', // 从图片读取
        // sourceUrl: THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg', //图片地址

        // sourceType: 'video', // 从视频读取
        // sourceUrl: THREEx.ArToolkitContext.baseURL + '../data/videos/video.mp4', //视频地址
      });
      
      arToolkitSource.init(function onReady() {
        onResize();
      });

      window.addEventListener('resize', function() {
        onResize();
      });

      function onResize() {
        arToolkitSource.onResize();
        arToolkitSource.copySizeTo(renderer.domElement);
        if (arToolkitContext.arController !== null) {
          arToolkitSource.copySizeTo(arToolkitContext.arController.canvas);
        }
      }

      // arToolkitContext
      var arToolkitContext = new THREEx.ArToolkitContext({
        cameraParametersUrl: THREEx.ArToolkitContext.baseURL + 'data/camera_para.dat',
        detectionMode: 'mono'
      });

      arToolkitContext.init(function onCompleted() {
        camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
      });
      onRenderFcts.push(function() {
        if (arToolkitSource.ready === false) {
          return;
        }
        arToolkitContext.update(arToolkitSource.domElement);
        scene.visible = camera.visible;
      });

      // arMarkerControls
      var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
        type: 'pattern',
        patternUrl: THREEx.ArToolkitContext.baseURL + 'data/patt.hiro',
        changeMatrixMode: 'cameraTransformMatrix'
      });
      scene.visible = false;
      
      // 添加几何体
      // 立方体
      var geometry = new THREE.CubeGeometry(10, 10, 10);
      var material = new THREE.MeshNormalMaterial();
      var mesh = new THREE.Mesh(geometry, material);
      mesh.position.y = geometry.parameters.height / 2;
      scene.add(mesh);
      // 扭曲管道
      var geometry = new THREE.TorusKnotGeometry(0.3, 0.1, 64, 16);
      //var geometry = new THREE.CubeGeometry(10, 10, 10);
      var material = new THREE.MeshNormalMaterial({Color: 0x00ff00});
      var mesh = new THREE.Mesh(geometry, material);
      mesh.position.y = 0.5;
      scene.add(mesh);

      onRenderFcts.push(function(delta) {
        mesh.rotation.x += Math.PI * delta;
      });

      onRenderFcts.push(function() {
        renderer.render(scene, camera);
      });
      
      var lastTimeMsec = null;
      requestAnimationFrame(function animate(nowMsec) {
        requestAnimationFrame(animate);
        lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60;
        var deltaMsec = Math.min(200, nowMsec - lastTimeMsec);
        lastTimeMsec = nowMsec;
        onRenderFcts.forEach(function(onRenderFct) {
          onRenderFct(deltaMsec / 1000, nowMsec / 1000);
        })
      });

    </script>
  </body>
</html>