API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 31st, 2014
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 14.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>JSON File Import</title>
  6.     <meta charset="utf-8">
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             overflow: hidden;
  11.         }
  12.     </style>
  13. </head>
  14.  
  15. <div id="webgl-container">
  16. </div>
  17. <div id="gui-container" style="position:absolute;z-index:1;top:0;left:0">
  18.         <label>Part to configure: </label><select id="partSelector"></select></br>
  19.         <label>Color: </label><input id="mesh-color" type="color" onInput="updateColorChoice()"/></br>
  20.        
  21.     </div>
  22. </div>
  23.  
  24.  
  25.  
  26. <body>
  27.     <script type="text/javascript" src="js/three.js"></script>
  28.     <script type="text/javascript" src="js/OrbitControls.js"></script>
  29.     <script type="text/javascript" src="js/OBJLoader.js "></script>
  30.     <script type="text/javascript" src="js/dat.gui.js"></script>
  31.     <script type="text/javascript">
  32.         var scene = new THREE.Scene();
  33.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  34.         var renderer = new THREE.WebGLRenderer();
  35.  
  36.         renderer.setClearColor(0xeeeeee, 1.0);
  37.         renderer.setSize(window.innerWidth, window.innerHeight);
  38.         var webglContainer = document.getElementById('webgl-container');
  39.         webglContainer.appendChild(renderer.domElement);
  40.        
  41.         var containerWidth = webglContainer.clientWidth;
  42.         var containerHeight = webglContainer.clientHeight;
  43.        
  44.         // camera controls
  45.         /*
  46.         var camControls = new THREE.OrbitControls(camera, renderer.domElement);
  47.         camControls.damping = 0.2;
  48.         camControls.addEventListener('change', render);
  49.    
  50. */
  51.          // window resize handler
  52.         window.addEventListener('resize', onWindowResize, false);
  53.         window.addEventListener('click', onClick, false);
  54.  
  55.         function onWindowResize() {
  56.             camera.aspect = window.innerWidth / window.innerHeight;
  57.             camera.updateProjectionMatrix();
  58.             renderer.setSize(window.innerWidth, window.innerHeight);
  59.             render();
  60.         }
  61.  
  62.         var axes = new THREE.AxisHelper(20);
  63.         scene.add(axes);
  64.  
  65.         var grid = new THREE.GridHelper(40, 1);
  66.  
  67.          // create the ground plane
  68.         var planeGeometry = new THREE.PlaneGeometry(80, 80, 10, 10);
  69.         var planeMaterial = new THREE.MeshLambertMaterial({
  70.             color: 0xffffff
  71.         });
  72.         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  73.         plane.rotation.x = -0.5 * Math.PI;
  74.         plane.position.x = 0;
  75.         plane.position.y = -0.05;
  76.         plane.position.z = 0;
  77.         scene.add(plane);
  78.  
  79.          // ---- 3D CONTENT CREATION -----------------------------------------------------
  80.        
  81.         mech = new THREE.Object3D();
  82.         var mechLightNode = new THREE.Object3D();
  83.         mechMaterialColor = 0xAAAAAA;
  84.        
  85.         var partData = [];
  86.        
  87.         var selected_part = "";
  88.        
  89.         mech.position.x = 0;
  90.         mech.position.y = 10;
  91.         mech.position.z = 0;
  92.        
  93.         partData['torso'] = {x:0,y:0,z:0,color: mechMaterialColor};
  94.         partData['head'] = {x:0,y:2.3,z:0,color: mechMaterialColor};
  95.         partData['base'] = {x:0,y:-2.75,z:0,color: mechMaterialColor};
  96.         partData['arm_left'] = {x:2.7,y:-0.5,z:0,color: mechMaterialColor};
  97.         partData['arm_right'] = {x:-2.7,y:-0.5,z:0,color: mechMaterialColor};
  98.         partData['leg_left'] = {x:1.7,y:-6.5,z:0,color: mechMaterialColor};
  99.         partData['leg_right'] = {x:-1.7,y:-6.5,z:0,color: mechMaterialColor};
  100.        
  101.        
  102.         function loadMech()
  103.         {
  104.        
  105.             loadMechPart('torso', false);
  106.             loadMechPart('head', false);
  107.             loadMechPart('base', false);
  108.             loadMechPart('arm_right', true);
  109.             loadMechPart('leg_right', true);
  110.             loadMechPart('arm_left', false);
  111.             loadMechPart('leg_left', false);
  112.            
  113.                                
  114.         }
  115.        
  116.        
  117.        
  118.        
  119.        
  120.         function loadMechPart(part, mirrored)
  121.         {
  122.             var mat;
  123.            
  124.             var loader = new THREE.OBJLoader();
  125.             loader.load('assets/'+part+'.obj', function (geometry, materials ) {
  126.            
  127.            
  128.              var childTraverser;
  129.              var updaterFunction;
  130.              
  131.              
  132.             if (mirrored == true) // blender does silly shit with face order when mirroring.
  133.         {
  134.             childTraverser = function (child) {
  135.                 if (child instanceof THREE.Mesh) {
  136.                     var mat = new THREE.MeshPhongMaterial({color: mechMaterialColor});
  137.                     child.material = mat;
  138.                     child.material.side = THREE.BackSide;//dafuq
  139.                     child.elementsNeedUpdate = true;
  140.                     console.log("inverted called");
  141.                 }
  142.             }
  143.            
  144.              updaterFunction = function () {
  145.                 mechMaterialColor = document.getElementById('mesh-color').value;
  146.                 partData[geometry.name].color = mechMaterialColor; 
  147.                 geometry.traverse(function (child) {
  148.                     if (child instanceof THREE.Mesh) {
  149.                         // apply custom material
  150.                        child.material.color = new THREE.Color(mechMaterialColor);
  151.                     }
  152.                 });
  153.                 /*
  154.                 newMat = new THREE.MeshPhongMaterial({color: mechMaterialColor, shading: THREE.FlatShading});
  155.                 newMat.side = THREE.BackSide;
  156.                 geometry.traverse(function (child) {
  157.                     if (child instanceof THREE.Mesh) {
  158.                         // apply custom material
  159.                         child.material = newMat;
  160.                     }
  161.                 });
  162.                 */
  163.             }
  164.         } else {
  165.             childTraverser = function (child) {
  166.                 if (child instanceof THREE.Mesh) {
  167.                     var mat = new THREE.MeshPhongMaterial({color: mechMaterialColor});
  168.                     child.material = mat;
  169.                     child.material.side = THREE.FrontSide;
  170.                 }
  171.             }
  172.            
  173.             updaterFunction = function () {
  174.                 mechMaterialColor = document.getElementById('mesh-color').value;
  175.                 partData[geometry.name].color = mechMaterialColor;
  176.                  geometry.traverse(function (child) {
  177.                     if (child instanceof THREE.Mesh) {
  178.                         // apply custom material
  179.                         child.material.color = new THREE.Color(mechMaterialColor);
  180.                     }
  181.                 });
  182.                 /*
  183.                 newMat = new THREE.MeshPhongMaterial({color: mechMaterialColor, shading: THREE.FlatShading});
  184.                 newMat.shininess = 100;
  185.                 geometry.traverse(function (child) {
  186.                     if (child instanceof THREE.Mesh) {
  187.                         // apply custom material
  188.                         child.material = newMat;
  189.                     }
  190.                 });
  191.                 */
  192.             }
  193.         }
  194.        
  195.         geometry.traverse(childTraverser);
  196.         geometry.updateFromColorPicker = updaterFunction;
  197.         geometry.click = function(){document.getElementById(geometry.name).selected = 1;};
  198.              
  199.             geometry.name = part;
  200.             var partSelector = document.getElementById("partSelector");
  201.             var option = document.createElement("option");
  202.             option.id = geometry.name;
  203.             option.text = geometry.name;
  204.             partSelector.add(option);
  205.            
  206.             geometry.position.x  = partData[part].x;
  207.             geometry.position.y  = partData[part].y;
  208.             geometry.position.z  = partData[part].z;
  209.            
  210.             geometry.scale.set(1, 1, 1);
  211.             mech.add(geometry);
  212.        
  213.            
  214.  
  215.         });
  216.        
  217.         }  
  218.        
  219.         loadMech();
  220.         scene.add(mech);
  221.         scene.add(mechLightNode);
  222.  
  223.          // ---- END OF 3D CONTENT CREATION ---------------------------------------------
  224.  
  225.          // position and point the camera to the center of the scene
  226.          
  227.         function initCamera()
  228.         {
  229.             camera.position.x = 4.5;
  230.             camera.position.y = 8;
  231.             camera.position.z = 17;
  232.             camera.rotation.x = -0.1;
  233.             camera.rotation.y = 0.52;
  234.             camera.rotation.z = 0.05;          
  235.            
  236.         }
  237.        
  238.         initCamera();
  239.        
  240.        
  241.         projector = new THREE.Projector();
  242.         mouseVector = new THREE.Vector3();
  243.        
  244.         window.addEventListener( 'mousemove', onMouseMove, false );
  245.      
  246.  
  247.          // add subtle ambient lighting
  248.         var ambientLight = new THREE.AmbientLight(0x222222);
  249.         scene.add(ambientLight);
  250.  
  251.         // add spotlight
  252. var spotLight = new THREE.SpotLight(0xffffff);
  253. spotLight.position.set(-80, 70, 90);
  254. spotLight.position.set(-80, 70, 90);
  255. spotLight.castShadow = true;
  256. spotLight.intensity = 1.5;
  257. spotLight.exponent = 5;
  258. spotLight.rotation.z = 2 * Math.PI / 3
  259. spotLight.target= mech;
  260. mechLightNode.add(spotLight);
  261.  
  262.          // add GUI control elements
  263.         var guiControls = new function () {
  264.             this.showAxes = true;
  265.             this.showGrid = false;
  266.             this.showPlane = true;
  267.             this.asWireframes = false;
  268.             this.animated = true;
  269.             this.withShadow = false;
  270.             this.withFog = false;
  271.         }
  272.  
  273.         var gui = new dat.GUI({
  274.             autoPlace: false
  275.         });
  276.         var guiContainer = document.getElementById('gui-container');
  277.         guiContainer.appendChild(gui.domElement);
  278.         gui.add(guiControls, 'showAxes').onChange(function (e) {
  279.             showAxes = e;
  280.             if (showAxes) {
  281.                 scene.add(axes);
  282.             } else {
  283.                 scene.remove(axes);
  284.             }
  285.             render();
  286.         });
  287.         gui.add(guiControls, 'showGrid').onChange(function (e) {
  288.             showGrid = e;
  289.             if (showGrid) {
  290.                 scene.add(grid);
  291.             } else {
  292.                 scene.remove(grid);
  293.             }
  294.             render();
  295.         });
  296.         gui.add(guiControls, 'showPlane').onChange(function (e) {
  297.             showPlane = e;
  298.             if (showPlane) {
  299.                 scene.add(plane);
  300.             } else {
  301.                 scene.remove(plane);
  302.             }
  303.             render();
  304.         });
  305.         gui.add(guiControls, 'asWireframes').onChange(function (e) {
  306.             asWireframes = e;
  307.             // TODO: for all material.wireframe = asWireframes;
  308.             mat.wireframe = asWireframes;
  309.             render();
  310.         });
  311.         gui.open();
  312.  
  313.          // init and call render function
  314.         function render() {
  315.             renderer.render(scene, camera);
  316.             /*
  317.             console.log("camera.position.x: ", camera.position.x);
  318.             console.log("camera.position.y: ", camera.position.y);
  319.             console.log("camera.position.z: ", camera.position.z);
  320.             console.log("camera.rotation.x: ", camera.rotation.x);
  321.             console.log("camera.rotation.y: ", camera.rotation.y);
  322.             console.log("camera.rotation.z: ", camera.rotation.z);
  323.             */
  324.            
  325.         }
  326.         initAnim(true);
  327.         initShadow(false);
  328.         initFog(false);
  329.         render();
  330.         setShadow(false);
  331.         setFog(false);
  332.         animate();
  333.  
  334.          // animate the 3D objects
  335.         function initAnim(value) {
  336.             if (value) {
  337.                 gui.add(guiControls, 'animated').onChange(function (e) {
  338.                     animated = e;
  339.                     if (animated) animate();
  340.                 });
  341.             }
  342.         }
  343.        
  344.  
  345.         var step = 0;
  346.         var scalingStep = 0;
  347.  
  348.         function animate() {
  349.             if (guiControls.animated) {
  350.                 // DO ANIMATING 3D ELEMENTS
  351.  
  352.                 // request re-rendering
  353.                 requestAnimationFrame(animate);
  354.             }
  355.                 mechLightNode.rotation.y += 0.01;
  356.             render();
  357.         }
  358.  
  359.          // shadow cast on plane
  360.         function initShadow(value) {
  361.             // SET receiveShadow AND castShadow FLAGS OF 3D ELEMENTS WITH SHADOW
  362.             plane.receiveShadow = value;
  363.             spotLight.castShadow = value;
  364.             renderer.shadowMapEnabled = value;
  365.             if (value) {
  366.                 gui.add(guiControls, 'withShadow').onChange(function (e) {
  367.                     withShadow = e;
  368.                     setShadow(withShadow);
  369.                 });
  370.             }
  371.         }
  372.  
  373.         function setShadow(value) {
  374.             if (value) {
  375.                 renderer.shadowMapAutoUpdate = true;
  376.             } else {
  377.                 renderer.shadowMapAutoUpdate = false;
  378.                 renderer.clearTarget(spotLight.shadowMap);
  379.             }
  380.             render();
  381.         }
  382.  
  383.          // fog
  384.         var fog;
  385.  
  386.         function initFog(value) {
  387.             if (value) {
  388.                 fog = new THREE.Fog(0xeeeeee, 0.0000001, 150);
  389.                 scene.fog = fog;
  390.                 gui.add(guiControls, 'withFog').onChange(function (e) {
  391.                     withFog = e;
  392.                     setFog(withFog);
  393.                 });
  394.             }
  395.         }
  396.  
  397.         function setFog(value) {
  398.             if (!fog) return;
  399.             if (value) {
  400.                 fog.near = 0.000000001;
  401.                 fog.far = 150;
  402.             } else {
  403.                 fog.near = 8000;
  404.                 fog.far = 8000;
  405.             }
  406.             render();
  407.         }
  408.        
  409.         function onMouseMove( e ) {
  410.        
  411.         mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
  412.         mouseVector.y = 1 - 2 * ( e.clientY / containerHeight );
  413.  
  414.         var raycaster = projector.pickingRay( mouseVector.clone(), camera ),
  415.             intersects = raycaster.intersectObjects( mech.children, true );
  416.  
  417.         mech.children.forEach(function( part ) {
  418.             name = part.name;
  419.             part.children.forEach(function( child ) {          
  420.                 child.material.color = new THREE.Color(partData[name].color);
  421.             });
  422.         });
  423.            
  424.         for( var i = 0; i < 1; i++ ) {
  425.             var intersection = intersects[ i ],
  426.                 obj = intersection.object;
  427.         //  console.log(obj.name);
  428.             obj.material.color.setRGB( 1.0 , 0, 0 );
  429.            
  430.             }
  431.  
  432.        
  433.     }
  434.    
  435.     function onClick(e)
  436.     {
  437.        
  438.         mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
  439.         mouseVector.y = 1 - 2 * ( e.clientY / containerHeight );
  440.         var raycaster = projector.pickingRay( mouseVector.clone(), camera ),
  441.             intersects = raycaster.intersectObjects( mech.children, true );
  442.            
  443.             for( var i = 0; i < 1; i++ ) {
  444.             var intersection = intersects[ i ],
  445.                 obj = intersection.object;
  446.                 console.log(obj.name);
  447.                 obj.click();
  448.             }
  449.  
  450.  
  451.     }
  452.    
  453.     function updateColorChoice() {
  454.     var index = document.getElementById('partSelector').value;
  455.     //console.log(mech.children);
  456.    
  457.     mech.getObjectByName(index, false).updateFromColorPicker();
  458. }
  459.    
  460.    
  461.        
  462.     </script>
  463. </body>
  464.  
  465. </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!