custom geometry

by jmcjc5u

HTML

<div id="info">
  custom geometry
</div>

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	  position: absolute;
	}

	#info {
	  position: absolute;
	  top: 0px;
	  width: 100%;
	  padding: 5px;
	  text-align: center;
	  color: #ffff00
	}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

var scene, renderer, camera;

init();
animate();

function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x888888);

  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
  camera.position.y = 20;
  camera.position.z = 50;

  let controls = new OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  var pointLight = new THREE.PointLight(0xffffff);
  pointLight.position.set(0, 300, 200);
  scene.add(pointLight);

  var ambientLight = new THREE.AmbientLight(0x111111);
  scene.add(ambientLight);

  window.addEventListener('resize', onWindowResize, false);

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

  //////////////////////////////////////////////////////////
  var geometry = new THREE.BufferGeometry();

  var indices = [];
  var vertices = [];
	var uvs = [];
  
  vertices.push(-5,0,3, 5,0,3, 5,0,-3, -5,0,-3, 5,10,0, -5,10,0, 5,10,0, -5,10,0);
  indices.push(0, 1, 5, 1, 4, 5, 3, 7, 6, 2, 3, 6, 0, 3, 1, 1, 3, 2, 1, 2, 4, 0, 5, 3);
	uvs.push (0,0, 1,0, 0,0, 1,0, 1,1, 0,1, 0,1, 1,1);
  
	geometry.setIndex(indices);
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
	geometry.addGroup (0, 6, 0);
  geometry.addGroup (6, 6, 1);
  geometry.addGroup (12, 6, 2);
  geometry.addGroup (18, 6, 3);
  geometry.computeVertexNormals();
	
  //
  
  var...