antoinefortin · January 28, 2022 07:04
diff --git a/ThreeJSgris.js b/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>