API tools faq
paste
Advertisement
Guest User

Interactive three.js application

a guest
Oct 9th, 2013
370
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 9.27 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.         <title> Interaction </title>
  4.         <style>
  5.             canvas { width:100%; height:100%; background-color: black }
  6.             body { background-color: white };
  7.         </style>
  8.     </head>
  9.     <body>
  10.         <h1 align= "center" style="color:blue"> Interaction </h1>
  11.         <div style="width:1000px;">
  12.             <div style="float:left;display:inline-block; width:250px; margin-left:10px; padding:20px;">
  13.                 <h3> Light </h3>
  14.                 <table border="1">
  15.                     <tr>
  16.                         <td> Color </td>
  17.                         <td> <input type="text" id="light-color" value="0xffffff"> </input> </td>
  18.                     </tr>
  19.                     <tr>
  20.                         <td> Type </td>
  21.                         <td>
  22.                             <select id="light-type">
  23.                                 <option value="point"> Point Light </option>
  24.                                 <option value="spot"> Spot Light </option>
  25.                                 <option value="ambient"> Ambient Light </option>
  26.                                 <option value="area"> Area Light </option>
  27.                                 <option value="directional"> Directional Light </option>
  28.                             <select>
  29.                         </td>
  30.                     </tr>
  31.                     <tr>
  32.                         <td> x position </td>
  33.                         <td>
  34.                             <input type="number" value="0" id="light-position-x"> </input>
  35.                         </td>
  36.                     </tr>
  37.                     <tr>
  38.                         <td> y position </td>
  39.                         <td>
  40.                             <input type="number" value="0" id="light-position-y"> </input>
  41.                         </td>
  42.                     </tr>
  43.                     <tr>
  44.                         <td> z position </td>
  45.                         <td>
  46.                             <input type="number" value="20" id="light-position-y"> </input>
  47.                         </td>
  48.                     </tr>
  49.                 </table>
  50.                 <button onClick="changeLightParameters()" style="width:130px;"> Apply </button>
  51.             </div>
  52.             <div style="float:left;display:inline-block; width:250px; margin-left:10px; padding:20px;">
  53.                 <h3> Material </h3>
  54.                 <table border="1">
  55.                     <tr>
  56.                         <td> Diffuse </td>
  57.                         <td> <input type="text" id="material-diffuse" value="0xffffff"> </input> </td>
  58.                     </tr>
  59.                     <tr>
  60.                         <td> Ambient </td>
  61.                     <td> <input type="text" id="material-ambient" value="0xffffff"> </input> </td>
  62.                     </tr>
  63.                     <tr>
  64.                         <td> Emissive </td>
  65.                         <td> <input type="text" id="material-emissive" value="0xffffff"> </input> </td>
  66.                     </tr>
  67.                     <tr>
  68.                         <td> Specular </td>
  69.                         <td> <input type="text" id="material-specular" value="0xffffff"> </input> </td>
  70.                     </tr>
  71.                     <tr>
  72.                         <td> Shininess </td>
  73.                         <td> <input type="number" id="material-shininess" value="1"> </input> </td>
  74.                     </tr>
  75.                     <tr>
  76.                         <td> Type </td>
  77.                         <td>
  78.                             <select id="material-type">
  79.                                 <option value="lambert"> Lambert </option>
  80.                                 <option value="normal"> Normal </option>
  81.                                 <option value="phong"> Phong </option>
  82.                             </select>
  83.                         </td>
  84.                     </tr>
  85.                 </table>
  86.                 <button onClick="changeMaterialParameters()" style="width:130px;"> Apply </button>
  87.             </div>
  88.             <div style="float:left;display:inline-block; width:250px; margin-left:10px; padding:20px;">
  89.                 <h3> Object </h3>
  90.                 <table border="1">
  91.                     <tr>
  92.                         <td> Type </td>
  93.                         <td>
  94.                             <select id="object-type">
  95.                                 <option value= "sphere"> Sphere </option>
  96.                                 <option value= "cube"> Cube </option>
  97.                                 <option value= "cylinder"> Cylinder </option>
  98.                             </select>
  99.                         </td>
  100.                     </tr>
  101.                 </table>
  102.                 <button onClick= "changeObjectParameters()" style="width:130px;"> Apply </button>
  103.             </div>
  104.         </div>
  105.         <script src="/Users/ramy/Documents/HTML/mrdoob-three.js-58e4622/build/three.min.js"></script>
  106.         <script>
  107.  
  108.             // Funzioni per leggere i parametri:
  109.  
  110.             function getLightParameters() {
  111.                 var lightParameters={};
  112.                 lightParameters.color= parseInt(document.getElementById("light-color").value,16);
  113.                 lightParameters.position= new THREE.Vector3(
  114.                     document.getElementById("light-position-x").value,
  115.                     document.getElementById("light-position-y").value,
  116.                     document.getElementById("light-position-z").value );
  117.                 if(isNaN(lightParameters.color)) {
  118.                     return null;
  119.                 }
  120.                 lightParameters.type= document.getElementById("light-type").value;
  121.                 return lightParameters;
  122.             }
  123.  
  124.             function getObjectParameters() {
  125.                 var objectParameters={};
  126.                 objectParameters.type= document.getElementById("object-type").value;
  127.                 return objectParameters;
  128.             }
  129.  
  130.             function getMaterialParameters() {
  131.                 var materialParameters={};
  132.                 materialParameters.diffuse= parseInt(document.getElementById("material-diffuse").value , 16);
  133.                 materialParameters.ambient= parseInt(document.getElementById("material-ambient").value , 16);
  134.                 materialParameters.emissive= parseInt(document.getElementById("material-emissive").value , 16);
  135.                 materialParameters.specular= parseInt(document.getElementById("material-specular").value , 16);
  136.                 materialParameters.shininess= document.getElementById("material-shininess");
  137.                 if(isNaN(materialParameters.diffuse) || isNaN(materialParameters.ambient) || isNaN(materialParameters.emissive) || isNaN(materialParameters.specular) ) {
  138.                     return null;
  139.                 }
  140.                 materialParameters.type= document.getElementById("material-type").value;
  141.                 return materialParameters;
  142.             }
  143.  
  144.             // Cambiare la scena:
  145.  
  146.             function changeLightParameters() {
  147.                 var lightParameters= getLightParameters();
  148.                 if(lightParameters== null) {
  149.                     alert("Invalid values");
  150.                     return;
  151.                 }
  152.                 if(light.name!= lightParameters.type) {
  153.                     scene.remove(light);
  154.                     if(lightParameters.type== "spot") {
  155.                         light= new THREE.SpotLight(lightParameters.color);
  156.                     }
  157.                     else if(lightParameters.type== "point") {
  158.                         light= new THREE.PointLight(lightParameters.color);
  159.                     }
  160.                     else if(lightParameters.type== "ambient") {
  161.                         light= new THREE.AmbientLight(lightParameters.color);
  162.                     }
  163.                     else if(lightParameters.type== "area") {
  164.                         light= new THREE.AreaLight(lightParameters.color);
  165.                     }
  166.                     else if(lightParameters.type== "directional") {
  167.                         light= new THREE.DirectionalLight(lightParameters.color);
  168.                     }
  169.                     light.position.set(lightParameters.position.x, lightParameters.position.y, lightParameters.position.z);
  170.                     light.name= lightParameters.name;
  171.                     scene.add(light);
  172.                 }
  173.                 else {
  174.                     light.position= lightParameters.position;
  175.                     light.color= new THREE.Color(lightParameters.color);
  176.                 }
  177.             }
  178.  
  179.             function changeObjectParameters() {
  180.                 var objectParameters= getObjectParameters();
  181.                 if(objectParameters== null) {
  182.                     alert("Invalid values");
  183.                     return;
  184.                 }
  185.                 if(object.name != objectParameters.type) {
  186.                     scene.remove(object);
  187.                     if(objectParameters.type== "sphere") {
  188.                         geometry= new THREE.SphereGeometry(2,15,15);
  189.                     }
  190.                     else if(objectParameters.type== "cube") {
  191.                         geometry= new THREE.CubeGeometry(2,2,2);
  192.                     }
  193.                     else if(objectParameters.type== "cylinder") {
  194.                         geometry= new THREE.CylinderGeometry(1,1,2.5);
  195.                     }
  196.                     object= new THREE.Mesh(geometry,material);
  197.                     object.name= objectParameters.type;
  198.                     scene.add(object);
  199.                 }
  200.             }
  201.  
  202.             function changeMaterialParameters() {
  203.                 var materialParameters= getMaterialParameters();
  204.                 if(materialParameters== null) {
  205.                     alert("Invalid values");
  206.                     return;
  207.                 }
  208.                 if(materialParameters.type!= material.name) {
  209.                     scene.remove(object);
  210.                     if(materialParameters.type== "lambert") {
  211.                         material= new THREE.MeshLambertMaterial({
  212.                             color:materialParameters.diffuse,
  213.                             ambient:materialParameters.ambient,
  214.                             emissive:materialParameters.emissive });
  215.                     }
  216.                     else if(materialParameters.type== "normal") {
  217.                         material= new THREE.MeshNormalMaterial();
  218.                     }
  219.                     else if(materialParameters.type== "phong") {
  220.                         material= new THREE.MeshPhongMaterial({
  221.                             color:materialParameters.diffuse,
  222.                             ambient:materialParameters.ambient,
  223.                             emissive:materialParameters.emissive,
  224.                             specular:materialParameters.specular,
  225.                             shininess:materialParameters.shininess });
  226.                     }
  227.                     material.name= materialParameters.type;
  228.                     object= new THREE.Mesh(geometry,material);
  229.                     scene.add(object);
  230.                 }
  231.                 else {
  232.                     material.color= new THREE.Color(materialParameters.diffuse);
  233.                     material.ambient= new THREE.Color(materialParameters.ambient);
  234.                     material.emissive= new THREE.Color(materialParameters.emissive);
  235.                     material.specular= new THREE.Color(materialParameters.specular);
  236.                     material.shininess= new THREE.Color(materialParameters.shininess);
  237.                     material.needsUpdate= true;
  238.                 }
  239.             }
  240.  
  241.             // Creazione scena, camera e renderer:
  242.             var scene= new THREE.Scene();
  243.             var camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
  244.             var renderer= new THREE.WebGLRenderer();
  245.             renderer.setSize(window.innerWidth,window.innerHeight);
  246.             document.body.appendChild(renderer.domElement);
  247.             camera.position.z=5;
  248.  
  249.             // Creazione geometria, materiale e oggetto:
  250.             var geometry= new THREE.SphereGeometry(1,15,15);
  251.             var material= new THREE.MeshLambertMaterial({color:0xffffff, ambient:0xffffff, emissive:0xffffff});
  252.             var object= new THREE.Mesh(geometry,material);
  253.             material.name= "lambert";
  254.             object.name= "sphere";
  255.             scene.add(object);
  256.  
  257.             // Creazione luci:
  258.             var light= new THREE.PointLight(0xffffff);
  259.             light.position.set(0,0,20);
  260.             light.name= "point";
  261.             scene.add(light);
  262.  
  263.             // Creazione della  funzione di rendering:
  264.             var render= function() {
  265.                 requestAnimationFrame(render);
  266.                 renderer.render(scene,camera);
  267.             }
  268.             render();
  269.         </script>
  270.     </body>
  271. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!