antoinefortin/ThreeJSgris.js

## ThreeJSgris.js
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>


		<script type="importmap">
			{
				"imports": {
					"three": "./three/build/three.module.js"
				}
			}
		</script>

		<script type="module">
				import * as THREE from 'three';
				import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js';
				import { FBXLoader } from './three/examples/jsm/loaders/FBXLoader.js';

				let camera, scene, renderer, stats;

			init();
			animate();

				function init()
				{


					const container = document.createElement( 'div' );
					document.body.appendChild( container );

					camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
					camera.position.set( 100, 200, 300 );

					scene = new THREE.Scene();
					scene.background = new THREE.Color( 0xa0a0a0 );
					scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

					const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
					hemiLight.position.set( 0, 200, 0 );
					scene.add( hemiLight );

					const dirLight = new THREE.DirectionalLight( 0xffffff );
					dirLight.position.set( 0, 200, 100 );
					dirLight.castShadow = true;
					dirLight.shadow.camera.top = 180;
					dirLight.shadow.camera.bottom = - 100;
					dirLight.shadow.camera.left = - 120;
					dirLight.shadow.camera.right = 120;
					scene.add( dirLight );

					// ground
					const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
					mesh.rotation.x = - Math.PI / 2;
					mesh.receiveShadow = true;
					scene.add( mesh );

					var xPos = 0.0;
					var yPos = 0.0;
					var radius = 25;
					var angle = 0.0;

					var gridSize = 50;
					var cubes = [];
					var currCubePosX = 0;
					var currCubePosY = 0;


					var cubeSize
					for(var x= 0; x < gridSize; x++)
					{
						currCubePosX += 5;
						currCubePosY = 0;
						for(var y = 0; y < gridSize; y++)
						{

							currCubePosY += 5;

							const geometry = new THREE.BoxGeometry(5, 5, 5);
							const material = new THREE.MeshPhongMaterial( {color: "rgb(" +  gridSize + ", 0, 0)"} );
							const cube = new THREE.Mesh( geometry, material );


							if(true)
							// set cube position
							cube.position.x = currCubePosX;
							cube.position.y = currCubePosY;


							scene.add( cube );

						}

						//cube.position.y += currCubePosY;

						/* SHIT*/

						const xgeometry = new THREE.BoxGeometry();
						const xmaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
						const xcube = new THREE.Mesh( xgeometry, xmaterial );
						scene.add( xcube );
					}

					const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
					grid.material.opacity = 0.2;
					grid.material.transparent = true;
					scene.add( grid );

					renderer = new THREE.WebGLRenderer( { antialias: true } );
					renderer.setPixelRatio( window.devicePixelRatio );
					renderer.setSize( window.innerWidth, window.innerHeight );
					renderer.shadowMap.enabled = true;
					container.appendChild( renderer.domElement );

					const controls = new OrbitControls( camera, renderer.domElement );
					controls.target.set( 0, 100, 0 );
					controls.update();

					window.addEventListener( 'resize', onWindowResize );


				}


			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {


				requestAnimationFrame( animate );
				renderer.render( scene, camera );

			}


		</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	</head>
	<body>


	<script type="importmap">
	{
	"imports": {
	"three": "./three/build/three.module.js"
	}
	}
	</script>

	<script type="module">
	import * as THREE from 'three';
	import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js';
	import { FBXLoader } from './three/examples/jsm/loaders/FBXLoader.js';

	let camera, scene, renderer, stats;

	init();
	animate();

	function init()
	{


	const container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.set( 100, 200, 300 );

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xa0a0a0 );
	scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

	const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
	hemiLight.position.set( 0, 200, 0 );
	scene.add( hemiLight );

	const dirLight = new THREE.DirectionalLight( 0xffffff );
	dirLight.position.set( 0, 200, 100 );
	dirLight.castShadow = true;
	dirLight.shadow.camera.top = 180;
	dirLight.shadow.camera.bottom = - 100;
	dirLight.shadow.camera.left = - 120;
	dirLight.shadow.camera.right = 120;
	scene.add( dirLight );

	// ground
	const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
	mesh.rotation.x = - Math.PI / 2;
	mesh.receiveShadow = true;
	scene.add( mesh );

	var xPos = 0.0;
	var yPos = 0.0;
	var radius = 25;
	var angle = 0.0;

	var gridSize = 50;
	var cubes = [];
	var currCubePosX = 0;
	var currCubePosY = 0;


	var cubeSize
	for(var x= 0; x < gridSize; x++)
	{
	currCubePosX += 5;
	currCubePosY = 0;
	for(var y = 0; y < gridSize; y++)
	{

	currCubePosY += 5;

	const geometry = new THREE.BoxGeometry(5, 5, 5);
	const material = new THREE.MeshPhongMaterial( {color: "rgb(" + gridSize + ", 0, 0)"} );
	const cube = new THREE.Mesh( geometry, material );


	if(true)
	// set cube position
	cube.position.x = currCubePosX;
	cube.position.y = currCubePosY;



	scene.add( cube );

	}

	//cube.position.y += currCubePosY;

	/* SHIT*/

	const xgeometry = new THREE.BoxGeometry();
	const xmaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	const xcube = new THREE.Mesh( xgeometry, xmaterial );
	scene.add( xcube );
	}

	const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
	grid.material.opacity = 0.2;
	grid.material.transparent = true;
	scene.add( grid );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.shadowMap.enabled = true;
	container.appendChild( renderer.domElement );

	const controls = new OrbitControls( camera, renderer.domElement );
	controls.target.set( 0, 100, 0 );
	controls.update();

	window.addEventListener( 'resize', onWindowResize );


	}


	function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	}

	function animate() {


	requestAnimationFrame( animate );
	renderer.render( scene, camera );

	}


	</script>

	</body>
	</html>