MultiMaterial with Custom Geometry

by jmcjc5u

HTML

<div id="info">Multi-material with Custom Geometry
</div>

CSS

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

body {
  overflow: hidden;
}

JavaScript

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

var camera, scene, renderer, mesh;
var light, angle = 0;

init();
animate();

function buildModel() {

	let points = [];
  points.push(
    new THREE.Vector3(-5, 0, 3),  new THREE.Vector3(5, 0, 3),
    new THREE.Vector3(5, 0, -3),  new THREE.Vector3(-5, 0, -3),
    new THREE.Vector3(5, 10, 0),  new THREE.Vector3(-5, 10, 0)
  );

  var geometry = new THREE.BufferGeometry().setFromPoints(points);
	let indices = [];
  indices.push (0,1,5, 1,4,5, 3,5,4, 2,3,4);
  indices.push (0,3,1, 1,3,2, 1,2,4, 0,5,3);
  geometry.setIndex (indices);

	// separate triangles of different materialIndex into Groups
	geometry.addGroup (0, 6, 0);
  geometry.addGroup (6, 6, 1);
  geometry.addGroup (12, 6, 3);
  geometry.addGroup (18, 6, 2);

  var materialArray = [
    new THREE.MeshPhongMaterial({
      color: 0x009900
    }),
    new THREE.MeshPhongMaterial({
      color: 0x880088
    }),
		new THREE.MeshPhongMaterial({
      color: 0x009999
    }),
    new THREE.MeshPhongMaterial({
      color: 0xFFFF00
    })
  ];

  //geometry.computeBoundingSphere();
  //geometry.computeFaceNormals();
  geometry.computeVertexNormals();

  let cube = new THREE.Mesh(geometry, materialArray);
  return cube;

}

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 50;
  scene.add(camera);

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

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

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

  document.body.appendChild(renderer.domElement);
  ////////////////////////////////////////////////////////////////////////
  mesh = buildModel();
 ...