Texture spanning two sides

Currently tackling the challenge of creating a diamond shape with a unique texture. After successfully creating the desired geometry, I'm encountering difficulty in applying a texture to the diamond.

The texture seems to be splitting on the face without clear reasoning behind it. As a relative newcomer to three.js, any guidance or suggestions would be greatly appreciated. Could someone pinpoint the cause of this issue and propose a resolution?

For reference, here's my jsfiddle link: https://jsfiddle.net/7fjLar4b/

geometry = new THREE.PlaneGeometry();
geometry.vertices = [
  new THREE.Vector3(1, 0, 0),
  new THREE.Vector3(2, 1, 0),
  new THREE.Vector3(1, 2, 0),
  new THREE.Vector3(0, 1, 0)
];
geometry.faces = [
  new THREE.Face3(1, 2, 3),
  new THREE.Face3(3, 0, 1)
];
texture = loader.load("https://i.imgur.com/am2LQon.jpg")

material = new THREE.MeshBasicMaterial({map: texture});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Answer №1

Sequence of points for the initial side

shape.sides = [
  new ShapeSide(2, 3, 1),
  new ShapeSide(3, 0, 1)
];

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

What is the best way to implement auto-saving functionality for multiple form fields in a React application?

Whenever I make changes to the first and second columns of an item in a text field, the onBlur event triggers an auto-save. This results in the entire row being reloaded due to the update caused by the first column's save. Is there a way to prevent t ...

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

Updating the image source URL dynamically inside a division within a script using JavaScript

I'm attempting to insert a dynamic URL within an img src tag. Below is my HTML and Script code. When a tab is clicked, a GET HTTP Method is called, which responds with an image URL. I want to use this image URL in the img src field. HTML Code ...

The command `grunt.option('force', true) isn't functioning properly

After reviewing the grunt.options documentation, my initial expectation was that I could initiate a Grunt task programmatically with the force option activated in this manner: var grunt = require('grunt'); grunt.option('force', true); ...

Developing a breakout-style game using three.js: finding the end of the game board

As I dive into learning Three.js by creating a game, I've encountered a challenge with outdated resources and the constantly changing library. Currently, I can move my paddle with my mouse and launch the ball on click, but I'm struggling to preve ...

Is there a way to make the text appear on top of the overlay within this bootstrap carousel?

Currently, I am working on a project and I am interested in using a full-screen carousel. I came across this carousel snippet: . I am using the latest Bootstrap 3 version (3.3.7), but the snippet was originally built for version 3.2.0. If you try changing ...

Transform the appearance of buttons within AppBar using Material UI React

Embarking on a new project using React and Node JS has led me into the battle with Material UI. My current challenge is customizing the style of AppBar items, particularly the Buttons. Here's what I have in my "Menu" component: const Menu = () => ...

Data binding in Vue.js seems to be malfunctioning

I'm having trouble with my Vue component creation. I've been using v-show to hide certain elements, but it doesn't seem to be working as intended. The goal is to hide an element when clicked from a list by setting element.visible to false i ...

Discrepancy in post results

I am currently working on integrating two scripts - a Prestashop DHL label creator and our company's internal sales application. The goal is to streamline the process of generating DHL labels directly from our sales application without the need to acc ...

`Optimizing Performance using jQuery Functions and AJAX`

As someone exploring ajax for the first time, I'm eager to learn how to write jQuery code that ensures my simple functions like slideshows and overlays still work smoothly when a page is loaded via ajax. Currently, I am implementing the following met ...

onclick doesn't run the function

I have been encountering an issue with my HTML code that is supposed to clear web storage data upon clicking the "Clear Storage" button. Despite using this code snippet, the function to clear the storage does not seem to be triggering in Chrome and Firefo ...

Enhancing your scene with new objects using three.js

Exploring the possibilities with three.js, I am working with two shapes: "squares" and a "sphere". Each shape has an associated button. When the user clicks a button, the corresponding shape is added to the scene. However, there can only be one square and ...

Dealing with universal Ajax error handling in AngularJS

Previously on my website when it was 100% jQuery, I employed this method: $.ajaxSetup({ global: true, error: function(xhr, status, err) { if (xhr.status == 401) { window.location = "./index.html"; } } }); to establi ...

Using Javascript to restore image to its original state in OpenCart 2.3

I recently created a JavaScript function that successfully replaces the main image on a product page with a different image when clicked. While this feature is functioning perfectly, I am struggling to make the original image return once the mouse leaves t ...

Tips for circumventing the ajax data size restriction in asp.net mvc3

Currently, I am implementing an auto suggest function using AJAX in the following manner: $("#empName2").autocomplete({ search: function (event, ui) { var key = CheckBrowser(event); if (key == 13) return tr ...

Can a cube environment map be rotated 180 degrees along the Y axis?

I am trying to rotate a cube map around the Y axis by 180 degrees. scene = new THREE.Scene(); scene.background = new THREE.CubeTextureLoader() .setPath( '/path/to/my/docs/' ) ...

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct ch ...

Angular.js provides a solution for parsing a unique structure of JSON array containing objects

How can an angular for each loop be used to handle the json array of objects provided in the formatted data below? The key represents the id and the value represents the title. Any suggestions on how to accomplish this task? Thank you. mycode me.record ...

Troubleshoot: jQuery Datalink functionality not functioning properly with object methods

Within my JavaScript code, I have defined an object that includes various properties and an instance method that calculates a value based on two of those properties. To synchronize the object's property values with form elements in the UI, I am utili ...

developing a cheat prevention system for an internet-based multiplayer game

I am facing an issue with my website that includes a simple game and a basic scoreboard feature using express. Whenever a player dies in the game, their score is sent to the server via a post request and added to the leaderboard. The problem I'm encou ...