Creating instances in object-oriented programming with Javascript

Currently working on a project using JavaScript OOP and Observer pattern. In the initial method, the model g is inserted into the mesh, which is then placed inside the scene. This allows us to locate our model g within scene.children. However, in the second method, although we can find our model g in intersected[i].object, any modifications made to intersected[i].object do not reflect back to the model g.


g = new GeometryModel();
tjsv = new ThreeJSView(document.getElementById('maincanvas'), g);


GeometryModel.prototype.populateScene = function(scene) {
var i;
for (i = 0; i < this.geometries.length; i++) {
 var g = this.geometries[i];//<-----  g is the model
 var material = new THREE.MeshBasicMaterial( { color: g.color, transparent: g.transparent, opacity: g.opacity });

 var mesh = new THREE.Mesh(g, material);
 this.addLabels(g, mesh);
 scene.add(mesh);

 if (g.lineWidth > 0) {
      var egh = new THREE.EdgesHelper( mesh, g.lineColor );
      egh.material.linewidth = g.lineWidth;
      scene.add( egh );
   }
  }
}

ThreeJSView.prototype.selectByRaycaster = function(x, y){
var i;
var intersected;
var mouse = {x: (x / this.width) * 2 - 1, y: 1 - (y / this.height) * 2};
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, this.camera);
intersected = raycaster.intersectObjects(this.scene.children);
console.log();

for ( var i = 0; i < intersected.length; i++ ) {

      if (intersected[i].object instanceof THREE.Mesh){

          intersected[i].object.selected = true;// I modify my model 
          changed = true;
          console.log( intersected[i].object);
      }
}

  console.log(this.model);//my model but here there are no modify!


 if (changed)
   this.model.notifyListeners(); 
  }

Answer №1

My interpretation is that 'g' represents geometry, while intersected[i].object refers to an Object3D - distinct entities.

To resolve this issue, you may consider implementing the following code snippet: intersected[i].object.geometry.selected = true;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Website search bar - easily find what you're looking for

I've tested this code and it works well on the basintap page. However, I'm interested to find out how I can search for something when I'm on a different page instead? <?php $query = $_GET['query']; $min_length = 2; if(strlen($ ...

Retrieve the unfinished user input from React's Material UI Autocomplete

I've implemented Material UI's Autocomplete input with react-hook-form as shown below: import React from "react"; import {Controller} from "react-hook-form"; import {Autocomplete} from "@mui/material"; export const ...

Display the entire HTML webpage along with the embedded PDF file within an iframe

I have been tasked with embedding a relatively small PDF file within an HTML page and printing the entire page, including the PDF file inside an iframe. Below is the structure of my HTML page: https://i.stack.imgur.com/1kJZn.png Here is the code I am usin ...

Node.js and Express encountering issues when uploading an image

When testing examples of Express, I encountered an issue with this particular code snippet. Attempting to run the code below (sourced from a website) results in an error when attempting to upload an image: TypeError: Cannot read property 'file' ...

Discontinuing the mobx autorun feature upon componentWillUnmount

In my componentDidMount, I have the following autorun function: componentDidMount() { this.autoUpdate = autorun(() => { this.setState({ rows: generateRows(this.props.data) }) }) } Unfortunate ...

How can I prevent prettier from automatically inserting {" "} in jsx code?

I'm facing an issue with prettier's code formatting. When I save the code, it adds unwanted {" "} to certain sections of the jsx code like shown below: https://i.sstatic.net/AUKFU.png I've tried looking for a solution to fix this ...

Use JSON data to populate a dynamic bar chart in Highcharts

As a beginner in parsing JSON objects to highcharts, I am trying to create a basic bar graph. I have managed to set up the title of the graph, but I am having trouble displaying the series that I want to show (count as series and qpAnswer as xAxis). Below ...

eliminating the hues beneath the lines on Morris region charts

I'm seeking advice on how to remove colors below the lines in Morris area charts. Any ideas? Here's the code snippet I've been using: Morris.Area({ element: 'area-example', data: [ { y: '2006', a: 100, b: 90 }, ...

How can I make a div element match the height of an image and overflow without relying on

Here is the code that I am currently working with: https://codepen.io/allen-houng/pen/ExYKYdq Additionally, you can find a gist of the code snippet below: <div class="parent"> <div class="imageWrapper"> <img class="image" src="imageurl" ...

Attempting to execute an onclick event by clicking on a link is not functioning properly

Hello there, I created an HTML link <a href="javascript:void(0);" onClick="next(1)" id="next"></a> When I click on it, nothing happens. Using href="#" doesn't work either. Strangely, if I call next(1) in the console, it works. ...

I'm having trouble with this jQuery script - it doesn't seem to be functioning properly. I can't seem to spot any

Just getting my feet wet with jQuery. I'm trying to make a simple button fade slightly, but it's not working for some reason. My goal is to have the button fade in slowly. $(document).ready(function(){ $('button').mouseenter({ $(&ap ...

Enhancing NodeJS performance when manipulating arrays

I'm seeking a way to retrieve a user's chat history with other users from a separate collection in NodeJS and MongoDB. I have concerns about the potential performance impact of running the code below due to the nature of NodeJS. While I could d ...

Tips for implementing real-time filtering using React Native Realm technology

As I transition to Realm for React Native, I am eager to take advantage of their built-in queries and filtering capabilities. Currently, I have checkbox filters with three options, and the selected options are stored in an array: var filters = ['comp ...

Utilizing texture mapping to manipulate pixel colors within a THREE.Points mesh

As I navigate my way through the world of Three.js, I am experimenting with using a Texture map to dictate pixel colors in a THREE.Points mesh. My goal is for each vertex to be colored based on the corresponding image pixel coordinates. Despite several at ...

I created a custom JavaScript code to animate a cat emoji on a canvas:

An interactive script was designed to move a cat on canvas using HTML input buttons. When clicked, the cat moves 10 pixels in the specified direction (moveUp(); moveDown(); moveLeft(); moveRight();). The script initially works well for the first few clicks ...

JavaScript and HTML - specify the location in the html document where the JavaScript script will be displayed

I'm a beginner when it comes to JavaScript. I am trying to make sure that my HTML page remains unchanged while JavaScript text is displayed in a specific location without refreshing the entire page. To trigger a JavaScript function via a button on a ...

Mysterious object obstructing my ability to press the button

Deciphering the code reveals a series of actions: Accessing a URL with the initial date Closing the "Understanding origins" pop-up window by clicking on SKIP Clicking on the "Download data" button Opening a new tab with the subsequent date Closing the pre ...

Ways to ensure that an HTML form remains filled out even after completing the field, but prior to hitting submit

Scenario: I have found that filling out a form on paper with a pen helps individuals focus more on what they are writing. I am curious if there is a method to replicate this in an HTML form. Desired Interaction: I envision a scenario where a person select ...

Storing information in MongoDB using NodeJS and Webix

This is my debut post on Stack Overflow, seeking assistance as I am willing to contribute help if needed. Currently, I am working on building my own database with a user-friendly interface for Adding/Editing/Removing values in my datatable. While I can su ...

Creating a structure within a stencil web component

In my current project, I am utilizing Stencil.js (typescript) and need to integrate this selectbox. Below is the code snippet: import { Component, h, JSX, Prop, Element } from '@stencil/core'; import Selectr from 'mobius1-selectr'; @ ...