javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Three.js - WebXR - Look to Select (selection cursor)</title>
    <style>
    html, body {
        height: 100%;
        margin: 0;
    }
    #c {
        width: 100%;
        height: 100%;
        display: block;
    }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
  </body>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<script type="importmap">
{
  "imports": {
    "three": "../../build/three.module.js"
  }
}
</script>

<script type="module">
import * as THREE from 'three';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const left = -2;    // Use values for left
  const right = 2;    // right, top and bottom
  const top = 1;      // that match the default
  const bottom = -1;  // canvas size.
  const near = -1;
  const far = 1;
  const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

  function makeDataTexture(data, width, height) {
    const texture = new THREE.DataTexture(data, width, height, THREE.RGBAFormat);
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.NearestFilter;
    texture.needsUpdate = true;
    return texture;
  }

  const backgroundColors = new Uint8Array([
      0,   0,   0, 255,  // black
     90,  38,  38, 255,  // dark red
    100, 175, 103, 255,  // medium green
    255, 239, 151, 255,  // light yellow
  ]);
  const backgroundTexture = makeDataTexture(backgroundColors, 2, 2);
  backgroundTexture.wrapS = THREE.RepeatWrapping;
  backgroundTexture.wrapT = THREE.RepeatWrapping;
  backgroundTexture.repeat.set(4, 4);

  const scene = new THREE.Scene();
  scene.background = backgroundTexture;

  //const innerRadius = 0.4;
  //const outerRadius = 0.5;
  //const segments = 64;
  //const cursorGeometry = new THREE.RingGeometry(
  //    innerRadius, outerRadius, segments);

  const ringRadius = 0.4;
  const tubeRadius = 0.1;
  const tubeSegments = 4;
  const ringSegments = 64;
  const cursorGeometry = new THREE.TorusGeometry(
      ringRadius, tubeRadius, tubeSegments, ringSegments);

  const cursorColors = new Uint8Array([
    64, 64, 64, 64,       // dark gray
    255, 255, 255, 255,   // white
  ]);
  const cursorTexture = makeDataTexture(cursorColors, 2, 1);

  const cursorMaterial = new THREE.MeshBasicMaterial({
    color: 'white',
    map: cursorTexture,
    transparent: true,
    blending: THREE.CustomBlending,
    blendSrc: THREE.OneMinusDstColorFactor,
    blendDst: THREE.OneMinusSrcColorFactor,
  });
  const cursor = new THREE.Mesh(cursorGeometry, cursorMaterial);
  scene.add(cursor);

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      const aspect = canvas.clientWidth / canvas.clientHeight;
      camera.left = -aspect;
      camera.right = aspect;
      camera.updateProjectionMatrix();
    }

    const fromStart = 0;
    const fromEnd = 2;
    const toStart = -0.5;
    const toEnd = 0.5;
    cursorTexture.offset.x = THREE.MathUtils.mapLinear(
        time % 2,
        fromStart, fromEnd,
        toStart, toEnd);

    renderer.render(scene, camera);
  }

  renderer.setAnimationLoop(render);
}

main();
</script>
</html>