Playing around with making a hexagon grid on a Icosahedron

index.js 1.6KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import * as THREE from "three";
  2. var OrbitControls = require("three-orbit-controls")(THREE);
  3. const scene = new THREE.Scene();
  4. var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
  5. var geometry = new THREE.IcosahedronBufferGeometry(5, 7);
  6. var position = geometry.getAttribute("position");
  7. var colors = [];
  8. var color = new THREE.Color(Math.random(), Math.random(), Math.random());
  9. for (var i = 0; i < position.count / 3; i += 1) {
  10. color.setRGB(i / (position.count / 3), i / (position.count / 3), i / (position.count / 3));
  11. colors.push(color.r, color.g, color.b);
  12. colors.push(color.r, color.g, color.b);
  13. colors.push(color.r, color.g, color.b);
  14. }
  15. function disposeArray() {
  16. this.array = null;
  17. }
  18. geometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3).onUpload(disposeArray));
  19. var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors });
  20. var sphere = new THREE.Mesh(geometry, material);
  21. scene.add(sphere);
  22. var controls = new OrbitControls(camera);
  23. camera.position.z = 15;
  24. controls.update()
  25. var renderer = new THREE.WebGLRenderer();
  26. renderer.setSize( window.innerWidth, window.innerHeight );
  27. document.body.appendChild( renderer.domElement );
  28. window.addEventListener('resize', onWindowResize, false);
  29. function onWindowResize() {
  30. camera.aspect = window.innerWidth / window.innerHeight;
  31. camera.updateProjectionMatrix();
  32. controls.update();
  33. renderer.setSize(window.innerWidth, window.innerHeight);
  34. }
  35. function animate() {
  36. renderer.render(scene, camera);
  37. requestAnimationFrame(animate);
  38. }
  39. animate();