API tools faq
paste
Advertisement
Guest User

Car project

a guest
Oct 17th, 2019
204
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 26.33 KB | None | 0 0
raw download clone embed print report
  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
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!