3D開發-AR.js 多Renderer支持

時間 2019-11-08

標籤 3d 開發 ar.js renderer 支持欄目 JavaScript 简体版

原文原文鏈接

支持2渲染器css

代碼參考app

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

// CSS3Drendererspa

cssScene = new THREE.Scene();three

cssScene.add(camera);ci

cssRenderer = new THREE.CSS3DRenderer();element

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

cssRenderer.domElement.style.position = 'absolute'it

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

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

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。