JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/utils/BufferGeometryUtils.js"></script>
JavaScript
/* eslint-disable */
function SolarSystem() {
this.params = {
width: window.innerWidth,
height: window.innerHeight,
boidsAmount: {
kum: 4000,
vk: 0,
gwk: 0,
is: 0,
},
boidsColor: new THREE.Color("rgb(200, 200, 200)"),
boidsWidth: 1,
boidsLengthScale: 1,
wireframe: false,
addSun: false,
};
this.boids = [];
this.init();
this.addSun();
}
SolarSystem.prototype.init = function () {
this.setupRender();
this.setupLights();
this.setupControls();
this.setupStats();
this.render();
}
SolarSystem.prototype.start = function () {
this.addStudent(this.params.boidsAmount.kum, this.params.boidsAmount.vk, this.params.boidsAmount.gwk, this.params.boidsAmount.is);
const geometries = [];
for ( const boid of this.boids ) {
const mesh = boid.obj.mesh;
mesh.updateMatrix();
geometries.push( mesh.geometry.clone().applyMatrix( mesh.matrix ) );
}
const geometry = THREE.BufferGeometryUtils.mergeBufferGeometries( geometries );
const material = new THREE.MeshStandardMaterial({ color: this.params.boidsColor, metalness: 0, roughness: 1 });
const mergedMesh = new THREE.Mesh( geometry, material );
this.scene.add( mergedMesh );
}
SolarSystem.prototype.setupRender = function () {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(20, this.params.width / this.params.height, 0.1, 10000);
this.camera.position.set(0, 400, 1200);
this.camera.lookAt(this.scene.position);
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(this.params.width, this.params.height);
document.body.appendChild(this.renderer.domElement);
window.addEventListener('resize', this.resize.bind(this), false);
}
SolarSystem.prototype.resize = function () {
this.params.width = window.innerWidth;
this.params.height = window.innerHeight;
let W = this.params.width;
let H = this.params.height;
this.camera.aspect = W /...