API tools faq
paste
Advertisement
Guest User

Car project

a guest
Oct 18th, 2019
615
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 27.18 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.  
  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();
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!