SHARE
TWEET

Car project

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