raytracer_sandbox.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js - raytracing renderer</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <style>
  8. body {
  9. font-family: Monospace;
  10. color: #ffffff;
  11. margin: 0px;
  12. overflow: hidden;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../build/three.min.js"></script>
  18. <script src="js/renderers/RaytracingRenderer.js"></script>
  19. <script>
  20. var container;
  21. var camera, controls, scene, renderer;
  22. var torus, cube;
  23. init();
  24. render();
  25. function init() {
  26. container = document.createElement( 'div' );
  27. document.body.appendChild( container );
  28. var info = document.createElement( 'div' );
  29. info.style.position = 'absolute';
  30. info.style.top = '10px';
  31. info.style.width = '100%';
  32. info.style.textAlign = 'center';
  33. info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js<a/> - raytracing renderer';
  34. container.appendChild( info );
  35. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  36. camera.position.z = 600;
  37. scene = new THREE.Scene();
  38. var geometry = new THREE.TorusKnotGeometry( 150 );
  39. for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
  40. geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
  41. }
  42. torus = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
  43. scene.add( torus );
  44. // Plane
  45. var geometry = new THREE.BoxGeometry( 200, 200, 200 );
  46. for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
  47. geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
  48. }
  49. cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } ) );
  50. scene.add( cube );
  51. var light = new THREE.PointLight( 0xffffff, 0.5 );
  52. light.position.set( 300, 300, 300 );
  53. scene.add( light );
  54. var light = new THREE.PointLight( 0x0000ff );
  55. light.position.set( - 300, 300, 300 );
  56. scene.add( light );
  57. renderer = new THREE.RaytracingRenderer();
  58. renderer.setClearColor( 0xf0f0f0 );
  59. renderer.setSize( window.innerWidth, window.innerHeight );
  60. container.appendChild( renderer.domElement );
  61. }
  62. function render() {
  63. renderer.render( scene, camera );
  64. }
  65. </script>
  66. </body>
  67. </html>