Hello all. I am working on recreating the demo version of jermeetienne grass example I found on github(Link below)
I am having some issues with some of the changes I am trying to do to get this to work on my local PC.
So far, I have changed the use of Image.utils to texture loaders. Attached is an image with the errors I am seeing as well as my code. Thanks in advance for any help you can give.
myScene4.js (6.4 KB)
package.require.js (176 Bytes)
Here is my file structure. All of my images are under the folder “textures” and all of my JS is under the “js” folder
So your code worked before using THREE.TextureLoader?
I actually don’t understand how TextureLoader.load() can return undefined. This issue causes the first runtime error shown in your screenshot (Cannot set property "wrapS" of undefined).
The other error means the THREEx namespace does not have a createGrassMesh object. Are you sure you have included the three.js extension correctly? Are you able to share your project as a git repo for further debugging?
The jeromeetienne grass example had some outdated code in it. For example, it used THREE.ImageUtils.loadTexture(textureUrl) to load a texture instead of a texture loader.
Here is a link to my github repo. I have been working on several different test projects, so this question refers to myscene4.js and index.html
Update: I was able to get the first error to resolve by commenting out three.min.js and fixing a spelling error. The scene now displays the ground plane with the grass texture. Here is the updated console error log.
I have pushed these changes to Github
Update 2- I have been working with a coworker and we decided to cut out the baseUrl part to get rid of these errors. This got rid of the errors above, but the grass patches have not shown up yet. I am still getting the warning about THREE.GeometryUtils that I am working on resolving.
Update 3
All errors from the console are gone. However, the grass patches are not appearing. I have updated my changes to Github. I changed some of the lighting and camera controls to make the debugging easier
Here is what it currently looks like
.
The demo you are trying to reproduce is very old.
If I may suggest a far better looking and much newer demo.
Demo: http://oos.moxiecode.com/js_webgl/grass_quads/
Source: view-source:http://oos.moxiecode.com/js_webgl/grass_quads/
A step by step is available as well, but is slightly different.
Guide: https://davideprati.com/2016/10/02/countless-blades-of-waving-grass-in-threejs.html
Demo: https://davideprati.com/demo/grass/
Source: view-source:https://davideprati.com/demo/grass/
I’ve debugged threex.grass.js and there are two problems:
geometry.height is deprecated. It has to be geometry.parameters.height
object3d.updateMatrixWorld(); before performing the merge via Geometry.merge()
Also consider to increase the width and height of the plane geometry a bit.
Update 4
Thanks for the help guys. I think I’m almost there. All of the grass patches have loaded in, they just seem to be missing their textures. I updated my code in Github(update 4)
I tried to increase the width and height of the plane geometry. This increases the density of grass, but starts causing serious performance hits. Are these performance hits normal or am I doing something wrong?
Yes, because the fragment shader has more fragments to render.
You can debug this with the dev tools of your browser. If you see HTTP 404 errors in the network tab, you try to load textures from a wrong location.
I’m trying out the demo you linked but I am unable to find the source code.
I updated my post with additional links.
