SHARE
TWEET

Untitled

a guest Oct 18th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title>Temple</title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7.         <link type="text/css" rel="stylesheet" href="../../examples/main.css">
  8.     </head>
  9.     <body>
  10.  
  11.         <div id="container"></div>
  12.  
  13.         <script type="module">
  14.  
  15.             import * as THREE from '../build/three.module.js';
  16.  
  17.             import Stats from '../jsm/libs/stats.module.js';
  18.  
  19.             import { GUI } from '../jsm/libs/dat.gui.module.js';
  20.             import { OrbitControls } from '../jsm/controls/OrbitControls.js';
  21.             import { Water } from '../jsm/objects/Water.js';
  22.             import { Sky } from '../jsm/objects/Sky.js';
  23.  
  24.             var texture = new THREE.TextureLoader().load( 'textures/marble.jpg' );
  25.             var material = new THREE.MeshBasicMaterial( { map: texture } );
  26.  
  27.             var container, stats;
  28.             var camera, scene, renderer, light;
  29.             var controls, water, sphere;
  30.             var mesh, cylinder,mesh2;
  31.  
  32.             var size = 0.2;
  33.             var nbColumns = 8;
  34.             var nbLines = 4;
  35.             var colSpacing = 170;
  36.  
  37.             var floorLenght = 200 * size;
  38.             var floorWidth  = 200 * size;
  39.  
  40.             init();
  41.             animate();
  42.  
  43.             function createColumn(x,y,z){
  44.                 var geo_cylindre = new THREE.CylinderBufferGeometry( size*20, size*20, size*200, size*32);
  45.  
  46.                 var geometry_cube = new THREE.BoxBufferGeometry( size*80, size*20, size*80 );
  47.  
  48.                 cylinder = new THREE.Mesh( geo_cylindre, material);
  49.                 cylinder.position.y = 152*size;
  50.                 cylinder.position.x = x;
  51.                 cylinder.position.z = z;
  52.                 scene.add (cylinder);
  53.  
  54.                 mesh = new THREE.Mesh( geometry_cube, material );
  55.                 mesh.position.y = y-((size*100)+(size*10))+(152*size);
  56.                 mesh.position.x = x;
  57.                 mesh.position.z  = z;
  58.                 scene.add(mesh);
  59.  
  60.                 mesh2 = new THREE.Mesh( geometry_cube , material ) ;
  61.                 mesh2.position.y = y+((size*100)+(size*10))+(152*size);
  62.                 mesh2.position.x = x;
  63.                 mesh2.position.z = z;
  64.                 scene.add(mesh2);
  65.             }
  66.  
  67.             function init() {
  68.  
  69.                 container = document.getElementById( 'container' );
  70.  
  71.                 //
  72.  
  73.                 renderer = new THREE.WebGLRenderer({ antialias: true });
  74.                 renderer.setPixelRatio( window.devicePixelRatio );
  75.                 renderer.setSize( window.innerWidth, window.innerHeight );
  76.                 container.appendChild( renderer.domElement );
  77.  
  78.                 //
  79.  
  80.                 scene = new THREE.Scene();
  81.  
  82.                 //
  83.  
  84.                 camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
  85.                 camera.position.z = 800;
  86.                 camera.position.y = 100;
  87.                 camera.position.x = 0;
  88.  
  89.  
  90.  
  91.                 //
  92.  
  93.                 light = new THREE.DirectionalLight( 0xffffff, 0.8 );
  94.                 scene.add( light );
  95.  
  96.                 //Cylinders
  97.  
  98.                 for(var i = 0; i < nbColumns; i ++){
  99.                     for(var j = 0; j < nbLines; j++){
  100.                         createColumn(i*colSpacing*size, 0, j*colSpacing*size);
  101.                     }
  102.                 }
  103.  
  104.                 j--;
  105.                 i--;
  106.                 floorLenght += colSpacing*i*size;
  107.                 floorWidth += colSpacing*j*size;
  108.  
  109.                
  110.  
  111.                 //Floor
  112.  
  113.                 for(var k=0; k<=3; k++){
  114.                    
  115.                     var geometry = new THREE.BoxBufferGeometry( floorLenght, 10 * size, floorWidth);
  116.  
  117.                     floorLenght -= k * 7 * size;
  118.                     floorWidth -= k * 7 * size;
  119.  
  120.                     var floor = new THREE.Mesh( geometry, material );
  121.                     floor.position.y = 10 * k * size;
  122.                     floor.position.x = (colSpacing/2)*i*size;
  123.                     floor.position.z = (colSpacing/2)*j*size;
  124.                     scene.add( floor );
  125.                 }
  126.                
  127.  
  128.                 // Water
  129.  
  130.                 var waterGeometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
  131.  
  132.                 water = new Water(
  133.                     waterGeometry,
  134.                     {
  135.                         textureWidth: 512,
  136.                         textureHeight: 512,
  137.                         waterNormals: new THREE.TextureLoader().load( '../../examples/textures/waternormals.jpg', function ( texture ) {
  138.  
  139.                             texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  140.  
  141.                         } ),
  142.                         alpha: 1.0,
  143.                         sunDirection: light.position.clone().normalize(),
  144.                         sunColor: 0xffffff,
  145.                         waterColor: 0x001e0f,
  146.                         distortionScale: 3.7,
  147.                         fog: scene.fog !== undefined
  148.                     }
  149.                 );
  150.  
  151.                 water.rotation.x = - Math.PI / 2;
  152.  
  153.                 scene.add( water );
  154.  
  155.                 // Skybox
  156.  
  157.                 var sky = new Sky();
  158.  
  159.                 var uniforms = sky.material.uniforms;
  160.  
  161.                 uniforms[ 'turbidity' ].value = 10;
  162.                 uniforms[ 'rayleigh' ].value = 2;
  163.                 uniforms[ 'luminance' ].value = 1;
  164.                 uniforms[ 'mieCoefficient' ].value = 0.005;
  165.                 uniforms[ 'mieDirectionalG' ].value = 0.8;
  166.  
  167.                 var parameters = {
  168.                     distance: 400,
  169.                     inclination: 0.49,
  170.                     azimuth: 0.205
  171.                 };
  172.  
  173.                 var cubeCamera = new THREE.CubeCamera( 0.1, 1, 900 );
  174.                 cubeCamera.renderTarget.texture.generateMipmaps = true;
  175.                 cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipmapLinearFilter;
  176.  
  177.                 scene.background = cubeCamera.renderTarget;
  178.  
  179.                 function updateSun() {
  180.  
  181.                     var theta = Math.PI * ( parameters.inclination - 0.5 );
  182.                     var phi = 2 * Math.PI * ( parameters.azimuth - 0.5 );
  183.  
  184.                     light.position.x = parameters.distance * Math.cos( phi );
  185.                     light.position.y = parameters.distance * Math.sin( phi ) * Math.sin( theta );
  186.                     light.position.z = parameters.distance * Math.sin( phi ) * Math.cos( theta );
  187.  
  188.                     sky.material.uniforms[ 'sunPosition' ].value = light.position.copy( light.position );
  189.                     water.material.uniforms[ 'sunDirection' ].value.copy( light.position ).normalize();
  190.  
  191.                     cubeCamera.update( renderer, sky );
  192.  
  193.                 }
  194.  
  195.                 updateSun();
  196.                 //
  197.  
  198.                 controls = new OrbitControls( camera, renderer.domElement );
  199.                 controls.maxPolarAngle = Math.PI * 0.495;
  200.                 controls.target.set( 0, 10, 0 );
  201.                 controls.minDistance = 40.0;
  202.                 controls.maxDistance = 200.0;
  203.                 controls.update();
  204.  
  205.                 //
  206.  
  207.                 stats = new Stats();
  208.                 container.appendChild( stats.dom );
  209.  
  210.                 // GUI
  211.  
  212.                 var gui = new GUI();
  213.  
  214.                 var folder = gui.addFolder( 'Sky' );
  215.                 folder.add( parameters, 'inclination', 0, 0.5, 0.0001 ).onChange( updateSun );
  216.                 folder.add( parameters, 'azimuth', 0, 1, 0.0001 ).onChange( updateSun );
  217.                 folder.open();
  218.  
  219.                 var uniforms = water.material.uniforms;
  220.  
  221.                 var folder = gui.addFolder( 'Water' );
  222.                 folder.add( uniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
  223.                 folder.add( uniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
  224.                 folder.add( uniforms.alpha, 'value', 0.9, 1, .001 ).name( 'alpha' );
  225.                 folder.open();
  226.  
  227.                 //
  228.  
  229.                 window.addEventListener( 'resize', onWindowResize, false );
  230.  
  231.             }
  232.  
  233.             function onWindowResize() {
  234.  
  235.                 camera.aspect = window.innerWidth / window.innerHeight;
  236.                 camera.updateProjectionMatrix();
  237.  
  238.                 renderer.setSize( window.innerWidth, window.innerHeight );
  239.  
  240.             }
  241.  
  242.             function animate() {
  243.  
  244.                 requestAnimationFrame( animate );
  245.                 render();
  246.                 stats.update();
  247.  
  248.             }
  249.  
  250.             function render() {
  251.  
  252.                 var time = performance.now() * 0.001;
  253.  
  254.                 water.material.uniforms[ 'time' ].value += 1.0 / 60.0;
  255.  
  256.                 renderer.render( scene, camera );
  257.  
  258.             }
  259.  
  260.         </script>
  261.     </body>
  262. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top