<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.