How to fix “Uncaught ReferenceError: MouseInteract is not defined”?

When I try to merge multiple meshes, I cannot succeed to merge the materials of these meshes.

When I try to merge multiple meshes, I cannot succeed to merge the materials of these meshes.

When I replace

let mesh = new THREE.Mesh(singleGeometry, materialArr);

by

let mesh = new THREE.Mesh(singleGeometry, new THREE.MeshPhongMaterial());

I get no error at all.

updateWorld() {
    let singleGeometry = new THREE.Geometry();
    let materialArr = [];
this.game.worlds.getWorld(OverWorld).world.forEach((block, pos) => {
    // console.log(this.renderRegister);
    // console.log(pos);
    // console.log(block.constructor.name);

    let modelClass = this.renderRegister.getRender(block.constructor.name);
    // console.log(modelClass);
    let model = new modelClass();

    //for(let i=0; i<model.parts.length; i++) {
    model.parts.forEach((part, i) => {
        //let part = model.parts[i];

        part.mesh.position.x = pos.x;
        part.mesh.position.y = pos.y;
        part.mesh.position.z = pos.z;
        //this.scene.add(part.mesh);

        part.mesh.updateMatrix(); // as needed
        singleGeometry.merge(part.mesh.geometry, part.mesh.matrix, i);

        materialArr.push(part.mesh.material);
    });
});

let mesh = new THREE.Mesh(singleGeometry, materialArr);

mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();

this.scene.add(mesh);

}

I expect there to be no errors, but I get an error none the less.



Why my window resize event listener doesn't work? Using Three.js and Vuetify.js

I am putting a three.js renderer inside of a , using vuetify.js framework. What I would like my code to do is to change the div element dimensions whenever the window is resized.

I am putting a three.js renderer inside of a , using vuetify.js framework. What I would like my code to do is to change the div element dimensions whenever the window is resized.

This is part of my project and I omitted unnecessary code blocks, so don't mind the not used variables :)

<style scoped>
.map__three {
  position: absolute;
  bottom: 60px;
  left: 0px;
}
</style>

<template>
<div class="flex fill-height wrap">
<v-btn></v-btn>
<div id="map" class="flex fill-height wrap" v-on:dblclick="addNewPoi3d"></div>
</div>
</template>

<script>

export default {
name: 'ThreeTest',
data() {
return {
scene: null,
renderer: null,
camera: null,
mouse: null,
mousePosition: new THREE.Vector2(),
canvasPosition: null,
rayCaster: new THREE.Raycaster(),
mapWidth: null,
mapHeight: null,
mapDimensions: null
};
},

methods: {
init() {
let map = document.getElementById('map');
this.mapDimensions = map.getBoundingClientRect();
this.mapWidth = this.mapDimensions.width;
this.mapHeight = this.mapDimensions.height;
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color( 0xf0f0f0 );

  this.camera = new THREE.PerspectiveCamera(
    75,
    this.mapWidth/this.mapHeight,
    0.1,
    1000,
  );
  this.camera.position.z = 3;


  this.renderer = new THREE.WebGLRenderer();
  this.renderer.setSize(this.mapWidth, this.mapHeight);
  map.appendChild(this.renderer.domElement);



  // EVENT LISTENERS:
  window.addEventListener('resize', this.onWindowResize, false);
},


onWindowResize()  {
    this.camera.aspect = this.mapWidth / this.mapHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(this.mapWidth, this.mapHeight);
},



animate() {
  requestAnimationFrame(this.animate);
  this.render();
},
render() {
  this.renderer.render(this.scene, this.camera);
},

},

mounted() {
this.init();
this.animate();
}
};
</script>

EXPECTED: it should resize the dimensions of the scene and camera aspect ratio I've loaded in.

WHAT IT DOES: none of that :D It pertains the same size of the scene and camera.