Advertisement
Guest User

datGUI fog function

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