material-browser.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <html>
  2. <head>
  3. <title>MeshBasicMaterial</title>
  4. <style>
  5. body {margin:0;}
  6. canvas { width: 100%; height: 100% }
  7. </style>
  8. </head>
  9. <body>
  10. <script src="../../build/three.min.js"></script>
  11. <script src='../../examples/js/libs/dat.gui.min.js'></script>
  12. <script src='js/material.js'></script>
  13. <script>
  14. var gui = new dat.GUI();
  15. var scene = new THREE.Scene();
  16. var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 50 );
  17. camera.position.z = 30;
  18. var renderer = new THREE.WebGLRenderer();
  19. renderer.setSize( window.innerWidth, window.innerHeight );
  20. document.body.appendChild( renderer.domElement );
  21. var ambientLight = new THREE.AmbientLight( 0x000000 );
  22. scene.add( ambientLight );
  23. var lights = [];
  24. lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
  25. lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
  26. lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
  27. lights[0].position.set( 0, 200, 0 );
  28. lights[1].position.set( 100, 200, 100 );
  29. lights[2].position.set( -100, -200, -100 );
  30. scene.add( lights[0] );
  31. scene.add( lights[1] );
  32. scene.add( lights[2] );
  33. guiScene( gui, scene, camera );
  34. var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
  35. var mesh = new THREE.Mesh( geometry );
  36. generateVertexColors( geometry );
  37. mesh.material = chooseFromHash( gui, mesh, geometry );
  38. generateMorphTargets( mesh, geometry );
  39. scene.add( mesh );
  40. var prevFog = false;
  41. var render = function () {
  42. requestAnimationFrame( render );
  43. var time = Date.now() * 0.001;
  44. mesh.rotation.x += 0.005;
  45. mesh.rotation.y += 0.005;
  46. if( prevFog !== scene.fog ) {
  47. mesh.material.needsUpdate = true;
  48. prevFog = scene.fog;
  49. }
  50. if( mesh.morphTargetInfluences ) {
  51. mesh.morphTargetInfluences[ 0 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
  52. }
  53. renderer.render( scene, camera );
  54. };
  55. window.addEventListener( 'resize', function() {
  56. camera.aspect = window.innerWidth / window.innerHeight;
  57. camera.updateProjectionMatrix();
  58. renderer.setSize( window.innerWidth, window.innerHeight );
  59. }, false );
  60. render();
  61. </script>
  62. </body>
  63. </html>
粤ICP备19079148号