WebAR开发笔记

最新推荐文章于 2025-03-07 08:15:19 发布

Dear Mr Yuan

最新推荐文章于 2025-03-07 08:15:19 发布

阅读量536

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WebAR webGL 文章标签： WebAR Html js

本文链接：https://blog.youkuaiyun.com/qq_38695918/article/details/88685046

这篇博客介绍了WebAR开发的关键步骤，包括使用AR.js解决摄像头问题，初始化ArcToolkit环境，以及模型导入如OBJ和MTL。同时提到了Three.js支持的多种模型格式，如JSON, OBJ, Collada, STL, FBX, CTM, VTK和PDB。" 127362679,15681852,原生、H5与混合开发：移动应用的三大模式对比,"['iOS开发', 'macOS开发', '原生App', 'HTML5', '混合App']

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

关键步骤

*这里的js文件已经解决了摄像头前置后置问题（AR.js）
访问网址体验
https://www.ljclass.com/AR/Cu(OH)2.html

1.渲染器关键代码

var renderer= new THREE.WebGLRenderer({
        antialias: true,                                    //开启抗锯齿
        alpha: true                                          //开启背景透明
    });
    renderer.setClearColor(new THREE.Color('lightgrey'), 0);
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.domElement.style.position = 'absolute';
    renderer.domElement.style.top = '0px';
    renderer.domElement.style.left = '0px';
    document.body.appendChild(renderer.domElement);

    // array of functions for the rendering loop 呈现循环的函数数组
    var onRenderFcts= [];

2.场景和摄像机

关键代码

var scene= new THREE.Scene();
    var light = new THREE.DirectionalLight(0xffffff,1.0);

    //位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不同
    //light.position.set(0,1,0.5 ).normalize(

最低0.47元/天解锁文章

200万优质内容无限畅学