Uncaught TypeError: material.onBuild is not a function

[peresogol]

Hi there. I hope I am not opening an issue for a mistake that I've made, but I am trying to make this little code works for many hours, and I still got an error when opening the index.js file in a web browser (after starting node). However, I would like to point out that many errors disappeared while switching from Firefox to Chrome.

The only mistake that appears in Chrome is shown on the picture below. The error is triggered by the line :

  renderer.render(scene, camera);

which is the last line of index.js.

Even if it looks more related to three.js than three.mesh.ui, the error only show when using your repo (which is an incredible work ! :) ). If you could be of any help, I would really appreciate it !

[felixmariotto]

Hi ! Mh that's weird, I tried to run this app again and I can't reproduce this error. Are you following the instructions in the README ? Did you only try to run the app as it is, or did you write code ?

[peresogol]

Hi ! Thanks for answering so quickly :) I rewrote the code, following the instruction in the README.

If I try with a minimal example, let say this code :

/* Import everything we need from Three.js */

import * as THREE from 'three';
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';

import ThreeMeshUI from 'three-mesh-ui';

/* Create the container object, the scene */

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x505050 );

/* Create the camera from which the scene will be seen */

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 1.6, 0 );
camera.lookAt( 0, 1, -1.8 );

/* Create the renderer object, with VR parameters enabled */

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));
document.body.appendChild( renderer.domElement );

/* Create basic room mesh, and add it to the scene */

const room = new THREE.LineSegments(
    new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
    new THREE.LineBasicMaterial( { color: 0x808080 } )
);

scene.add( room );

/* Render loop (called ~60 times/second, or more in VR) */

const container = new ThreeMeshUI.Block({
    height: 1.5,
    width: 1
});

container.position.set( 0, 1, -1.8 );
container.rotation.x = -0.55;
scene.add( container );

renderer.setAnimationLoop( loop );

function loop() {
    ThreeMeshUI.update();
    renderer.render( scene, camera );       // Here is the line 52
};

I have a similar error, which is shown on the screenshot below :

I have imported three.js and three-mesh-ui using npm.

[felixmariotto]

Again I can't reproduce, the code you wrote is alright... And I get no error. Could you paste here the content of your package.json ?

[felixmariotto]

I rewrote the code, following the instruction in the README.

Was this error thrown before you wrote any code ?

[peresogol]

The error is thrown at the moment I add these lines :

const container = new ThreeMeshUI.Block({
    height: 1.5,
    width: 1
});

container.position.set( 0, 1, -1.8 );
container.rotation.x = -0.55;
scene.add( container );

to the index.js files, contains in this git repo. If I run the code without these lines, it works (I mean I can see a grey room with grid). Edit : I can also see the scene with these lines, but the error is thrown and I can't see the container on the scene.

Here is my package.json file :

{
  "name": "minimal_vr",
  "version": "0.0.0",
  "description": "minimal three.js VR app",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --env.NODE_ENV=dev",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --config webpack.config.js --env.NODE_ENV=prod"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "three": "^0.128.0",
    "three-mesh-ui": "^4.6.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.2"
  }
}

Again, thanks for taking the time to help. I really appreciate !

[felixmariotto]

There is indeed a bug introduced by the three.js r127 => r128 migration. I'm investigating at the moment, I keep you updated. In the meantime you can use three-mesh-ui with three.js r127

[peresogol]

Effectively, downgrading to r127 make it works :) I am quite new to node js, I didn't thought to check the version you are using. Thanks for your help !

[felixmariotto]

It looks like there was a lot of changes in three.js r128 related to modules and classes, so the problem was probably due to bundling, I'm not sure why.

Anyway I updated three.js version to 0.128.0 in three-mesh-ui dependencies, and everything works fine. Feel free to reopen if you face any other issue.

[felixmariotto]

I also updated this boilerplate's dependencies, it must now use three.js 0.128.0 and three-mesh-ui 4.6.1