3D开发-AR.js 多Renderer支持

支持2渲染器

代码参考

// 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);

}