Блог

 import * as THREE from "../node_modules/three/build/three.module.js"; import { TrackballControls } from '../node_modules/three/examples/jsm/controls/TrackballControls.js';   const scene = new THREE.Scene();   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.6, 1200); camera.position.z = 10;   const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor("#233143"); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement);   window.addEventListener('resize', () =gt; {  renderer.setSize(window.innerWidth, window.innerHeight);  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix(); })    const boxGeometry = new THREE.BoxGeometry(2,2,2); const boxMaterial = new THREE.MeshLambertMaterial({color: 0xFFFFFF}); const boxMesh = new THREE.Mesh(boxGeometry,boxMaterial); boxMesh.rotation.set(40,0,40); scene.add(boxMesh);  const light = new THREE.PointLight(0xFFFFFF,1,100); light.position.set(5,5,5); scene.add(light);  // Lights const lights = []; const lightValues = [  {colour: 0x14D14A, intensity: 8, dist: 12, x: 1, y: 0, z: 8},  {colour: 0xBE61CF, intensity: 6, dist: 12, x: -2, y: 1, z: -10},  {colour: 0x00FFFF, intensity: 3, dist: 10, x: 0, y: 10, z: 1},  {colour: 0x00FF00, intensity: 6, dist: 12, x: 0, y: -10, z: -1},  {colour: 0x16A7F5, intensity: 6, dist: 12, x: 10, y: 3, z: 0},  {colour: 0x90F615, intensity: 6, dist: 12, x: -10, y: -1, z: 0} ]; for (let i=0; ilt;6; i  ) {  lights[i] = new THREE.PointLight(  lightValues[i]['colour'],  lightValues[i]['intensity'],  lightValues[i]['dist']);  lights[i].position.set(  lightValues[i]['x'],  lightValues[i]['y'],  lightValues[i]['z']);  scene.add(lights[i]); }    const rendering = function() {  requestAnimationFrame(rendering);  controls.update();  // Constantly rotate box  scene.rotation.z -= 0.005;  scene.rotation.x -= 0.01;   renderer.render(scene, camera);  }   rendering();