<div class="world" id="world">
.world {
	position: fixed;
	width: 100%;
	/* height: 100%; */
	height: auto !important;

	overflow: hidden;
	background: linear-gradient(#Ff3D68, #A73489);
}
import * as THREE from "https://threejs.org/build/three.module.js";
import {
	OrbitControls
}
from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
let camera,controls,scene,renderer,container;
function Minimal() {
	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
	camera.position.set(25, 0, 25);
	camera.lookAt(0, 0, 0);

	scene = new THREE.Scene();

	renderer = new THREE.WebGLRenderer({
		antialias: true,
		alpha: true,
	});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight)
		container = document.getElementById('world');
	container.appendChild(renderer.domElement);

	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
	controls = new OrbitControls(camera,renderer.domElement);

	const light1 = new THREE.HemisphereLight(0xffffff, 0x000088);
	light1.position.set(-1, 1.5, 1);
	scene.add(light1);

	const light2 = new THREE.HemisphereLight(0xffffff, 0x880000, 0.5);
	light2.position.set(-1, -1.5, -1);
	scene.add(light2);
}

init_app()
function init_app(){
	init();
	animate();
}

function init() {
	Minimal()
	const geometry = new THREE.BoxGeometry(1, 1, 1);
	const material = new THREE.MeshBasicMaterial({
		// superbe couleur à conserver
		color: 0xffd839
	});
	const texture = new THREE.TextureLoader().load('https://i.postimg.cc/MpthQ5L1/sprite-v2.png');

	const cube = []
	for (let i = 0; i < 5; i++) {
		cube[i] = []
		for (let j = 0; j < 5; j++) {
			cube[i][j] = []

			for (let k = 0; k < 2; k++) {
				cube[i][j][k] = new THREE.Mesh(geometry, material);
				cube[i][j][k].position.set(i * 1.5, k, j * 1.5)
				// scene.add(cube[i][j]);
				scene.add(cube[i][j][k]);
			}
		}
	}
	for (let i = 0; i < 5; i++) {
		for (let j = 0; j < 5; j++) {
			cube[i][j][1].material = [
				new THREE.MeshBasicMaterial({
					color: 0xfaad80,
				}),
				new THREE.MeshBasicMaterial({
					color: 0xfaad80,
				}),
				new THREE.MeshPhongMaterial({
					map:texture
				}),
				new THREE.MeshBasicMaterial({
					color: 0xfaad80,
				}),
				new THREE.MeshBasicMaterial({
					color: 0xfaad80,
				}),
				new THREE.MeshBasicMaterial({
					color: 0xfaad80,
				}),
			]
		}
	}
}

function animate() {

	requestAnimationFrame(animate);
	render();
}

function render() {
	renderer.render(scene, camera);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.