Advertisement
Guest User

Car project

a guest
Oct 17th, 2019
138
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. My WebGL App
  3. */
  4. let mainContainer = null;
  5. let fpsContainer
  6. let stats = null;
  7. let camera = null;
  8. let renderer = null;
  9. let scene = null;
  10.  
  11. // Global variables
  12. let plane, wheel_f_left, wheel_f_right, wheel_b_left, wheel_b_right, wheel_frame_f_right, wheel_frame_f_left, wheel_frame_b_right, wheel_frame_b_left, main_frame, second_frame, light_f_right, light_f_left, light_b_right, light_b_left, front_window, back_window, door_right, door_left, door_window_right, door_window_left, passenger_window_right, passenger_window_left, handle_left, handle_right, road, sand, water, sun = null;
  13.  
  14. let camControls = null;
  15.  
  16. let gui = null;
  17. let controlBoxParams = {
  18.     rotateSpeed: 0.02,
  19.     scaleWheel: 1
  20. };
  21.  
  22. let animationParams = {
  23.     tirePos: 0,
  24.     bounceStep: 0,
  25.     rotateStep: 0,
  26.     cameraStep: 0
  27. };
  28. let frame_animationParams = {
  29.     carPos: 0,
  30. };
  31.  
  32. function init(){
  33.  
  34.     if ( THREE.WEBGL.isWebGLAvailable() === false ) container.appendChild( WEBGL.getWebGLErrorMessage() );
  35.     fpsContainer = document.querySelector( '#fps' );
  36.     mainContainer = document.querySelector( '#webgl-secne' );
  37.     scene = new THREE.Scene();
  38.     scene.background = new THREE.Color( 0xEEEEEE );
  39.  
  40.     //fonas su paveiksliuku
  41.  
  42.     let loader = new THREE.CubeTextureLoader();
  43.     loader.setPath( 'img/fonas/' );
  44.     const background = loader.load( [
  45.         'Daylight Box_Right.bmp', 'Daylight Box_Left.bmp',
  46.         'Daylight Box_Top.bmp', 'Daylight Box_Bottom.bmp',
  47.         'Daylight Box_Front.bmp', 'Daylight Box_Back.bmp'
  48.     ]);
  49.     background.format = THREE.RGBFormat;
  50.     scene.background = background;
  51.  
  52.  
  53.     createStats();
  54.     createCamera();
  55.     createControls();
  56.     createLights();
  57.     createMeshes();
  58.     createRenderer();
  59.     renderer.setAnimationLoop( () => {
  60.     update();
  61.     render();
  62.    
  63.   } );
  64. }
  65.  
  66. // Animations
  67. function update(){
  68.  
  69.      if (typeof wheel_front_right !== 'undefined') {
  70.  
  71.         wheel_front_right.rotation.z -= 0.1;
  72.         wheel_front_right.position.x += 0.01;
  73.         //wheel_frame_f_right.scale.set(2,2,2);
  74.  
  75.     }
  76.  
  77.     if (typeof wheel_front_left !== 'undefined') {
  78.  
  79.         wheel_front_left.rotation.z -= 0.1;
  80.         wheel_front_left.position.x += 0.01;
  81.  
  82.     }
  83.  
  84.     if (typeof wheel_back_right !== 'undefined') {
  85.  
  86.         wheel_back_right.rotation.z -= 0.1;
  87.         wheel_back_right.position.x += 0.01;
  88.  
  89.     }
  90.  
  91.     if (typeof wheel_back_left !== 'undefined') {
  92.  
  93.         wheel_back_left.rotation.z -= 0.1;
  94.         wheel_back_left.position.x += 0.01;
  95.  
  96.     }
  97.  
  98.  
  99.     if (typeof car_frame !== 'undefined') {
  100.  
  101.         car_frame.position.x += 0.01;
  102.         if (car_frame.position.x > 40){
  103.             car_frame.position.x -= 0.01;
  104.         }
  105.        
  106.    
  107.     }
  108.    
  109.    
  110.  
  111. }
  112.  
  113. // Statically rendered content
  114. function render(){
  115.     stats.begin();
  116.     renderer.render( scene, camera );
  117.     stats.end();
  118. }
  119.  
  120. // FPS counter
  121. function createStats(){
  122.     stats = new Stats();
  123.     stats.showPanel( 0 );   // 0: fps, 1: ms, 2: mb, 3+: custom
  124.     fpsContainer.appendChild( stats.dom );
  125. }
  126.  
  127. // Camera object
  128. function createCamera(){
  129.     const fov = 80;
  130.     const aspect =  mainContainer.clientWidth / mainContainer.clientHeight;
  131.     const near = 0.1;
  132.     const far = 500;    // meters
  133.     camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  134.     camera.position.set( 0, 20, 0 );
  135.     camera.position.x = 10;
  136.     camera.position.y = 20;
  137.     camera.position.z = 50;
  138.     //camera.lookAt(scene.position);
  139. }
  140.  
  141. // Interactive controls
  142. function createControls(){
  143.     camControls = new THREE.OrbitControls(camera, mainContainer);
  144.     camControls.autoRotate = false;
  145. }
  146.  
  147.  
  148. function createLights(){
  149.  
  150.     //ambient light sviesesnei kompozicijai
  151.     const ambientLight = new THREE.AmbientLight( 0xffffff, 1 ); // 0x111111 - 0xaaaaaa, 1 ; 0xffffff, 0.1 - 0.3; 0x404040
  152.     scene.add( ambientLight );
  153.  
  154.     //directional light seseliams ir saules efektui
  155.     const dirLight = new THREE.DirectionalLight( 0xffffff, 2, 1000 ); // color, intensity, proximity
  156.     dirLight.position.set( 30, 10, -10 );
  157.     dirLight.shadow.mapSize.width = 1048;  // default
  158.     dirLight.shadow.mapSize.height = 1048; // default
  159.     dirLight.shadow.camera.near = 1;       // default
  160.     dirLight.shadow.camera.far = 50;      // default
  161.     dirLight.shadow.camera.left = -15;
  162.     dirLight.shadow.camera.top = 15;
  163.     dirLight.shadow.camera.right = 15;
  164.     dirLight.shadow.camera.bottom = -15;
  165.     dirLight.shadow.camera.darkness = 20;
  166.     dirLight.castShadow = true;
  167.     scene.add( dirLight );
  168.  
  169. }
  170.  
  171. //zole
  172. function createPlane(){
  173.  
  174.     //zoles tekstura
  175.     const texture = new THREE.TextureLoader().load( "img/zole2.jpg" );
  176.     texture.encoding = THREE.sRGBEncoding;
  177.     texture.anisotropy = 16;
  178.  
  179.     //bump map'as
  180.     const bump = new THREE.TextureLoader().load( "img/zole-bump_map.jpg" );
  181.  
  182.     //filtrai
  183.     texture.magFilter = THREE.LinearFilter;
  184.     texture.minFilter = THREE.LinearMipMapLinearFilter;
  185.  
  186.     //teksturos kartojimas
  187.     texture.wrapS = THREE.RepeatWrapping;
  188.     texture.wrapT = THREE.RepeatWrapping;
  189.     texture.repeat.set(5,5);
  190.  
  191.     const planeGeometry = new THREE.PlaneBufferGeometry(50,50);
  192.     const planeMaterial =  new THREE.MeshStandardMaterial({ map: texture });
  193.  
  194.     //bumpu stiprumas
  195.     planeMaterial.bumpMap = bump;
  196.     planeMaterial.bumpScale = 0.3;
  197.  
  198.     //bump mapo kartojimas
  199.     bump.wrapS = THREE.RepeatWrapping;
  200.     bump.wrapT = THREE.RepeatWrapping;
  201.     bump.repeat.set(5,5);
  202.  
  203.     plane = new THREE.Mesh(planeGeometry,planeMaterial);
  204.  
  205.     plane.roughness = 1;
  206.     plane.rotation.x = -0.5*Math.PI;
  207.     plane.position.x = -10;
  208.     plane.position.y = 0;
  209.     plane.position.z = 0;
  210.     plane.receiveShadow = true;
  211.     scene.add(plane);
  212. }
  213.  
  214. //kelias ant zoles
  215. function createRoad(){
  216.  
  217.     //asfalto tekstura
  218.     const texture = new THREE.TextureLoader().load( "img/asfaltas.jpg" );
  219.     texture.encoding = THREE.sRGBEncoding;
  220.     texture.anisotropy = 16;
  221.  
  222.     //bump map'as
  223.     const bump = new THREE.TextureLoader().load( "img/asfaltas-bump_map.jpg" );
  224.  
  225.     //teksturos kartojimas
  226.     texture.wrapS = THREE.RepeatWrapping;
  227.     texture.wrapT = THREE.RepeatWrapping;
  228.     texture.repeat.set(5,5);
  229.  
  230.     const roadGeometry = new THREE.PlaneBufferGeometry(50,20);
  231.     const roadMaterial = new THREE.MeshStandardMaterial({ map: texture });
  232.  
  233.     //bumpu stiprumas
  234.     roadMaterial.bumpMap = bump;
  235.     roadMaterial.bumpScale = 0.9;
  236.  
  237.     //bump mapo kartojimas
  238.     bump.wrapS = THREE.RepeatWrapping;
  239.     bump.wrapT = THREE.RepeatWrapping;
  240.     bump.repeat.set(5,5);
  241.  
  242.  
  243.     road = new THREE.Mesh(roadGeometry,roadMaterial);
  244.     road.roughness = 0.5;
  245.     road.rotation.x = -0.5*Math.PI;
  246.     road.position.x = -10;
  247.     road.position.y = 0.05;
  248.     road.position.z = 0;
  249.     road.receiveShadow = true;
  250.     scene.add(road);
  251. }
  252.  
  253. //smelis
  254. function createSand(){
  255.  
  256.     //smelio tekstura
  257.     const texture = new THREE.TextureLoader().load( "img/smelis2.jpg" );
  258.     texture.encoding = THREE.sRGBEncoding;
  259.     texture.anisotropy = 16;
  260.  
  261.     //bump map'as
  262.     const bump = new THREE.TextureLoader().load( "img/smelis2-bump_map.jpg" );
  263.  
  264.     //teksturos kartojimas
  265.     texture.wrapS = THREE.RepeatWrapping;
  266.     texture.wrapT = THREE.RepeatWrapping;
  267.     texture.repeat.set(5,5);
  268.  
  269.     const sandGeometry = new THREE.PlaneBufferGeometry(50,50);
  270.     const sandMaterial = new THREE.MeshStandardMaterial({ map: texture });
  271.    
  272.     //bumpu stiprumas
  273.     sandMaterial.bumpMap = bump;
  274.     sandMaterial.bumpScale = 0.3;
  275.  
  276.     //bump mapo kartojimas
  277.     bump.wrapS = THREE.RepeatWrapping;
  278.     bump.wrapT = THREE.RepeatWrapping;
  279.     bump.repeat.set(5,5);
  280.    
  281.     sand = new THREE.Mesh(sandGeometry,sandMaterial);
  282.     sand.roughness = 0.5;
  283.     sand.rotation.x = -0.5*Math.PI;
  284.     sand.position.x = 40;
  285.     sand.position.y = 0;
  286.     sand.position.z = 0;
  287.     sand.receiveShadow = true;
  288.     scene.add(sand);
  289. }
  290.  
  291.  
  292. //vanduo
  293. function createWater(){
  294.     let waterParams = {
  295.         color: '#66a3ff',
  296.         scale: 1,
  297.         flowX: 0.6,
  298.         flowY: 0.6,
  299.         sound: true
  300.     };
  301.  
  302.     const waterGeometry = new THREE.PlaneBufferGeometry( 20, 50 );
  303.    
  304.     let water = new THREE.Water( waterGeometry, {
  305.         color: waterParams.color,
  306.         scale: waterParams.scale,
  307.         flowDirection: new THREE.Vector2( waterParams.flowX, waterParams.flowY ),
  308.         textureWidth: 1024,
  309.         textureHeight: 1024
  310.         } );
  311.     water.position.y = 0.05;
  312.     water.position.x = 55;
  313.     water.rotation.x = -0.5 * Math.PI;
  314.     scene.add( water );
  315. }
  316.  
  317. //saule
  318. function createSun(){
  319.     const sunTexture = new THREE.TextureLoader().load( "img/sun.png" );
  320.     const sunMaterial = new THREE.SpriteMaterial( { map: sunTexture, color: 0xffffff, transparent: true, opacity: 0.95} );
  321.     const sun = new THREE.Sprite( sunMaterial );
  322.     sun.scale.set(30, 30, 30);
  323.     sun.position.set(60,30,-25);
  324.     scene.add( sun );
  325. }
  326.  
  327. //pagrindine remo figura
  328. function createMain_frame(){
  329.     //ilgis, aukstis, plotis
  330.     const geometry = new THREE.BoxGeometry( 12, 3, 7);
  331.     const material = new THREE.MeshStandardMaterial( {color: 0x1E90FF} );
  332.     const main_frame = new THREE.Mesh( geometry, material );
  333.     main_frame.position.x = 0;
  334.     main_frame.position.y = 2.5;
  335.     main_frame.position.z = 0;
  336.     main_frame.castShadow = true;
  337.     main_frame.receiveShadow = true;
  338.     material.metalness = 0.8;
  339.     material.roughness = 0.3;
  340.  
  341.    
  342.     //antras remas
  343.     const second_frame_geometry = new THREE.BoxGeometry( 8, 3, 7);
  344.     const second_frame_material = new THREE.MeshStandardMaterial( {color: 0x1E90FF} );
  345.     const second_frame = new THREE.Mesh( second_frame_geometry, second_frame_material );
  346.     second_frame.position.x = -2;
  347.     second_frame.position.y = 5;
  348.     second_frame.position.z = 0;
  349.     second_frame.castShadow = true;
  350.     second_frame.receiveShadow = true;
  351.     second_frame.renderOrder = 0.5;
  352.     second_frame_material.metalness = 0.8;
  353.     second_frame_material.roughness = 0.3;
  354.    
  355.  
  356.     //lempa, priekis desine-------------------------------
  357.     var light_f_right_geometry = new THREE.CylinderGeometry( 0.7, 0.7, 0.1, 32 );
  358.     var light_f_right_material = new THREE.MeshStandardMaterial( {color: 0xFFFF00} );
  359.     var light_f_right = new THREE.Mesh( light_f_right_geometry, light_f_right_material );
  360.  
  361.     //bump map'as
  362.     const light_f_right_bump = new THREE.TextureLoader().load( "img/lempa-bump-map.jpg" );
  363.    
  364.     //bumpu stiprumas
  365.     light_f_right_material.bumpMap = light_f_right_bump;
  366.     light_f_right_material.bumpScale = 0.3;
  367.  
  368.     //bump mapo kartojimas
  369.     light_f_right_bump.wrapS = THREE.RepeatWrapping;
  370.     light_f_right_bump.wrapT = THREE.RepeatWrapping;
  371.     light_f_right_bump.repeat.set(1,1);
  372.  
  373.     light_f_right.position.x = 6;
  374.     light_f_right.position.y = 2.8;
  375.     light_f_right.position.z = 2;
  376.     light_f_right.rotation.x = Math.PI / 2;
  377.     light_f_right.rotation.z = Math.PI / 2;
  378.     light_f_right.receiveShadow = true;
  379.     //lempa, priekis desine---------------------------------
  380.  
  381.  
  382.  
  383.  
  384. //lempa, priekis kaire
  385.     var light_f_left_geometry = new THREE.CylinderGeometry( 0.7, 0.7, 0.1, 32 );
  386.     var light_f_left_material = new THREE.MeshStandardMaterial( {color: 0xFFFF00} );
  387.     var light_f_left = new THREE.Mesh( light_f_left_geometry, light_f_left_material );
  388.  
  389.     //bump map'as
  390.     const light_f_left_bump = new THREE.TextureLoader().load( "img/lempa-bump-map.jpg" );
  391.    
  392.     //bumpu stiprumas
  393.     light_f_left_material.bumpMap = light_f_left_bump;
  394.     light_f_left_material.bumpScale = 0.3;
  395.  
  396.     //bump mapo kartojimas
  397.     light_f_left_bump.wrapS = THREE.RepeatWrapping;
  398.     light_f_left_bump.wrapT = THREE.RepeatWrapping;
  399.     light_f_left_bump.repeat.set(1,1);
  400.  
  401.     light_f_left.position.x = 6;
  402.     light_f_left.position.y = 2.8;
  403.     light_f_left.position.z = -2;
  404.     light_f_left.rotation.x = Math.PI / 2;
  405.     light_f_left.rotation.z = Math.PI / 2;
  406.     light_f_left.receiveShadow = true;
  407.  
  408. //lempa, galas desine
  409.     var light_b_right_geometry = new THREE.BoxGeometry(1.7,0.1,0.8);
  410.     var light_b_right_material = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
  411.     var light_b_right = new THREE.Mesh( light_b_right_geometry,light_b_right_material );
  412.  
  413.     light_b_right.position.x = -6;
  414.     light_b_right.position.y = 2.8;
  415.     light_b_right.position.z = -2;
  416.     light_b_right.rotation.x = Math.PI / 2;
  417.     light_b_right.rotation.z = Math.PI / 2;
  418.     light_b_right.receiveShadow = true;
  419.  
  420. //lempa, galas kaire
  421.     var light_b_left_geometry = new THREE.BoxGeometry(1.7,0.1,0.8);
  422.     var light_b_left_material = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
  423.     var light_b_left = new THREE.Mesh( light_b_left_geometry,light_b_left_material );
  424.  
  425.     light_b_left.position.x = -6;
  426.     light_b_left.position.y = 2.8;
  427.     light_b_left.position.z = 2;
  428.     light_b_left.rotation.x = Math.PI / 2;
  429.     light_b_left.rotation.z = Math.PI / 2;
  430.     light_b_left.receiveShadow = true;
  431.  
  432. //priekinis langas
  433.     const front_window_geometry = new THREE.BoxGeometry( 6, 0.1, 1.8);
  434.     const front_window_material = new THREE.MeshStandardMaterial( {color: 0xADD8E6} );
  435.     const front_window = new THREE.Mesh( front_window_geometry, front_window_material );
  436.     front_window.position.x = 2;
  437.     front_window.position.y = 5.3;
  438.     front_window.position.z = 0;
  439.     front_window.rotation.x = Math.PI / 2;
  440.     front_window.rotation.z = Math.PI / 2;
  441.     front_window.receiveShadow = true;
  442.     front_window_material.metalness = 0.8;
  443.     front_window_material.roughness = 0.5;
  444.  
  445. //galinis langas
  446.     const back_window_geometry = new THREE.BoxGeometry( 6, 0.1, 1.8);
  447.     const back_window_material = new THREE.MeshPhongMaterial( {color: 0xADD8E6} );
  448.     const back_window = new THREE.Mesh( back_window_geometry, back_window_material );
  449.     back_window.position.x = -6;
  450.     back_window.position.y = 5;
  451.     back_window.position.z = 0;
  452.     back_window.rotation.x = Math.PI / 2;
  453.     back_window.rotation.z = Math.PI / 2;
  454.     back_window.receiveShadow = true;
  455.     back_window_material.metalness = 0.8;
  456.     back_window_material.roughness = 0.0;
  457.  
  458. //durys, desine
  459.     const door_right_geometry = new THREE.BoxGeometry( 3, 0.1, 4.5);
  460.     const door_right_material = new THREE.MeshStandardMaterial( {color: 0x0000CD} );
  461.     const door_right = new THREE.Mesh( door_right_geometry, door_right_material );
  462.     door_right.position.x = 0;
  463.     door_right.position.y = 3.8;
  464.     door_right.position.z = 3.5;
  465.     door_right.rotation.x = Math.PI / 2;
  466.     door_right.receiveShadow = true;
  467.     door_right.metalness = 0.8;
  468.     door_right.roughness = 0.3;
  469.  
  470.  
  471. //durys, kaire
  472.     const door_left_geometry = new THREE.BoxGeometry( 3, 0.1, 4.5);
  473.     const door_left_material = new THREE.MeshStandardMaterial( {color: 0x0000CD} );
  474.     const door_left = new THREE.Mesh( door_left_geometry, door_left_material );
  475.     door_left.position.x = 0;
  476.     door_left.position.y = 3.8;
  477.     door_left.position.z = -3.5;
  478.     door_left.rotation.x = Math.PI / 2;
  479.     door_left.receiveShadow = true;
  480.     door_left.metalness = 0.8;
  481.     door_left.roughness = 0.3;
  482.  
  483. //duru langas, desine
  484.     const door_window_right_geometry = new THREE.BoxGeometry( 2.5, 0.1, 1.7);
  485.     const door_window_right_material = new THREE.MeshStandardMaterial( {color: 0xADD8E6} );
  486.     const door_window_right = new THREE.Mesh( door_window_right_geometry, door_window_right_material );
  487.     door_window_right.position.x = 0;
  488.     door_window_right.position.y = 5;
  489.     door_window_right.position.z = 3.55;
  490.     door_window_right.rotation.x = Math.PI / 2;
  491.     door_window_right.receiveShadow = true;
  492.     door_window_right.metalness = 0.8;
  493.     door_window_right.roughness = 0.3;
  494.  
  495. //duru langas, kaire
  496.     const door_window_left_geometry = new THREE.BoxGeometry( 2.5, 0.1, 1.7);
  497.     const door_window_left_material = new THREE.MeshStandardMaterial( {color: 0xADD8E6} );
  498.     const door_window_left = new THREE.Mesh( door_window_left_geometry, door_window_left_material );
  499.     door_window_left.position.x = 0;
  500.     door_window_left.position.y = 5;
  501.     door_window_left.position.z = -3.55;
  502.     door_window_left.rotation.x = Math.PI / 2;
  503.     door_window_left.receiveShadow = true;
  504.     door_window_left.metalness = 0.8;
  505.     door_window_left.roughness = 0.3;
  506.  
  507. //keleivio langas, desine
  508.     const passenger_window_right_geometry = new THREE.BoxGeometry( 2.5, 0.1, 1.7);
  509.     const passenger_window_right_material = new THREE.MeshStandardMaterial( {color: 0xADD8E6} );
  510.     const passenger_window_right = new THREE.Mesh( passenger_window_right_geometry, passenger_window_right_material );
  511.     passenger_window_right.position.x = -4;
  512.     passenger_window_right.position.y = 5;
  513.     passenger_window_right.position.z = -3.5;
  514.     passenger_window_right.rotation.x = Math.PI / 2;
  515.     passenger_window_right.receiveShadow = true;
  516.     passenger_window_right.metalness = 0.8;
  517.     passenger_window_right.roughness = 0.3;
  518.  
  519. //keleivio langas, kaire
  520.     const passenger_window_left_geometry = new THREE.BoxGeometry( 2.5, 0.1, 1.7);
  521.     const passenger_window_left_material = new THREE.MeshStandardMaterial( {color: 0xADD8E6} );
  522.     const passenger_window_left = new THREE.Mesh( passenger_window_left_geometry, passenger_window_left_material );
  523.     passenger_window_left.position.x = -4;
  524.     passenger_window_left.position.y = 5;
  525.     passenger_window_left.position.z = 3.5;
  526.     passenger_window_left.rotation.x = Math.PI / 2;
  527.     passenger_window_left.receiveShadow = true;
  528.     passenger_window_left.metalness = 0.8;
  529.     passenger_window_left.roughness = 0.3;
  530.  
  531. //duru rankena, desine
  532.     const handle_right_geometry = new THREE.BoxGeometry( 0.5, 0.1,0.1);
  533.     const handle_right_material = new THREE.MeshStandardMaterial( {color: 0x000000} );
  534.     const handle_right = new THREE.Mesh( handle_right_geometry, handle_right_material );
  535.     handle_right.position.x = -1;
  536.     handle_right.position.y = 3.5;
  537.     handle_right.position.z = 3.56;
  538.     handle_right.receiveShadow = true;
  539.     handle_right.metalness = 0.8;
  540.     handle_right.roughness = 0.3;
  541.  
  542. //duru rankena, kaire
  543.     const handle_left_geometry = new THREE.BoxGeometry( 0.5, 0.1,0.1);
  544.     const handle_left_material = new THREE.MeshStandardMaterial( {color: 0x000000} );
  545.     const handle_left = new THREE.Mesh( handle_left_geometry, handle_left_material );
  546.     handle_left.position.x = -1;
  547.     handle_left.position.y = 3.5;
  548.     handle_left.position.z = -3.56;
  549.     handle_left.receiveShadow = true;
  550.     handle_left.metalness = 0.8;
  551.     handle_left.roughness = 0.3;
  552.    
  553.     car_frame = new THREE.Group();
  554.     car_frame.add(main_frame);
  555.     car_frame.add(second_frame);
  556.     car_frame.add(light_f_right);
  557.     car_frame.add(light_f_left);
  558.     car_frame.add(light_b_left);
  559.     car_frame.add(light_b_right);
  560.     car_frame.add(front_window);
  561.     car_frame.add(back_window);
  562.     car_frame.add(door_right);
  563.     car_frame.add(door_left);
  564.     car_frame.add(passenger_window_left);
  565.     car_frame.add(passenger_window_right);
  566.     car_frame.add(door_window_left);
  567.     car_frame.add(door_window_right);
  568.     car_frame.add(handle_left);
  569.     car_frame.add(handle_right);
  570.     // auto apsukimas
  571.     //car_frame.rotation.y = Math.PI;
  572.     scene.add(car_frame);
  573. }
  574.  
  575. //--------------------------------------- RATAI ------------------------------------------------------
  576.  
  577. //ratas, galas kaire
  578. function createWheel_b_left(){
  579.    
  580.    
  581. }
  582.  
  583. //ratas priekis desine
  584. function createWheel_frame_f_right(){
  585.    
  586.  
  587.     const texture = new THREE.TextureLoader().load( "img/rim.png" );
  588.     texture.encoding = THREE.sRGBEncoding;
  589.     texture.anisotropy = 16;
  590.  
  591.     texture.wrapS = THREE.RepeatWrapping;
  592.     texture.wrapT = THREE.RepeatWrapping;
  593.     texture.repeat.set(1,1);
  594.  
  595.     var wheel_frame_f_right_geometry = new THREE.CylinderGeometry( 0.8, 0.8, 0.1, 32 );
  596.     var wheel_frame_f_right_material = new THREE.MeshStandardMaterial( {map: texture} );
  597.     var wheel_frame_f_right = new THREE.Mesh(wheel_frame_f_right_geometry, wheel_frame_f_right_material );
  598.  
  599.     var wheel_f_right_geometry = new THREE.CylinderGeometry( 1.5, 1.5, 1, 32 );
  600.     var wheel_f_right_material = new THREE.MeshStandardMaterial( {color: 0x000000} );
  601.     var wheel_f_right = new THREE.Mesh( wheel_f_right_geometry, wheel_f_right_material );
  602.  
  603.     wheel_f_right.position.x = 0;
  604.     wheel_f_right.position.y = 0;
  605.     wheel_f_right.position.z = 0;
  606.     wheel_f_right.rotation.x = Math.PI / 2;
  607.     wheel_f_right.castShadow = true;
  608.     wheel_f_right.receiveShadow = true;
  609.  
  610.     wheel_frame_f_right.position.x = 0;
  611.     wheel_frame_f_right.position.y = 0;
  612.     wheel_frame_f_right.position.z = 0.5;
  613.     wheel_frame_f_right.rotation.x = Math.PI / 2;
  614.     wheel_frame_f_right.receiveShadow = true;
  615.     wheel_frame_f_right.castShadow = true;
  616.     wheel_frame_f_right_material.metalness = 0.8;
  617.     wheel_frame_f_right_material.roughness = 0.3;
  618.    
  619.     wheel_front_right = new THREE.Group();
  620.  
  621.     wheel_front_right.add(wheel_f_right);
  622.     wheel_front_right.add(wheel_frame_f_right);
  623.  
  624.     wheel_front_right.position.set(4,1.5,4);
  625.     scene.add(wheel_front_right);
  626. }
  627.  
  628. //ratas, priekis kaire
  629. function createWheel_frame_f_left(){
  630.     const texture = new THREE.TextureLoader().load( "img/rim.png" );
  631.     texture.encoding = THREE.sRGBEncoding;
  632.     texture.anisotropy = 16;
  633.  
  634.     texture.wrapS = THREE.RepeatWrapping;
  635.     texture.wrapT = THREE.RepeatWrapping;
  636.     texture.repeat.set(1,1);
  637.    
  638.     var wheel_frame_f_left_geometry = new THREE.CylinderGeometry( 0.8, 0.8, 0.1, 32 );
  639.     var wheel_frame_f_left_material = new THREE.MeshStandardMaterial( {map: texture} );
  640.     var wheel_frame_f_left = new THREE.Mesh(wheel_frame_f_left_geometry, wheel_frame_f_left_material );
  641.  
  642.     wheel_frame_f_left.position.x = 0;
  643.     wheel_frame_f_left.position.y = 0;
  644.     wheel_frame_f_left.position.z = -0.5;
  645.     wheel_frame_f_left.rotation.x = Math.PI / 2;
  646.     wheel_frame_f_left.receiveShadow = true;
  647.     wheel_frame_f_left.castShadow = true;
  648.     wheel_frame_f_left_material.metalness = 0.8;
  649.     wheel_frame_f_left_material.roughness = 0.3;
  650.    
  651.     var wheel_f_left_geometry = new THREE.CylinderGeometry( 1.5, 1.5, 1, 32 );
  652.     var wheel_f_left_material = new THREE.MeshStandardMaterial( {color: 0x00000} );
  653.     var wheel_f_left = new THREE.Mesh( wheel_f_left_geometry, wheel_f_left_material );
  654.  
  655.     wheel_f_left.position.x = 0;
  656.     wheel_f_left.position.y = 0;
  657.     wheel_f_left.position.z = 0;
  658.     wheel_f_left.rotation.x = Math.PI / 2;
  659.     wheel_f_left.receiveShadow = true;
  660.     wheel_f_left.castShadow = true;
  661.    
  662.     wheel_front_left = new THREE.Group();
  663.     wheel_front_left.add(wheel_frame_f_left);
  664.     wheel_front_left.add(wheel_f_left);
  665.  
  666.     wheel_front_left.position.set(4, 1.5, -4,5);
  667.     scene.add(wheel_front_left);
  668. }
  669.  
  670. //ratas, galas desine
  671. function createWheel_frame_b_right(){
  672.  
  673.     const texture = new THREE.TextureLoader().load( "img/rim.png" );
  674.     texture.encoding = THREE.sRGBEncoding;
  675.     texture.anisotropy = 16;
  676.  
  677.     texture.wrapS = THREE.RepeatWrapping;
  678.     texture.wrapT = THREE.RepeatWrapping;
  679.     texture.repeat.set(1,1);
  680.    
  681.     var wheel_frame_b_right_geometry = new THREE.CylinderGeometry( 0.8, 0.8, 0.1, 32 );
  682.     var wheel_frame_b_right_material = new THREE.MeshStandardMaterial( {map: texture} );
  683.     var wheel_frame_b_right = new THREE.Mesh(wheel_frame_b_right_geometry, wheel_frame_b_right_material );
  684.  
  685.     wheel_frame_b_right.position.x = 0;
  686.     wheel_frame_b_right.position.y = 0;
  687.     wheel_frame_b_right.position.z = 0.5;
  688.     wheel_frame_b_right.rotation.x = Math.PI / 2;
  689.     wheel_frame_b_right.receiveShadow = true;
  690.     wheel_frame_b_right.castShadow = true;
  691.     wheel_frame_b_right_material.metalness = 0.8;
  692.     wheel_frame_b_right_material.roughness = 0.3;
  693.    
  694.     var wheel_b_right_geometry = new THREE.CylinderGeometry( 1.5, 1.5, 1, 32 );
  695.     var wheel_b_right_material = new THREE.MeshStandardMaterial( {color: 0x000000} );
  696.     var wheel_b_right = new THREE.Mesh( wheel_b_right_geometry, wheel_b_right_material );
  697.  
  698.     wheel_b_right.position.x = 0;
  699.     wheel_b_right.position.y = 0;
  700.     wheel_b_right.position.z = 0;
  701.     wheel_b_right.rotation.x = Math.PI / 2;
  702.     wheel_b_right.receiveShadow = true;
  703.     wheel_b_right.castShadow = true;
  704.  
  705.     wheel_back_right = new THREE.Group();
  706.  
  707.     wheel_back_right.position.set(-4,1.5,4);
  708.  
  709.     wheel_back_right.add(wheel_frame_b_right);
  710.     wheel_back_right.add(wheel_b_right);
  711.  
  712.     scene.add(wheel_back_right);
  713. }
  714.  
  715. //ratas, galas kaire
  716. function createWheel_frame_b_left(){
  717.  
  718.     const texture = new THREE.TextureLoader().load( "img/rim.png" );
  719.     texture.encoding = THREE.sRGBEncoding;
  720.     texture.anisotropy = 16;
  721.  
  722.     texture.wrapS = THREE.RepeatWrapping;
  723.     texture.wrapT = THREE.RepeatWrapping;
  724.     texture.repeat.set(1,1);
  725.    
  726.     var wheel_frame_b_left_geometry = new THREE.CylinderGeometry( 0.8, 0.8, 0.1, 32 );
  727.     var wheel_frame_b_left_material = new THREE.MeshStandardMaterial( {map: texture} );
  728.     var wheel_frame_b_left = new THREE.Mesh(wheel_frame_b_left_geometry, wheel_frame_b_left_material );
  729.  
  730.     wheel_frame_b_left.position.x = 0;
  731.     wheel_frame_b_left.position.y = 0;
  732.     wheel_frame_b_left.position.z = -0.5;
  733.     wheel_frame_b_left.rotation.x = Math.PI / 2;
  734.     wheel_frame_b_left.receiveShadow = true;
  735.     wheel_frame_b_left.castShadow = true;
  736.     wheel_frame_b_left_material.metalness = 0.8;
  737.     wheel_frame_b_left_material.roughness = 0.3;
  738.    
  739.     var wheel_b_left_geometry = new THREE.CylinderGeometry( 1.5, 1.5, 1, 32 );
  740.     var wheel_b_left_material = new THREE.MeshStandardMaterial( {color: 0x000000} );
  741.     var wheel_b_left = new THREE.Mesh( wheel_b_left_geometry, wheel_b_left_material );
  742.  
  743.     wheel_b_left.position.x = 0;
  744.     wheel_b_left.position.y = 0;
  745.     wheel_b_left.position.z = 0;
  746.     wheel_b_left.rotation.x = Math.PI / 2;
  747.     wheel_b_left.receiveShadow = true;
  748.     wheel_b_left.castShadow = true;
  749.    
  750.     wheel_back_left = new THREE.Group();
  751.  
  752.     wheel_back_left.position.set(-4,1.5,-4);
  753.  
  754.     wheel_back_left.add(wheel_frame_b_left);
  755.     wheel_back_left.add(wheel_b_left);
  756.  
  757.     scene.add(wheel_back_left);
  758. }
  759.  
  760. //--------------------------------------- RATAI ------------------------------------------------------
  761.  
  762.  
  763.  
  764. // Meshes and other visible objects
  765. function createMeshes(){
  766.     createPlane(plane);
  767.     createRoad(road);
  768.     createSand(sand);
  769.     createWater(water);
  770.     createSun(sun);
  771.     createMain_frame(main_frame);
  772.  
  773.     createWheel_frame_f_right(wheel_frame_f_right, wheel_f_right);
  774.     createWheel_frame_f_left(wheel_frame_f_left);
  775.     createWheel_frame_b_right(wheel_frame_b_right);
  776.     createWheel_frame_b_left(wheel_frame_b_left);
  777.  
  778.     // createLight_f_right(light_f_right);
  779.     // createLight_f_left(light_f_left);
  780.     // createLight_b_right(light_b_right);
  781.     // createLight_b_left(light_b_left);
  782.     // createSecond_frame(second_frame);
  783.     // createFront_window(front_window);
  784.     // createBack_window(back_window);
  785.     // createDoor_right(door_right);
  786.     // createDoor_left(door_left);
  787.     // createDoor_window_right(door_window_right);
  788.     // createDoor_window_left(door_window_left);
  789.     // createPassenger_window_right(passenger_window_right);
  790.     // createPassenger_window_left(passenger_window_left);
  791.     // createHandle_right(handle_right);
  792.     // createHandle_left(handle_left);
  793.  
  794. }
  795.  
  796. // Renderer object and features
  797. function createRenderer(){
  798.     renderer = new THREE.WebGLRenderer({antialias:true});
  799.     renderer.setSize(mainContainer.clientWidth, mainContainer.clientHeight);
  800.     renderer.setPixelRatio( window.devicePixelRatio );
  801.  
  802.     // renderer.setClearColor(0xEEEEEE);
  803.  
  804.     mainContainer.appendChild( renderer.domElement );
  805.     renderer.shadowMap.enabled = true;
  806.     renderer.shadowMap.type = THREE.PCFSoftShadowMap; //THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap
  807.     mainContainer.appendChild( renderer.domElement );
  808.  
  809.     //scenos pasviesinimas
  810.     renderer.gammaFactor = 1.5;
  811.     renderer.gammaOutput = true;
  812. }
  813.  
  814. function onWindowResize() {
  815.   camera.aspect = window.innerWidth / window.innerHeight;
  816.   camera.updateProjectionMatrix();
  817.   renderer.setSize( window.innerWidth, window.innerHeight );
  818. }
  819.  
  820. window.addEventListener( 'resize', onWindowResize, false );
  821. init();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement