Three.js objects failing to render - Failed to execute ‘uniform3fv’ on ‘WebGL2RenderingContext’: Overload resolution failed

Questions
1

I am currently using a vite app to work with Three.js using npm. I am still very new to NPM and Three.js, so I hope that made sense. I am using a local host on my PC on port 3000 to run this project.

I am trying to turn a 3d matrix into a cube of cubes (think rubix cube) using Three.js

{
    "start": [0,0,1],
    "end": [0,1,1],
    "matrix3d": [
        [
            ["█","X"],
            [" ","X"]
        ],
        [
            ["█"," "],
            [" "," "]
        ]
    ],
    "count": 2
}

Each element in the 3d matrix should be a cube on the screen, with their position being their index in the 3d matrix (z,y,x). Each elements color should be changed based on what string it is.

I created some code to try and do this:

import * as THREE from 'https://unpkg.com/three@v0.126.1/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@v0.126.1/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'
const gui = new dat.GUI()

let mazeObject = {
  "start": [0,0,0],
  "end": [0,1,0],
  "matrix3d": [
    [
      ["X"," "],
      ["X", " "]
    ],
    [
      ["█"," "],
      [ " "," "]
    ]
  ],
  "count": 2
}

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight)
renderer.setPixelRatio()
document.body.appendChild(renderer.domElement)
new OrbitControls(camera, renderer.domElement)
camera.position.z = 5;

// enviorment set up
function genLight(x, y, z) {
  const light = new THREE.DirectionalLight(0xFFFFFF, 1);
  light.position.set(x, y, z);
  scene.add(light)
}
genLight(0, 0, 10)
genLight(0, 0, -10)
genLight(0, 10, 0)
genLight(0, -10, 0)
genLight(10, 0, 0)
genLight(-10, 0, 0)

function compare2D(arr1, arr2) {
  if (arr1.length != arr2.length) {
    return false;
  }
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] != arr2[i]) {
      return false;
    }
  }
  return true;
}
// object deconstruction
const { matrix3d } = mazeObject
console.log(matrix3d)

// loop through the matrix
for (let j = 0; j < matrix3d.length; j++) {
  for (let k = 0; k < matrix3d[j].length; k++) {
    for (let m = 0; m < matrix3d[j][k].length; m++) {
      let type = matrix3d[j][k][m]
      const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
      // const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xFFF111})
      const cubeMaterial = new THREE.MeshPhongMaterial({ side: THREE.DoubleSide, flatShading: THREE.FlatShading })
// determine the color of the cube based on the element value
      if (type == " ") {
        cubeMaterial.transparent = true;
        cubeMaterial.opacity = 0.5;
        cubeMaterial.color = 0xE3E3E3;
      } else if (type == "X" && compare2D(mazeObject.start, [j, k, m])) {
        cubeMaterial.color = 0x4287F5;
      } else if (type == "X" && compare2D(mazeObject.end, [j, k, m])) {
        cubeMaterial.color = 0x42F54E;
      } else if (type == "X") {
        cubeMaterial.color = 0xE61E1E;
      } else if (type == "█") {
        cubeMaterial.color = 0xD98232;
      }
      const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
      cubeMesh.position.set(j, k, m)
      console.log(cubeMesh, type)
      scene.add(cubeMesh)
    }
  }
}
console.log(scene)
renderer.render(scene, camera) // error comes from here

The issue is that I receive a overload resolution fail error.

All of the meshes exist, but the scene is failing to render.

If I remove all of the if statements and add a default color to MeshPhongMaterial, it works.

2

Hi!

try to set cube’s color this way: cubeMaterial.color.set(0xe3e3e3)

4 Likes
3

/cc

4

I asked it on Stackoverflow, but my original post was too complex. I had to edit it down to a sample version, such as seen in the post, but people had already skipped over it.