Tips for loading Images from a different URL in Three.js

Hello all, I'm completely new to threejs and currently working on loading a texture to a cylinder from a different web directory. If anyone can offer some guidance on what might be incorrect in the following code snippet, that would be really helpful:

var geometry = new THREE.CylinderBufferGeometry( 17, 17, 30, 35 );
            var material = new THREE.MeshLambertMaterial();
            var cylinder = new THREE.Mesh( geometry, material );

            const myUrl = 'https://user-images.githubusercontent.com/29174429/84787863-87516080-afff-11ea-9dca-3ed8d32d7b41.jpg'

            const textureLoader = new THREE.TextureLoader()
            textureLoader.crossOrigin = "Anonymous"
            const myTexture = textureLoader.load(myUrl)

            cylinder.material.map(myTexture)

Your assistance is greatly appreciated.

javascripturlthree.jsconstantsvar

Answer №1

Assigning a texture to the material of a cylinder:

In order to correctly assign a texture to the material of a cylinder, you should use the following syntax:

cylinder.material.map = myTexture;

The property Material.map is used for assigning textures, not as a method. Additionally, it's worth mentioning that by default, the value of TextureLoader.crossOrigin is set to anonymous.

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

Troubleshooting Safari compatibility issues with Twitter Direct Messages in Angular

I am attempting to create a Twitter direct message with predetermined text already filled in. My current method involves using window.open() to prepare the message. window.open(https://twitter.com/messages/compose?text=${this.helloWorld}); helloWorld = ...

javascriptiosangular

What is the solution to deselecting all other options when selecting one in an <input type='radio'>?

As a newcomer to Vue/Nuxt, I'm currently facing an issue with a group of radio inputs that do not unselect when another option is chosen. After some investigation, it seems like the problem may lie within this specific code snippet below. My focus is ...

javascriptvue.jsnuxt.js

Instantly appearing and disappearing Bootstrap modal popup catches users off guard

I've encountered an issue with my bootstrap popup that displays student results - it opens and closes immediately. In my master page file, I have included the following JS files: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser ...

javascriptcssasp.nettwitter-bootstrapmodalpopup

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

javascriptjquerycssdrop-down-menu

Efficiently loading images with dominant color placeholders using lazy loading

Does anyone have tips on achieving the same effect as niice.co with lazy loading images? If you scroll through their website, you'll notice that before the image loads lazily, the background of the div where the image is placed matches the dominant c ...

javascriptjquery

How to include a date in an Angular date input field

I've simplified some logic in this JSFiddle: http://jsfiddle.net/r7vyjg4h/ and it's functioning correctly. The HTML code is as follows: <div ng-controller="MyCtrl"> <div ng-repeat="line in lines"> <div style="display: inline- ...

javascriptangularjshtmlinput

Arranging a group of objects in Angular2

I am facing challenges with organizing an array of objects in Angular2. The structure of the object is as follows: [ { "name": "t10", "ts": 1476778297100, "value": "32.339264", "xid": "DP_049908" }, { "name": "t17", "ts": 14 ...

javascriptarrayssortingangulartypescript

Using data binding in VueJS to construct a dynamic URL

Exploring VueJS for the first time and it's been a great experience so far. However, I'm facing a couple of challenges with data binding. The requirement is for the customer to input an image URL, and no image should be displayed until a valid ...

javascripthtmldata-bindingvue.jsvuejs2

Mocking a third-party callback function in Jest for method implementation

Utilizing Nest + Cognito for user authentication in an application, I have a method within my Authentication service that requires testing/mocking: async cognitoRegister(userPool: CognitoUserPool, { name, password, email }: AuthRegisterInput): ...

javascripttypescriptunit-testingjestjsnestjs

Updating matrix after cloning in Three.js: a guide for using with CSG ThreeBSP

Having an issue with scaling a cloned mesh immediately for programming purposes using CSG ThreeBSP. It seems that the cloned object's properties are not updating right away after scaling. Is there a function I should call to force the matrix or other ...

javascriptthree.jscsgthreecsg

Utilizing a Texture for Ambient Mapping

I am trying to incorporate a texture as an Ambient map in Three.JS but unsure of how to go about it. Below is the code snippet for my material: var shader : THREE.Shader = THREE.ShaderLib[ "normalmap" ]; var uniforms : THREE.Uniforms ...

three.js

Guide to smoothly transition the highlighted <tr> element to the top of the scroll bar

Is there a way to utilize jQuery for animating a selected row to the top of a div with a specific scrollbar style? #sc { border:1px solid black; width:450px; height:80px; overflow:scroll; } <div id="sc"> <table id=&quo ...

javascriptjquery

When the right div is empty, the left div's width increases to 100%

Is there a way to adjust the width of two div elements when floated left so that if the right div is empty, the left div automatically expands to 100% width? if ($('.wrap .box2').is(':empty')) { $('.box2').hide(); $(& ...

javascriptjquerycss

Extracting every single audience review from Rotten Tomatoes for a specific film

I am faced with the task of extracting all audience reviews for a specific movie from Rotten Tomatoes. The review pages display 20 reviews at a time and have a "LOAD MORE" button to load additional reviews in sets of 20. Here's an example: I currentl ...

pythonweb-scrapingurlrotten-tomatoes

JavaScript Alert function doesn't wait for execution

I am facing an issue with my Signup page. After submitting the form, I use AJAX POST to send the data. The problem arises in the success function where an alert is triggered immediately without waiting for user input, leading to the execution of the next f ...

javascriptjqueryajaxalert

What measures can be taken to block Javascript from retrieving PHP cookie information?

(Extracted from an interview) Identify the correct answers from the list below: Implement the httponly parameter when creating the cookie The user needs to disable Javascript support This setting is related to cookies in the browser Restrict access to t ...

phpjavascriptcookies

Are trailing commas or missing keys acceptable in JavaScript object notation?

I have created a code generator and I am contemplating whether or not to address the issue of the extra comma at the end. While Internet Explorer seems to ignore it, I want to ensure cross-browser compatibility and generate valid code. function init() { v ...

javascriptjson

Take out property that was placed in the "style" tag

One particular static HTML file that I have consists of the following code: <style> p { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } </style> <div id="wrapper"> <p>Insert text here ...

javascript

Expand the JSS style class rather than replacing it entirely

In my React application, I incorporate React JSS for managing styles. Let's consider the following two code snippets within my project (disregarding imports and other less relevant details). First of all, here is App.js: const styles = { root: { ...

javascriptreactjsjss

"Creating dynamic web apps with the powerful duo of Meteor and Zurb

Just starting out with programming and currently working on a new web application using Meteor and AngularJS. I would like to incorporate the elements/css from 'Zurb Foundation For Apps' into my project... I am familiar with including Bootstrap ...

javascriptcssangularjsmeteorzurb-foundation-apps