Trying to adjust this "Wave a flag" example

Hello everyone. i am trying to use this example but i am having a hard time to bypass the file selector method. I will need it to be a standard texture that i would load locally so i can use this flag on my project. Can anybody help with the code? Thanks in advance!

1 Like

In the Beginner Example in step 7, a fixed texture is loaded.

Note: function flagwaving( t )

(from the Collection of examples from discourse.threejs.org)

Thank you, i didn’t know about this example. I had some time to play around and i seem to have problem with the “t” variable brings error “Parameter ‘t’ implicitly has an ‘any’ type.”

EDIT: i fixed it by adding function flagwaving( t:any ) and now it works!!

Obviously you have to set variable types for your language variant, I don’t.

Is it TypeScript? TypeScript Simple Types

Then certainly number - whole numbers and floating point values

Thank you for your reply, there are a lot of things to learn and i am still learning of course! Based on the example there are 2 meshes:flagmesh and flagpoleMesh. I want to merge/group into one object so i can rotate/reposition correct. Is there any easy method based on this example with only those 2 objects?

See BufferGeometryUtils in the docs:
three.js docs

Examples from the collection:

ArtOfLathe
LineSegmentsCircle


perhaps a group? three.js docs

If you need a texture that you can add locally, you can use textures from three.js/examples/textures.
For example, you can use:

https://threejs.org/examples/textures/roughness_map.jpg

to get this checkerboard pattern

I am not sure if there are any others that will make good flags.

Prisoner849 posted an example of an animated pirate flag, you may be able to use that one. That example may have even used shaders which is the fastest way to displace vertices.

If you mean this topic: Three.js + noisejs, then no, it displaces vertices with JS :slight_smile:

Yes, that’s the one. It looks like you were able to find a publicly available texture for a pirate flag. Arrrr!
If the OP wants a texture for calibration purposes, there is a good one available in three.js textures.

Speaking of publicly available images, do you happen to know how to set up a GitHub account so that you can save things to it (e.g textures, modules) and allow others (and yourself) to access them? That would really help people (like the OP and myself) who like to create programs that run locally.

That’s what I’m doing usually :slight_smile:
I have a repo on github, with enabled Github Pages (Settings → Pages).
When you enable Pages, then you can upload resources to the repo and access them via links like
https://username.github.io/reponame/resource.ext

1 Like

I have created an “Aviation” repository on GitHub.
And I have uploaded some test files which you manually download.
But if you try to link to them in a program, you get a CORS violation.

I am totally baffled as to how to change that repository in several regards:

  1. Enabling people (including myself) to link to them in a program.
  2. Deleting contributions. (After uploading them, I realized several were not legal sizes (e.g. 256x256)
  3. Creating directories and subdirectories.

Is there a GitHub guide somewhere that will answer those questions?

@phil_crowther
Hm… I simply made a fork from your repo. Went to the Settings -> Pages, chose there Branch - main, refreshed the page in a couple of minutes and got this screen:

And in several minutes I was able to access files in this repo:

I’m not sure how correct this approach is, but it works for me.

2 Likes

OK, I found the options page and made the changes and I was able to load the image using the alternative address format you described, e.g.

https://PhilCrowther.github.io/Aviation/FM2_Alt_BW.png

I was also able to access modules.