rillian
/
cglvr


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Ring test</title>
    <style>
      body {
        color: #999999;
        background: #555555;
        margin: 0;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <script src=js/three.js></script>
    <script>
// Set up WebGL canvas.
var width = window.innerWidth;
var height = window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(0.4, 0.9, 0.1);
var material = new THREE.MeshStandardMaterial( { color: 0x99aaff, } );
var box = new THREE.Mesh(geometry, material);
scene.add(box);

// Put the floor at -1.0 m so the origin is in front of us.
camera.position.z = 2.0;
camera.position.y = 0.6;
camera.lookAt(new THREE.Vector3(0, 0, 0));

var light = new THREE.PointLight(0xffffff);
light.position.x = 10;
light.position.y = 50;
light.position.z = 100;
scene.add(light);

function origin_ring(radius = 0.60) {
  let points = 128;
  let curve = new THREE.EllipseCurve(0, 0, radius , radius, 0, 2.0*Math.PI,
      false, Math.PI/2);
  let path = new THREE.Path( curve.getPoints(points) );
  let geometry = path.createPointsGeometry(points);
  let material = new THREE.LineBasicMaterial( { color: 0x999999, } );
  let circle = new THREE.Line(geometry, material);
  return circle;
}
scene.add(origin_ring(1.0));

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  box.rotation.x += 0.01;
  box.rotation.y += 0.01;
}
render();
    </script>
  </body>
</html>