How to make the trees in this scene render correctly?

Questions
1

How to make the trees in this scene render correctly?
I speeak about this code and imgs:

tree
tree136Ă—225 947 Bytes

top
top512Ă—512 1.78 KB

three.min.js (589.3 KB)

stats.js (3.7 KB)

side
side480Ă—1455 991 Bytes

perlin.js (10.2 KB)

index.html (7.3 KB)

bottom
bottom512Ă—512 1.78 KB

And its generating this:

image
image1031Ă—489 91.8 KB

Why? May the threejs render can render this points correctly?

2

if it’s a transparent png (as it looks like it is) you’ll need to use a material with transparency and transparent: true, three should take care of the alpha quite well by default but if you need you can also refine the alpha with alphaTest

3

I tried alpha test but doesnt work… :thinking:

This is my code:

puntosTextura=new THREE.TextureLoader().load(“tree.jpg”)
const puntosMaterial = new THREE.PointsMaterial({
map: puntosTextura,
size: 40,
transparent: true,
});

4

ah i just looked at your code snippet…

puntosTextura=new THREE.TextureLoader().load(“tree.jpg”)
const puntosMaterial = new THREE.PointsMaterial(
{
map: puntosTextura,
size: 2.0 ,
transparent: true,
}
);

you’re loading a jpg which won’t have an alpha channel, png has an alpha channel, if you require only jpg’s then you’d have to include an alphaMap jpg too whereby white is opaque and black would be transparent, otherwise try loading a png with the alpha channel intact…

5

image
image969Ă—519 109 KB

Its shows at that form.

6

is that with a png? if not try this…

.load(“tree.png”)
7

// 2. Para los Puntos (Single Points Object)
const puntosGeometria = new THREE.BufferGeometry();
puntosTextura=new THREE.TextureLoader().load(“tree.jpg”)
const puntosMaterial = new THREE.PointsMaterial(
{
map: puntosTextura,
size: 2.0 ,
transparent: true,
}
);

8

.load(“tree.jpg”)

9

tree
tree136Ă—225 947 Bytes

.png

10

image
image996Ă—492 97.2 KB

This is the code:

puntosTextura=new THREE.TextureLoader().load(“tree.png”)
const puntosMaterial = new THREE.PointsMaterial({
map: puntosTextura,
size: 5, // tamaño pequeño y realista
transparent: true,
});

I changed the image to three.png:

image
image227Ă—224 4.77 KB

11

yes this looks like transparency is working, however, you’re now faced with a general lower level transparency rendering conundrum, try playing with these material parameters to suit your needs…

material.depthTest = true | false

material.depthWrite = true | false

material.blending = NoBlending | NormalBlending | AdditiveBlending | SubtractiveBlending | MultiplyBlending | CustomBlending

12

the material depths doesnt work, and the blending doesnt too much… :thinking:

13

have you tried true or false combinations on the depth parameters and tried with individual blending types?

14

Yes, doesnt work any blend… :thinking:

15

If found the solution to make a infinite terrain:

Thanks anyway!!!

16

.alphaTest: .5 on the material.

17

I get a virus alert when I click on that that screen.