<p dir="auto">Trying to create a simple Cube with MutiMaterial and it keeps giving an error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'visible' of undefined"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'visible' of undefined
</code></pre></div>
<p dir="auto">I traced it back to line 22548</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if ( groupMaterial.visible === true ) {"><pre class="notranslate"><code class="notranslate">if ( groupMaterial.visible === true ) {
</code></pre></div>
<p dir="auto">Here is my code</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
$('body').append(renderer.domElement);

var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {

    console.log(item, loaded, total);

};

manager.onLoad = function() {
    render();
}

var skin;

var loader = new THREE.TextureLoader(manager);
loader.load('assets/sam.png', function(texture) {

    skin = texture;

    var mats = [];

    front_texture = skin.clone();
    front_texture.minFilter = THREE.LinearMipMapLinearFilter;
    front_texture.magFilter = THREE.NearestFilter;
    front_texture.offset.x = (1 / 64) * 8;
    front_texture.offset.y = (1 / 64) * 48;
    front_texture.repeat.x = (1 / 64) * 8;
    front_texture.repeat.y = (1 / 64) * 8;
    front_texture.needsUpdate = true;

    var front_material = new THREE.MeshBasicMaterial({
        map: front_texture
    });
    mats.push(front_material);

    var geometry = new THREE.BoxGeometry((1/16)*8, (1/16)*8, (1/16)*8);
    cube = new THREE.Mesh(geometry, new THREE.MultiMaterial(mats));
    scene.add(cube);

});

camera.position.z = 5;

var render = function() {
    window.requestAnimationFrame(render);

    renderer.render(scene, camera);
};"><pre class="notranslate"><code class="notranslate">var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
$('body').append(renderer.domElement);

var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {

    console.log(item, loaded, total);

};

manager.onLoad = function() {
    render();
}

var skin;

var loader = new THREE.TextureLoader(manager);
loader.load('assets/sam.png', function(texture) {

    skin = texture;

    var mats = [];

    front_texture = skin.clone();
    front_texture.minFilter = THREE.LinearMipMapLinearFilter;
    front_texture.magFilter = THREE.NearestFilter;
    front_texture.offset.x = (1 / 64) * 8;
    front_texture.offset.y = (1 / 64) * 48;
    front_texture.repeat.x = (1 / 64) * 8;
    front_texture.repeat.y = (1 / 64) * 8;
    front_texture.needsUpdate = true;

    var front_material = new THREE.MeshBasicMaterial({
        map: front_texture
    });
    mats.push(front_material);

    var geometry = new THREE.BoxGeometry((1/16)*8, (1/16)*8, (1/16)*8);
    cube = new THREE.Mesh(geometry, new THREE.MultiMaterial(mats));
    scene.add(cube);

});

camera.position.z = 5;

var render = function() {
    window.requestAnimationFrame(render);

    renderer.render(scene, camera);
};
</code></pre></div>
<p dir="auto">Was just wondering about this...</p>
<p dir="auto"><code class="notranslate">Mesh</code> seems to be confusing to some people as for them that's what what we call <code class="notranslate">Geometry</code>. Maybe <code class="notranslate">Object</code> could be a better name for it. However, <code class="notranslate">Object3D</code> would then be even more confusing. In such case, what could <code class="notranslate">Object3D</code> be renamed to?</p>
<ul dir="auto">
<li>Entity</li>
<li>Node</li>
<li>SceneNode</li>
<li>...</li>
</ul>