Night Lords 3D

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Night Lords 3D</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#080b12}
canvas{display:block}
</style>
</head>
<body>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x080b12);

const camera = new THREE.PerspectiveCamera(40,innerWidth/innerHeight,0.1,100);
camera.position.set(7,5,10);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth,innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
renderer.outputColorSpace=THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

const controls=new OrbitControls(camera,renderer.domElement);
controls.target.set(0,2.8,0);
controls.enableDamping=true;

scene.add(new THREE.HemisphereLight(0x9bbcff,0x17101c,2));

const light=new THREE.DirectionalLight(0xffffff,3);
light.position.set(5,9,7);
light.castShadow=true;
scene.add(light);

const blue=new THREE.MeshStandardMaterial({
 color:0x102b65,metalness:0.7,roughness:0.3
});
const darkBlue=new THREE.MeshStandardMaterial({
 color:0x07152d,metalness:0.65,roughness:0.35
});
const metal=new THREE.MeshStandardMaterial({
 color:0x8a8d98,metalness:0.9,roughness:0.25
});
const gold=new THREE.MeshStandardMaterial({
 color:0x96703b,metalness:0.8,roughness:0.3
});
const black=new THREE.MeshStandardMaterial({
 color:0x090b12,metalness:0.5,roughness:0.5
});
const red=new THREE.MeshStandardMaterial({
 color:0xff101b,emissive:0x9e0000,emissiveIntensity:2
});
const bone=new THREE.MeshStandardMaterial({
 color:0xd2c5a2,roughness:0.8
});
const lightning=new THREE.MeshStandardMaterial({
 color:0x76caff,emissive:0x237cff,emissiveIntensity:2
});

function sphere(parent,x,y,z,sx,sy,sz,mat){
 const m=new THREE.Mesh(new THREE.SphereGeometry(1,24,16),mat);
 m.position.set(x,y,z);
 m.scale.set(sx,sy,sz);
 m.castShadow=true;
 m.receiveShadow=true;
 parent.add(m);
 return m;
}

function box(parent,x,y,z,sx,sy,sz,mat,rx=0,ry=0,rz=0){
 const m=new THREE.Mesh(new THREE.BoxGeometry(sx,sy,sz),mat);
 m.position.set(x,y,z);
 m.rotation.set(rx,ry,rz);
 m.castShadow=true;
 parent.add(m);
 return m;
}

function cylinder(parent,x,y,z,r1,r2,h,mat,rx=0,rz=0){
 const m=new THREE.Mesh(new THREE.CylinderGeometry(r1,r2,h,24),mat);
 m.position.set(x,y,z);
 m.rotation.set(rx,0,rz);
 m.castShadow=true;
 parent.add(m);
 return m;
}

function bolt(parent,points,mat=lightning,radius=.025){
 const curve=new THREE.CatmullRomCurve3(
 points.map(p=>new THREE.Vector3(...p))
 );
 const mesh=new THREE.Mesh(
 new THREE.TubeGeometry(curve,30,radius,6,false),mat
 );
 parent.add(mesh);
}

// Основная модель
const marine=new THREE.Group();
scene.add(marine);

// Ноги
for(const side of [-1,1]){
 const x=side*.48;

 // Бедро
 sphere(marine,x,1.75,0,.38,.53,.4,blue);

 // Колено
 sphere(marine,x,1.25,.12,.31,.3,.34,metal);
 sphere(marine,x,1.25,.17,.25,.23,.26,blue);

 // Голень
 box(marine,x,0.85,0,.48,.75,.48,blue);
 box(marine,x,0.82,.25,.35,.5,.1,darkBlue);

 // Детали голени
 box(marine,x,0.55,.27,.28,.12,.08,metal);

 // Ботинки
 box(marine,x,.23,.17,.55,.38,.78,black);
 box(marine,x,.28,.48,.5,.23,.17,blue);

 // Металлические полосы
 box(marine,x,.08,.2,.5,.08,.65,metal);
}

// Таз
box(marine,0,2.12,0,1.05,.55,.65,black);
box(marine,0,2.2,.28,.85,.4,.15,blue);

// Пояс
box(marine,0,2.45,.05,1.15,.19,.72,metal);
box(marine,0,2.45,.43,.32,.27,.12,gold);

// Торс
sphere(marine,0,3.15,0,.86,.86,.52,blue);

// Грудная броня
sphere(marine,0,3.25,.39,.72,.62,.3,darkBlue);
box(marine,0,3.18,.66,.7,.18,.12,blue);

// Центральный символ
sphere(marine,0,3.22,.79,.22,.23,.08,gold);
sphere(marine,0,3.22,.87,.12,.13,.04,bone);

// Рёбра брони
for(let i=0;i<3;i++){
 box(marine,0,2.8+i*.18,.55,.65-i*.08,.07,.08,metal);
}

// Реактивный ранец
box(marine,0,3.35,-.55,.9,1.05,.48,darkBlue);
box(marine,0,3.75,-.83,.65,.25,.16,metal);

for(const side of [-1,1]){
 cylinder(marine,side*.48,3.1,-.75,.2,.25,.9,metal);
 cylinder(marine,side*.48,2.7,-.75,.13,.19,.18,black);
}

// Наплечники
for(const side of [-1,1]){
 const x=side*1.02;

 sphere(marine,x,3.7,0,.55,.43,.52,blue);

 sphere(marine,x,3.73,.08,.51,.37,.49,darkBlue);

 // Металлическая окантовка
 sphere(marine,x,3.72,.1,.54,.4,.52,metal);
 sphere(marine,x,3.73,.14,.48,.35,.47,blue);

 // Заклёпки
 for(let i=0;i<5;i++){
  const a=Math.PI*(i/4);
  sphere(
   marine,
   x+side*.39,
   3.7+Math.sin(a)*.27,
   .3+Math.cos(a)*.12,
   .045,.045,.045,gold
  );
 }

 // Эмблема
 sphere(marine,x,3.73,.56,.2,.22,.035,bone);
}

// Руки
for(const side of [-1,1]){
 const x=side*1.35;

 // Верхняя броня руки
 cylinder(marine,x,3.12,0,.29,.34,.85,blue,0,side*.15);

 // Локоть
 sphere(marine,x,2.65,.04,.3,.28,.3,metal);

 // Предплечье
 box(marine,x,2.35,.1,.48,.62,.48,blue,0,0,side*.08);

 // Наручная броня
 box(marine,x,2.35,.34,.36,.45,.13,darkBlue);

 // Кисть
 sphere(marine,x,1.95,.12,.27,.29,.25,black);

 for(let i=0;i<4;i++){
  box(marine,x+(i-1.5)*.11,1.85,.3,.075,.22,.08,metal);
 }
}

// Шея
cylinder(marine,0,4.05,0,.3,.3,.35,metal);

// Шлем
sphere(marine,0,4.48,.02,.46,.53,.43,blue);

// Лицевая маска
sphere(marine,0,4.4,.35,.35,.34,.18,darkBlue);

// Лобовая броня
sphere(marine,0,4.75,.15,.4,.25,.35,blue);

// Глаза
for(const side of [-1,1]){
 sphere(marine,side*.17,4.48,.49,.105,.065,.045,red);
}

// Респиратор
box(marine,0,4.16,.49,.38,.17,.12,metal);

for(let i=-2;i<=2;i++){
 box(marine,i*.065,4.16,.57,.025,.1,.025,black);
}

// Крылья летучей мыши на шлеме
function wing(side){
 const shape=new THREE.Shape();
 shape.moveTo(0,0);
 shape.lineTo(side*.15,.45);
 shape.lineTo(side*.48,.8);
 shape.lineTo(side*.38,.35);
 shape.lineTo(side*.72,.57);
 shape.lineTo(side*.58,.13);
 shape.lineTo(side*.8,.22);
 shape.lineTo(side*.35,-.08);
 shape.closePath();

 const geo=new THREE.ShapeGeometry(shape);
 const m=new THREE.Mesh(geo,new THREE.MeshStandardMaterial({
  color:0x101b36,metalness:.7,roughness:.3,
  side:THREE.DoubleSide
 }));
 m.position.set(side*.15,4.85,-.03);
 m.castShadow=true;
 marine.add(m);
}
wing(-1);
wing(1);

// Декоративные молнии на груди
bolt(marine,[
 [-.35,3.65,.65],
 [-.2,3.45,.7],
 [-.34,3.28,.72],
 [-.05,3.1,.72]
]);

bolt(marine,[
 [.3,3.65,.65],
 [.17,3.48,.72],
 [.3,3.3,.73],
 [.08,3.1,.72]
]);

// Молнии на наплечниках
bolt(marine,[
 [-1.35,3.9,.35],
 [-1.15,3.75,.52],
 [-1.3,3.6,.51],
 [-1.05,3.45,.53]
],lightning,.025);

bolt(marine,[
 [1.35,3.9,.35],
 [1.15,3.75,.52],
 [1.3,3.6,.51],
 [1.05,3.45,.53]
],lightning,.025);

// Черепа-трофеи на поясе
for(let i=0;i<3;i++){
 sphere(marine,-.35+i*.35,2.42,.51,.11,.13,.07,bone);
 sphere(marine,-.38+i*.35,2.45,.57,.025,.025,.02,black);
 sphere(marine,-.32+i*.35,2.45,.57,.025,.025,.02,black);
}

// Цепи и декоративные подвески
for(let side of [-1,1]){
 const chain=[];
 for(let i=0;i<12;i++){
  chain.push(new THREE.Vector3(
   side*.65+i*.008,
   2.4-i*.055,
   .45
  ));
 }
 const curve=new THREE.CatmullRomCurve3(chain);
 marine.add(new THREE.Mesh(
  new THREE.TubeGeometry(curve,30,.025,6,false),metal
 ));
}

// Подставка
const base=new THREE.Mesh(
 new THREE.CylinderGeometry(1.35,1.45,.25,48),
 new THREE.MeshStandardMaterial({
  color:0x171b26,metalness:.7,roughness:.35
 })
);
base.position.y=-.12;
base.receiveShadow=true;
scene.add(base);

const ring=new THREE.Mesh(
 new THREE.TorusGeometry(1.32,.035,12,64),
 gold
);
ring.rotation.x=Math.PI/2;
ring.position.y=.02;
scene.add(ring);

// Надпись на подставке не нужна.
// Освещение сцены
const blueLight=new THREE.PointLight(0x1755ff,35,12);
blueLight.position.set(-4,4,-3);
scene.add(blueLight);

const redLight=new THREE.PointLight(0x9d1010,15,8);
redLight.position.set(4,3,4);
scene.add(redLight);

// Пол
const floor=new THREE.Mesh(
 new THREE.PlaneGeometry(200,200),
 new THREE.MeshStandardMaterial({
  color:0x090c14,roughness:.85
 })
);
floor.rotation.x=-Math.PI/2;
floor.position.y=-.27;
floor.receiveShadow=true;
scene.add(floor);

// Камера и вращение
function animate(){
 requestAnimationFrame(animate);
 controls.update();
 renderer.render(scene,camera);
}
animate();

window.addEventListener('resize',()=>{
 camera.aspect=innerWidth/innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize(innerWidth,innerHeight);
});
</script>
</body>
</html>