Fill area under 3d curve PlotlyJS.jl

[Maucejo]

Dear all,

I struggle with a problem for a few days. Indeed, I am trying to fill the area under a 3d curve using PlotlyJS without any success.

Here is the MWE:

using PlotlyJS

x = range(0., 2π, 100)
z = sin.(x)

X = [0.; collect(x); 2π]
Z = [minimum(z); z; minimum(z)]
Y = zeros(length(Z))

trace = scatter(x = X, y = Y, z = Z, type = "scatter3d", mode = "lines")
surf = mesh3d(x = X, y = Y, z = Z, delaunayaxis = "y", color = :white)

plot([trace, surf])

The results is the same using plot(scatter(x = X, y = Y, z = Z, type = "scatter3d", mode = "lines", surfaceaxis = 1, surfacecolor=:white)). For a better understanding of the problem, here is a picture of the output.

It seems that this problem is a known issue of Plotly but I wonder if there is a julian workaround to this problem.

Note: I have no issues with Makie and PyPlot. Below, an example obtained with Makie:

[empet]

If we want to fill the area below a 3d curve,
γ: x=x(u), y=y(u), z=z(u), u ∈[a,b], then we have first to decide how much to fill below it.
Let us say, up to the horizontal plane z=h, where h <z(u), for all u. The ortogonal projection of this curve onto the plane is the curve prj: x=x(u), y=y(u), z=h.
The “area” under our curve is a cylindrical surface generated by all
3d segments of line, connecting the points on the given curve, with their projections onto the plane:
\displaystyle\frac{x-x(u)}{0}=\displaystyle\frac{y-y(u)}{0}=\displaystyle\frac{z-h}{z(u)-h}=v

Hence we have to plot the surface
x=x(u), y=y(u), z=h+(z(u)-h)*v
with u ∈ [a, b], and v∈[0,1].

In your particular case, the curve γ is x=u, y=0, z=sin(u), u∈[0 2π],  

and h=-1.2. Hence we are plotting the surface
x=u, y=0, z=-1+(sin(u)+1)v

using PlotlyJS
ul = range(0, 2*pi, 100)
vl = range(0, 1, 50)
u = ones(size(vl)) * ul'
v= vl * ones(size(ul))'
h = -1.2
fig = Plot(surface(x=u, y=zeros(size(u)), z=h .+ (sin.(u) .- h) .*v,
           colorscale=[[0, "#d22b2b"],  [1, "#d22b2b"]], opacity=0.5, showscale=false),
           Layout(width=600, height=400))

[Maucejo]

Many thanks @empet for this clear and accurate answer.