Exploring Molecular Structures with ThreeJS - Understanding the Mechanics of Double Bonds

Currently working with threejs and experimenting with the example found in this link:

The challenge I'm facing is related to creating double bonds between grey and red spheres in the example. While I came across some resources suggesting ways to achieve this, it appears that threejs does not directly support it. The following link illustrates what I am referring to:

In the provided page, you can see how the fumerate molecule (in a text file) is structured. Any suggestions on incorporating a double bond either visually or by modifying the line's class to adjust its size or color would be greatly appreciated.

javascriptcssthree.js

Answer №1

Within the loadMolecule function, there is a specific section that involves a loader.load function. The snippet below showcases this part, which can be utilized to introduce a second bond adjacent to the first one. By adjusting the start and end positions with a certain vector amount, another bond can be drawn.

for ( let i = 0; i < geometryBonds.vertices.length; i += 2 ) {

  const start = geometryBonds.vertices[ i ];
  const end = geometryBonds.vertices[ i + 1 ];

  start.multiplyScalar( 75 );
  end.multiplyScalar( 75 );

  tmpVec1.subVectors( end, start );
  const bondLength = tmpVec1.length() - 50;

}

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

Validating properties of a class using Typescript's Class-Validator

I tried using the class-validator decorator library for validation processes on my sample project. However, it doesn't seem to be working as expected. The sample project aims to create projects based on user inputs, and I'm attempting to validate ...

javascripttypescriptclass-validatortypescript-decorator

The functionality of a button within an AngularJS directive is not functioning as intended

I am trying to use a directive twice on one page. Inside the directive, there is a button that should toggle between showing the two directives when clicked. However, I'm encountering an issue where the values are not changing even though the ng-click ...

javascripthtmlangularjsangular2-directives

Navigate to the recently added entry using Router.push in your NextJS/Supabase project, leading to no return value

In the process of developing an application that allows users to register shipments between different locations, I encountered a roadblock. Once a user creates a new shipment and saves it, they should be able to add goods to it. However, despite my efforts ...

javascriptnext.jssupabase

What is the process of integrating data retrieved from an SQL query into a Pug template using Express and MySQL?

Currently, I am in the process of developing a basic web application that will initially show a list of bus route numbers and names upon landing on the page. My tech stack includes MySQL integrated with Express and Pug. Below is the server-side code snippe ...

javascriptmysqlexpresspug

Bidirectional data binding in AngularJS for <option> elements generated from an AJAX request

I have built a Controller called WebsiteController with the following functionality: JApp.controller('WebsiteController', function($scope, $resource) { var UsersService = $resource('/auth/users', {}); $scope.adding = false; ...

javascriptjqueryajaxangularjs

Incorporate Data into Table Rows inside the Material-UI Accordion

I am tasked with creating a table filled with two mock data accordions and one accordion containing database data using ReactJS in Material-UI. I have successfully implemented an accordion with the table data, but I am struggling to display only the table ...

javascriptreactjsmaterial-ui

Auto adjusting textarea height as per content length

Is there a way to adjust the height of the text area based on the content entered by the user? I want it to automatically increase as the user types and decrease if they delete content. ...

jqueryhtmlcss

Retrieve the URI data from the response object using Axios

Currently, I'm in the process of transitioning a node project from utilizing request.js to incorporating axios.js While using the request package, extracting URI data from the response object can be achieved like so: request(req, (err, response) =&g ...

javascriptnode.jsrequestaxios

When a function inside React uses this.props, it won't trigger the corresponding function

I am currently developing a Checklist using React and MaterialUI that consists of two components. One component is responsible for managing the data, while the other component allows for editing the data. However, I have encountered an issue where the func ...

javascriptreactjsreact-routermaterial-ui

Discover the steps to retrieve a fresh array in PHP after utilizing sortable.js

Hi there! I am currently utilizing the sortable javascript feature found on Although the script is working perfectly fine for me, being a non-expert in javascript poses a challenge when it comes to generating the necessary code to retrieve an array in php ...

javascriptphpjqueryjquery-ui-sortable

In JavaScript, the task involves filtering through multiple arrays of objects to calculate the average value based on the contract number

Every object in the Array contains a contractNumber, but with repeated values. I am attempting to determine the average value of each unique contractNumber. var vendorArr=[{ "contractNumber":5258, "monthId":0, "value":2}, { ...

javascriptjquery

The requested URL cannot be loaded due to the Access-Control-Allow-Methods in the preflight response not allowing the PUT method

When making an Ajax request using AngularJS, I encountered a problem with the $http method. It works well with both get and post requests, but throws an error with put. Response Header : Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type ...

javascriptangularjsajax

Unable to access information through ajax when connecting to mysql database

Having a code that can add, edit, delete and view is good. When all the codes are put together in one file, it works fine. However, wanting to have it separately poses a problem with the "View" part. Despite trying to search for a solution, the functionali ...

javascriptphpmysqlajax

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Upon loading the page, my JavaScript function creates a tree structure from JSON data and generates a list of anchor tags which look like this: <a ng-click="shareParent(4619)">Some data</a> Despite associating the ng-click directive with the ...

javascripthtmlangularjs

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

On both desktop and mobile screen sizes, I have a white navigation bar. However, for the mobile dropdown menu, I want the background to be grey. I managed to achieve this by targeting .show on smaller screens in the CSS and specifying the grey background ...

javascriptcssbootstrap-4nav

Utilize a jQuery plugin within an AngularJS function

I am using the jQuery plugin select2 and I need to call the select2 function in AngularJS. Although I am aware that I can utilize angular-ui/ui-select, the page design specifically requires the jQuery plugin select2. My goal is to update the value in the ...

javascriptjqueryangularjsangularjs-directivejquery-select2

Learning to make a GET request from a Node application to an external API

I am currently attempting to make a GET request to an API. Below is the code I have in Angular: Service: angular.module('MyApp') .factory('Search', function($resource) { return $resource('/api/show/:search'); }); C ...

javascriptangularjsnode.js

What is the easiest way to access an array using its name?

I have 2 arrays like this: var windows_array = []; var google_array = []; I am looking to access a specified array in a function by passing the network as a parameter. function add_friends(network, friend){ (network + '_array').push(friend ...

javascriptjqueryarrays

Is there a way for me to determine fresh analogous color gradients by utilizing a color ramp that has been specified with a trio of RGB values?

If a specific color set consisting of 3 colors is provided, how can a new set of two colors be generated while maintaining the same ratios? For instance, a visually appealing blue gradient is as follows: rgb(172, 228, 248) - Initial Color rgb(108, 205, ...

cssmathcolorsgradientbackground-color

Remove the lesser of two duplicate items from the list by comparing their count keys

Here is a challenge I encountered with a grocery list that required filtering out duplicates and only keeping the duplicate with the higher count, while also retaining non-duplicate items. I managed to achieve this through trial and error programming, bu ...

javascriptarraysfilter