API tools faq
paste
Guest User

Untitled

a guest
Oct 19th, 2018
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <script src="three.min.js"></script>
  4. <script src='threex.grass.js'></script>
  5. <script src='OrbitControls.js'></script>
  6.  
  7. <body style='margin: 0px; overflow: hidden;'><script>
  8. var renderer = new THREE.WebGLRenderer({
  9. antialias : true
  10. });
  11. renderer.setSize( window.innerWidth, window.innerHeight );
  12.  
  13. renderer.shadowMapEnabled = true;
  14. renderer.shadowMapSoft = true;
  15.  
  16. renderer.shadowCameraNear = 3;
  17. renderer.shadowCameraFov = 50;
  18.  
  19. renderer.shadowMapBias = 0.0039;
  20. renderer.shadowMapDarkness = 0.5;
  21. renderer.shadowMapWidth = 1024;
  22. renderer.shadowMapHeight = 1024;
  23. document.body.appendChild( renderer.domElement );
  24.  
  25.  
  26.  
  27.  
  28. //var axesHelper = new THREE.AxesHelper( 1000000 );
  29.  
  30.  
  31. var onRenderFcts= [];
  32. var scene = new THREE.Scene();
  33. scene.background = 'images/bg.jpg'
  34. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
  35. camera.position.y = 20;
  36. camera.position.z = 2;
  37. camera.position.x = 10
  38. camera.lookAt(scene.position);
  39.  
  40. window.addEventListener( 'resize', onWindowResize, false );
  41.  
  42.  
  43.  
  44. //////////////////////////////////////////////////////////////////////////////////
  45. // set 3 point lighting //
  46. //////////////////////////////////////////////////////////////////////////////////
  47.  
  48. ;(function(){
  49. var light = new THREE.DirectionalLight( 0xffffff );
  50. light.position.set( 1, 1, 1 );
  51. light.castShadow = true;
  52. light.shadowDarkness = 0.5;
  53.  
  54.  
  55.  
  56. scene.add( light );
  57.  
  58. var light = new THREE.DirectionalLight( 0x002288 );
  59. light.position.set( - 1, - 1, - 1 );
  60. light.castShadow = true;
  61. light.shadowDarkness = 0.5;
  62.  
  63.  
  64. scene.add( light );
  65. var light = new THREE.AmbientLight( 0x222222 );
  66. scene.add( light );
  67.  
  68. //
  69. //window.addEventListener( 'resize', onWindowResize, false );
  70.  
  71. })()
  72.  
  73. // add a light behind
  74. var light = new THREE.DirectionalLight('white', 1)
  75. light.castShadow = true;
  76. light.shadowDarkness = 0.5;
  77. // var light = new THREE.PointLight('white', 2)
  78. scene.add( light )
  79. light.position.y= 1
  80.  
  81.  
  82. //////////////////////////////////////////////////////////////////////////////////
  83. // Creation rock
  84. //////////////////////////////////////////////////////////////////////////////////
  85.  
  86. function createRock(x,z){
  87. var geometry = new THREE.BoxGeometry( 0.5, 4, 0.8 );
  88. var textureUrl = 'images/rocks.jpg'
  89. var texture = THREE.ImageUtils.loadTexture(textureUrl);
  90. texture.wrapS = THREE.RepeatWrapping;
  91. texture.wrapT = THREE.RepeatWrapping;
  92. texture.repeat.x= 1
  93. texture.repeat.y= 1
  94. texture.anisotropy = renderer.getMaxAnisotropy()
  95. var material = new THREE.MeshPhongMaterial({
  96. map : texture,
  97. emissive: 'gray',
  98. })
  99.  
  100. var rock = new THREE.Mesh( geometry, material);
  101. rock.position.set(x,1,z);
  102. scene.add(rock);
  103.  
  104. }
  105.  
  106.  
  107. //////////////////////////////////////////////////////////////////////////////////
  108. // Creation Menhir
  109. //////////////////////////////////////////////////////////////////////////////////
  110.  
  111.  
  112.  
  113.  
  114. function CreateDolmen(x, z){
  115. dolmen = new THREE.Object3D();
  116.  
  117.  
  118. var geometry = new THREE.BoxGeometry( 1, 3, 1 );
  119. var textureUrl = 'images/rocks.jpg'
  120. var texture = THREE.ImageUtils.loadTexture(textureUrl);
  121. texture.wrapS = THREE.RepeatWrapping;
  122. texture.wrapT = THREE.RepeatWrapping;
  123. texture.repeat.x= 1
  124. texture.repeat.y= 1
  125. texture.anisotropy = renderer.getMaxAnisotropy()
  126. var material = new THREE.MeshPhongMaterial({
  127. map : texture,
  128. emissive: 'gray',
  129. })
  130.  
  131. //pilier1
  132. pilier1 = new THREE.Mesh( geometry, material );
  133.  
  134. pilier1.position.set(x,1.25,z);
  135.  
  136. //pilier2
  137. pilier2 = new THREE.Mesh( geometry, material );
  138.  
  139. pilier2.position.set(x+2,1.25,z);
  140. //toit
  141. var geometry = new THREE.BoxGeometry( 4, 1, 1.25 );
  142. toit = new THREE.Mesh( geometry, material );
  143.  
  144. toit.position.set(x+1,3,z);
  145.  
  146.  
  147.  
  148. dolmen.add( pilier1 );
  149. dolmen.add( pilier2);
  150. dolmen.add( toit );
  151.  
  152.  
  153.  
  154. dolmen.position.set(0,0,0);
  155.  
  156.  
  157. //this["dolmen"+n].rotateY(r);
  158. dolmen.castShadow = true;
  159. dolmen.receiveShadow = false;
  160.  
  161.  
  162. return dolmen.clone();
  163.  
  164. }
  165.  
  166. function RotateObject(object,degreeY=0){
  167.  
  168.  
  169. degreeY = (degreeY * Math.PI)/180;
  170.  
  171. scene.add(object);
  172.  
  173. object.rotateY(degreeY);
  174.  
  175. }
  176.  
  177. //////////////////////////////////////////////////////////////////////////////////
  178. // Creation Rock
  179. //////////////////////////////////////////////////////////////////////////////////
  180.  
  181. function CreateRock(x,z){
  182.  
  183. var pilier = new THREE.Object3D();
  184. var geometry = new THREE.BoxGeometry( 0.5, 4, 0.8 );
  185. var textureUrl = 'images/rocks.jpg'
  186. var texture = THREE.ImageUtils.loadTexture(textureUrl);
  187. texture.wrapS = THREE.RepeatWrapping;
  188. texture.wrapT = THREE.RepeatWrapping;
  189. texture.repeat.x= 1
  190. texture.repeat.y= 1
  191. texture.anisotropy = renderer.getMaxAnisotropy()
  192. var material = new THREE.MeshPhongMaterial({
  193. map : texture,
  194. emissive: 'gray',
  195. })
  196.  
  197. var rock = new THREE.Mesh( geometry, material);
  198. rock.position.set(x,0,z);
  199. pilier.add(rock);
  200. pilier.position.set(0,0,0)
  201.  
  202. return pilier.clone();
  203.  
  204. }
  205.  
  206.  
  207.  
  208.  
  209.  
  210. //////////////////////////////////////////////////////////////////////////////////
  211. // position of stuff //
  212. //////////////////////////////////////////////////////////////////////////////////
  213. //menhir (n, x, z, rotation)
  214.  
  215. var r = 0;
  216.  
  217. var i = 1;
  218.  
  219.  
  220.  
  221. while(r<= 360){
  222. if(i%2 == 0){
  223. RotateObject(CreateDolmen(0,8),r);
  224.  
  225. }else{RotateObject(CreateRock(1,8),r);}
  226. r+=30;
  227. i++;
  228. }
  229.  
  230.  
  231. r = 0;
  232.  
  233. while(r <= 360){
  234.  
  235. if (i % 2 == 0){
  236. RotateObject(CreateDolmen(0,3),r);
  237. }
  238.  
  239. i++;
  240. r += 60;
  241. }
  242.  
  243.  
  244.  
  245.  
  246.  
  247.  
  248.  
  249.  
  250.  
  251.  
  252.  
  253.  
  254. //////////////////////////////////////////////////////////////////////////////////
  255. // grass ground //
  256. //////////////////////////////////////////////////////////////////////////////////
  257.  
  258. var textureUrl = 'images/grasslight-small.jpg'
  259. var texture = THREE.ImageUtils.loadTexture(textureUrl);
  260. texture.wrapS = THREE.RepeatWrapping;
  261. texture.wrapT = THREE.RepeatWrapping;
  262. texture.repeat.x= 10
  263. texture.repeat.y= 10
  264. texture.anisotropy = renderer.getMaxAnisotropy()
  265.  
  266. // build object3d
  267. var geometry = new THREE.PlaneGeometry(50, 50)
  268. var material = new THREE.MeshPhongMaterial({
  269. map : texture,
  270. emissive: 'green',
  271. })
  272. var object3d = new THREE.Mesh(geometry, material)
  273. object3d.rotateX(-Math.PI/2)
  274. object3d.castShadow = false;
  275. object3d.receiveShadow = true;
  276. scene.add(object3d)
  277.  
  278.  
  279. //////////////////////////////////////////////////////////////////////////////////
  280. // comment //
  281. //////////////////////////////////////////////////////////////////////////////////
  282.  
  283. var nTufts = 30000
  284. var positions = new Array(nTufts)
  285. for(var i = 0; i < nTufts; i++){
  286. var position = new THREE.Vector3()
  287. position.x = (Math.random()-0.5)*50
  288. position.z = (Math.random()-0.5)*50
  289. positions[i] = position
  290. }
  291. var mesh = THREEx.createGrassTufts(positions)
  292. mesh.castShadow = false;
  293. mesh.receiveShadow = true;
  294. scene.add(mesh)
  295.  
  296. // load the texture
  297. var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass01.png'
  298. var material = mesh.material
  299. material.map = THREE.ImageUtils.loadTexture(textureUrl)
  300. material.alphaTest = 0.7
  301.  
  302. //////////////////////////////////////////////////////////////////////////////////
  303. // comment //
  304. //////////////////////////////////////////////////////////////////////////////////
  305.  
  306.  
  307. var nTufts = 20000
  308. var positions = new Array(nTufts)
  309. for(var i = 0; i < nTufts; i++){
  310. var position = new THREE.Vector3()
  311. position.x = (Math.random()-0.5)*50
  312. position.z = (Math.random()-0.5)*50
  313. positions[i] = position
  314. }
  315. var mesh = THREEx.createGrassTufts(positions)
  316. mesh.castShadow = false;
  317. mesh.receiveShadow = true;
  318. scene.add(mesh)
  319.  
  320. // load the texture
  321. var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass02.png'
  322. var material = mesh.material
  323. material.map = THREE.ImageUtils.loadTexture(textureUrl)
  324. material.alphaTest = 0.7
  325.  
  326. //////////////////////////////////////////////////////////////////////////////////
  327. // comment //
  328. //////////////////////////////////////////////////////////////////////////////////
  329. var nTufts = 15000
  330. var positions = new Array(nTufts)
  331. for(var i = 0; i < nTufts; i++){
  332. var position = new THREE.Vector3()
  333. position.x = (Math.random()-0.5)*50
  334. position.z = (Math.random()-0.5)*50
  335. positions[i] = position
  336. }
  337. var mesh = THREEx.createGrassTufts(positions);
  338. mesh.castShadow = false;
  339. mesh.receiveShadow = true;
  340. scene.add(mesh)
  341.  
  342. // load the texture
  343. var material = mesh.material
  344. var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers01.png'
  345. material.map = THREE.ImageUtils.loadTexture(textureUrl)
  346. material.emissive.set(0x888888)
  347. material.alphaTest = 0.7
  348.  
  349. //////////////////////////////////////////////////////////////////////////////////
  350. // comment //
  351. //////////////////////////////////////////////////////////////////////////////////
  352. var nTufts = 12000
  353. var positions = new Array(nTufts)
  354. for(var i = 0; i < nTufts; i++){
  355. var position = new THREE.Vector3()
  356. position.x = (Math.random()-0.5)*50
  357. position.z = (Math.random()-0.5)*50
  358. positions[i] = position
  359. }
  360. var mesh = THREEx.createGrassTufts(positions)
  361. mesh.castShadow = false;
  362. mesh.receiveShadow = true;
  363. scene.add(mesh)
  364.  
  365. // load the texture
  366. var material = mesh.material
  367. var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers02.png'
  368. material.map = THREE.ImageUtils.loadTexture(textureUrl)
  369. material.emissive.set(0x888888)
  370. material.alphaTest = 0.7
  371.  
  372.  
  373. //////////////////////////////////////////////////////////////////////////////////
  374. // Camera Controls //
  375. //////////////////////////////////////////////////////////////////////////////////
  376.  
  377. controls = new THREE.OrbitControls( camera, renderer.domElement );
  378. //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
  379. controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
  380. controls.dampingFactor = 0.25;
  381. controls.screenSpacePanning = false;
  382. controls.minDistance = 3;
  383. controls.maxDistance = 70;
  384.  
  385. controls.maxPolarAngle = (Math.PI / 2)/1.25;
  386.  
  387. //////////////////////////////////////////////////////////////////////////////////
  388. // render the scene //
  389. //////////////////////////////////////////////////////////////////////////////////
  390. onRenderFcts.push(function(){
  391. //renderer = new THREE.WebGLRenderer({ antialias: true });
  392. renderer.shadowMapEnabled = true;
  393.  
  394. renderer.render( scene, camera );
  395. })
  396.  
  397. //////////////////////////////////////////////////////////////////////////////////
  398. // loop runner //
  399. //////////////////////////////////////////////////////////////////////////////////
  400. var lastTimeMsec= null
  401. requestAnimationFrame(function animate(nowMsec){
  402. // keep looping
  403. requestAnimationFrame( animate );
  404. controls.update();
  405. render();
  406. // measure time
  407. lastTimeMsec = lastTimeMsec || nowMsec-1000/60
  408. var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
  409. lastTimeMsec = nowMsec
  410. // call each update function
  411. onRenderFcts.forEach(function(onRenderFct){
  412. onRenderFct(deltaMsec/1000, nowMsec/1000)
  413. })
  414.  
  415. })
  416. function onWindowResize() {
  417. camera.aspect = window.innerWidth / window.innerHeight;
  418. camera.updateProjectionMatrix();
  419. renderer.setSize( window.innerWidth, window.innerHeight );
  420. }
  421.  
  422. function render() {
  423.  
  424. renderer.render( scene, camera );
  425. }
  426. </script></body>
Add Comment
Please, Sign In to add comment
Public Pastes
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!