Advertisement
Guest User

Untitled

a guest
Oct 1st, 2019
352
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.18 KB | None
  1. import * as THREE from './../node_modules/three/src/Three.js';
  2.  
  3. import { OrbitControls } from './../node_modules/three/examples/jsm/controls/OrbitControls.js';
  4. import { Reflector } from './../node_modules/three/examples/jsm/objects/Reflector.js';
  5. import { FBXLoader } from './../node_modules/three/examples/jsm/loaders/FBXLoader.js';
  6.  
  7. //scene
  8. var scene = new THREE.Scene();
  9.  
  10. //raycaster
  11. var raycaster = new THREE.Raycaster();
  12. var mouse = new THREE.Vector2();
  13. var rayCastable = [];
  14.  
  15. var HDR = new THREE.CubeTextureLoader().setPath('textures/HDR/').load(
  16.     [
  17.         'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'
  18.     ]
  19. );
  20. HDR.format = THREE.RGBFormat;
  21.  
  22. //materials
  23. var textureLoader = new THREE.TextureLoader();
  24. var wrapping = function (texture) {
  25.     texture.wrapS = THREE.RepeatWrapping;
  26.     texture.wrapT = THREE.RepeatWrapping;
  27.     texture.repeat = new THREE.Vector2(1, 1);
  28. }
  29.  
  30. var wood = new THREE.MeshPhysicalMaterial(
  31.     {
  32.         map: textureLoader.load("./textures/wood/albedo.png", wrapping),
  33.         normalMap: textureLoader.load('textures/wood/normal.png', wrapping),
  34.         metalnessMap: textureLoader.load('textures/wood/metallic.png', wrapping),
  35.         //roughnessMap: textureLoader.load('textures/wood/roughness.png'),
  36.         roughness: 0.6,
  37.         envMap: HDR,
  38.     }
  39. )
  40.  
  41. var concrete = new THREE.MeshPhysicalMaterial(
  42.     {
  43.         map: textureLoader.load("./textures/concrete/albedo.png", wrapping),
  44.         normalMap: textureLoader.load('textures/concrete/normal.png', wrapping),
  45.         //metalnessMap: textureLoader.load('textures/concrete/metallic.png'),
  46.         roughnessMap: textureLoader.load('textures/wood/roughness.png', wrapping),
  47.         metalness: 0,
  48.         envMap: HDR,
  49.     }
  50. )
  51.  
  52. var wrappingGrass = function (texture) {
  53.     texture.wrapS = THREE.RepeatWrapping;
  54.     texture.wrapT = THREE.RepeatWrapping;
  55.     texture.repeat = new THREE.Vector2(10, 10);
  56. }
  57.  
  58. var grass = new THREE.MeshPhysicalMaterial(
  59.     {
  60.         map: textureLoader.load("./textures/grass/albedo.png", wrappingGrass),
  61.         normalMap: textureLoader.load('textures/grass/normal.png', wrappingGrass),
  62.         //metalnessMap: textureLoader.load('textures/grass/metallic.png'),
  63.         //roughnessMap: textureLoader.load('textures/grass/roughness.png', wrapping),
  64.         roughness: 1,
  65.         metalness: 0,
  66.         envMap: HDR,
  67.     }
  68. )
  69.  
  70. var aluminium = new THREE.MeshPhysicalMaterial(
  71.     {
  72.         map: textureLoader.load('textures/aluminium/albedo.png', wrappingGrass),
  73.         normalMap: textureLoader.load('textures/aluminium/normal.png', wrappingGrass),
  74.         metalnessMap: textureLoader.load('textures/aluminium/metallic.png', wrappingGrass),
  75.         roughnessMap: textureLoader.load('textures/aluminium/roughness.png', wrappingGrass),
  76.         envMap: HDR
  77.     }
  78. );
  79.  
  80. var tiles = new THREE.MeshPhysicalMaterial(
  81.     {
  82.         map: textureLoader.load('textures/tiles/albedo.png', wrapping),
  83.         normalMap: textureLoader.load('textures/tiles/normal.png', wrapping),
  84.         //metalnessMap: textureLoader.load('textures/tiles/metallic.png', wrapping),
  85.         metalness: 0,
  86.         roughnessMap: textureLoader.load('textures/tiles/roughness.png', wrapping),
  87.         envMap: HDR
  88.     }
  89. );
  90.  
  91. var materials = [wood, aluminium, concrete, tiles];
  92. var index = 0;
  93.  
  94. //lights
  95. var keyLight = new THREE.SpotLight(0x404040, 1);
  96. keyLight.position.set(-100, 200, -250);
  97. keyLight.castShadow = true;
  98. scene.add(keyLight);
  99. keyLight.shadow.mapSize.width = keyLight.shadow.mapSize.height = 2048;
  100. keyLight.shadow.bias = 0.05;
  101.  
  102. var secondLight = new THREE.SpotLight(0x404040);
  103. secondLight.position.set(100, 200, -250);
  104. secondLight.intensity = 0.5;
  105. secondLight.castShadow = true;
  106. scene.add(secondLight);
  107.  
  108. var thirdLight = new THREE.SpotLight(0x404040);
  109. thirdLight.position.set(-100, -50, 250);
  110. thirdLight.castShadow = true;
  111. scene.add(thirdLight);
  112.  
  113. var overallLight = new THREE.AmbientLight(0x404040);
  114. overallLight.intensity = 1;
  115. scene.add(overallLight);
  116.  
  117. //camera
  118. let perspectiveCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  119. perspectiveCamera.position.set(0, 200, -200);
  120. scene.add(perspectiveCamera);
  121.  
  122. //renderer creation
  123. var renderer = new THREE.WebGLRenderer({ antialias: true });
  124. renderer.setPixelRatio(window.devicePixelRatio);
  125. renderer.setSize(window.innerWidth, window.innerHeight);
  126. renderer.setClearColor("#777777");
  127. renderer.shadowMap.enabled = true;
  128. renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  129.  
  130. document.body.appendChild(renderer.domElement);
  131.  
  132.  
  133.  
  134. //objects
  135. var loader = new FBXLoader();
  136. loader.load('meshes/Camargue_aluminium.fbx', function (object) {
  137.     // object.traverse(function (child) {
  138.     //     if (child.isMesh) {
  139.     //         child.material = aluminium;
  140.     //         child.castShadow = true;
  141.     //     }
  142.     // });
  143.  
  144.     scene.add(object);
  145.     rayCastable.push(object);
  146. });
  147.  
  148. var loader2 = new FBXLoader();
  149.     loader2.load('meshes/Camargue_wood.fbx', function (object) {
  150.         // object.traverse(function (child) {
  151.         //     if (child.isMesh) {
  152.         //         child.material = wood;
  153.         //         child.castShadow = true;
  154.         //     }
  155.         // });
  156.  
  157.         scene.add(object);
  158.         rayCastable.push(object);
  159.     });
  160.  
  161. var geometryPlane = new THREE.PlaneBufferGeometry(1000, 1000, 1);
  162. // var material = chrome;
  163. var plane = new THREE.Mesh(geometryPlane, grass);
  164. // var cubeCamera = new THREE.CubeCamera(plane);
  165. // cubeCamera.position.set(0, 0, 0);
  166. //material.envMap = cubeCamera.texture;
  167.  
  168. //var plane = new Reflector( geometryPlane, { clipBias: 0.003, textureWidth: 2048, textureHeight: 2048 } );
  169. plane.rotateX(-Math.PI / 2);
  170.  
  171. plane.receiveShadow = true;
  172. scene.add(plane);
  173.  
  174. // var helper = new THREE.CameraHelper(keyLight.shadow.camera);
  175. // var helper2 = new THREE.CameraHelper(secondLight.shadow.camera);
  176. // var helper3 = new THREE.CameraHelper(thirdLight.shadow.camera);
  177. // scene.add(helper);
  178. //scene.add(helper2);
  179. //scene.add(helper3);
  180.  
  181. //orbit controls
  182. let controls = new OrbitControls(perspectiveCamera, renderer.domElement);
  183. controls.target.set(0, 0, -1);
  184. controls.update();
  185.  
  186. //Resize event
  187. window.addEventListener('resize', () => {
  188.     renderer.setSize(window.innerWidth, window.innerHeight);
  189.     perspectiveCamera.aspect = window.innerWidth / window.innerHeight;
  190.     perspectiveCamera.updateProjectionMatrix();
  191. });
  192.  
  193. window.addEventListener('mousemove', function (event) {
  194.     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  195.     mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
  196.  
  197.     perspectiveCamera.updateMatrixWorld();
  198.     raycaster.setFromCamera(mouse, perspectiveCamera);
  199. }, false);
  200.  
  201. window.addEventListener('mousedown', () => {
  202.     var intersects = raycaster.intersectObjects(rayCastable, true);
  203.  
  204.     if (intersects.length > 0) {
  205.         index++;
  206.         if (index >= materials.length) {
  207.             index = 0;
  208.         }
  209.  
  210.         intersects[0].object.material = materials[index];
  211.     }
  212. });
  213.  
  214. // //render updated viewport
  215. var update = function () {
  216.     requestAnimationFrame(update);
  217.     renderer.render(scene, perspectiveCamera);
  218.  
  219.     //if(cubeCamera) cubeCamera.update(renderer, scene);
  220. };
  221. update();
Advertisement
RAW Paste Data Copied
Advertisement