AR.js专题-多Renderer支持

支持2渲染器

代码参考

https://threejs.org/docs/#examples/renderers/CSS3DRenderer

// CSS3Drenderer

cssScene = new THREE.Scene();

cssScene.add(camera);

cssRenderer = new THREE.CSS3DRenderer();

cssRenderer.setSize(window.innerHeight, window.innerWidth);

cssRenderer.domElement.style.position = 'absolute'

cssRenderer.domElement.style.top = '0px'

cssRenderer.domElement.style.left = '0px'

document.body.appendChild(cssRenderer.domElement);

element = document.createElement('div');

element.style.width = 20 + 'px';

element.style.height = 10 + 'px';

element.style.opacity = 0.75;

element.style.background = "gray";

element.innerHTML = 'Hello CSS3';

// cssObject = new THREE.CSS3DObject(element);

cssObject = new THREE.CSS3DSprite(element);

cssObject.scale.set(0.1, 0.1, 0.1);

cssScene.add(cssObject);

// 更新update()

if (smoothedRoot) {

if(smoothedRoot.visible){

element.style.display = "block"

}else {

element.style.display = "none"

}

cssObject.position.copy(smoothedRoot.position);

// cssObject.rotation.copy(smoothedRoot.rotation);

}

转载于:https://www.cnblogs.com/zhen-android/p/9484894.html

AR.js专题-多Renderer支持相关推荐

增强现实之开源AR库——AR.js
AR.js是一个web端的AR库,它完全开源免费,获得了很高的热度.我们要实现的效果如下: 首先去github下载AR.js库: AR.js下载建议顺带看下作者给出的介绍.介绍里给出一个示例,我们在 ...
【AR.js】初步认识与官方示例的使用
说在前面测试浏览器:Microsoft Edge(PC版本 97.0.1072.55)/Firefox(Android) github库:AR.js AR系列文章:这里 go版本:go versio ...
js在一个指定元素前添加内容_WebAR开发指南（1）---使用AR.js实现第一个WebAR demo...
前面有一篇文章万字干货介绍WebAR的实现与应用分析了目前流行的WebAR框架并简单的介绍一些实现方法,这个专栏我们具体的来通过一些框架实现WebAR效果. 关于AR.js AR.js是一个轻量级的 ...
Danfo.js专题 - Series对象
Danfo.js专题 - Series对象 jcLee95 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550 ...
用AR.js做图片追踪的webAR Demo
用AR.js做图片追踪的webAR Demo Demo效果项目地址部署使用页面代码替换想要追踪的图片 (1)web版(推荐使用) (2)node版替换模型 Demo效果可在手机浏览器中打开 ...
AR.js 学习笔记
中文文档链接: 首页 | AR.jsAR.js 是 Web 端增强现实的轻量级框架,具有图像追踪.基于位置的AR和标记跟踪等功能.http://febeacon.com/arjs-docs-zh-cn ...
WebAR开发指南（1）---使用AR.js实现第一个WebAR demo
以下内容由公众号:三次方AIRX(国内领先的AI.AR.VR技术学习与交流平台) 整理前面有一篇文章万字干货介绍WebAR的实现与应用分析了目前流行的WebAR框架并简单的介绍一些实现方法,这个专栏 ...
AR.js开发问题详解（二维码识别不出来及AR二维码如何进行训练）
AR.js开发问题详解(二维码识别不出来及AR二维码如何进行训练) 1. 大家碰到的很多都是二维码识别不出来的情况. 原因:周围环境的光太强或太暗,遮挡了二维码的信息,摄像头识别不到全部的信 ...
图像追踪、AR识别、AR.js应用
一.创建图片描述符 1.1 下载创建图片描述符的项目demo链接 https://download.csdn.net/download/qq_39951524/87545994?spm=1001.20 ...

AR.js专题-多Renderer支持

AR.js专题-多Renderer支持相关推荐

最新文章

热门文章