WebXR光线估计接口测试代码

WebXR Lighting Estimation API test codes

webxr, api

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2097
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

import { XRLighting } from '/uploads/2010/xr-lighting.js';

let container;
  let camera, scene, renderer;
  let controller;
  let xrLighting;
  let ballGroup;
  let selecting = false;

const SPHERE_DISTANCE = 1.6;

async function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20);

// Try to create a WebGL 2 context if we can, otherwise fall back to WebGL.
    let canvas = document.createElement('canvas');
    let gl = null;
    for (let contextType of ['webgl2', 'webgl', 'experimental-webgl']) {
      gl = canvas.getContext(contextType, { antialias: true, xrCompatible: true });
      if (gl) break;
    }

renderer = new THREE.WebGLRenderer({ canvas: canvas, context: gl });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.physicallyCorrectLights = true;
    renderer.xr.enabled = true;
    container.appendChild(renderer.domElement);

document.body.appendChild(ARButton.createButton(renderer, { optionalFeatures: [ 'light-estimation' ] } ));

xrLighting = new XRLighting(renderer);
    scene.add(xrLighting);

xrLighting.addEventListener('envmapchange', () => {
      scene.environment = xrLighting.envMap;
      if (!xrLighting.xrSession) {
        scene.background = xrLighting.envMap;
      }
    });

renderer.xr.addEventListener('sessionstart', (session) => {
      xrLighting.xrSession = renderer.xr.getSession();
      scene.background = null;
    });

renderer.xr.addEventListener('sessionend', () => {
      xrLighting.xrSession = null;
      scene.background = xrLighting.envMap;
    });

controller = renderer.xr.getController(0);
    controller.addEventListener('selectstart', () => { selecting = true; });
    controller.addEventListener('selectend', () => { selecting = false; });
    scene.add(controller);

window.addEventListener('resize', onWindowResize, false);

await xrLighting.loadHDRSkybox('//techbrood.com/uploads/media/misty_pines_2k.hdr');

renderer.setAnimationLoop(render);
  }

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

function render() {
    if (selecting) {
      ballGroup.position.set(0, 0, -SPHERE_DISTANCE).applyMatrix4(controller.matrixWorld);
      ballGroup.quaternion.setFromRotationMatrix(controller.matrixWorld);
    }
    renderer.render(scene, camera);
  }

init();

</script>

WebXR Lighting Estimation API test codes

webxr, api

编辑器支持Emmet

快捷键

WebXR Lighting Estimation API test codes

webxr, api

HTML5 Web音频应用程序接口（Web Audio API）实例：在线演奏木琴

HTML5 Web音频应用程序接口（Web Audio API）实例：参数均衡器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：