I am working on a 3D Furniture configurator using THREE.js and react-three-fiber.
The problem that I encountered is the poor visualization and shadows and I couldn't get it to work right. You can see the image here (I can't attach images, sorry):
Poor visualization
And I want to have something like this (which is from website https://tylko.com/):
Good visualization
The similar shelf:
https://tylko.com/shelf/bookcases/486307/?cv=0&board=cat_1__type_2__id_4263
Here is my lighting:
<ambientLight intensity={0.3} />
<directionalLight intensity={0.4} position={[-25, 15, 30]} />
<directionalLight
ref={lightRef}
castShadow
position={[25, 15, 30]}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-bottom={-10}
shadow-camera-top={10}
shadow-bias={-0.0001}
shadow-darkness={0.2}
intensity={0.8}
shadow-mapSize-width={1024}
shadow-mapSize-height={1024}
/>
Sandbox with similar setup:
https://codesandbox.io/s/3d-configurator-shadows-zp6tj?file=/src/App.js
I tried many things from changing different properties of light to changing the toneMapping property of glRenderer.
I've also tried all the advices from the stackoverflow and anything I could find on the web, but nothing works.
Basically what the problem boils down to the color issue and shadows issue: the shadows are too sharp and the color of the shelves is kinda gray, when it's actually set to #ffffff.
Hope someone can help me here.
Related
I'm having an issue where the material is not showing correctly. I checked the MTL file and all looks correct but for some reason, the material seems to be flipped(I can see it through some parts while it should be the screen). Initially I thought there was something wrong with the MTL or the OBJ but here comes the funny part. On 3dviewer.net the model looks completely perfect(last screenshot).
Therefore, does anybody have a clue on what's happening?
By default, Three.js only renders the front side of faces, since there's often no reason to render the inside of objects. The problem is that the asset you've exported has the face of the screen pointing inwards. There are two ways of solving this problem:
Open the asset in a 3D editor, flip the direction of the faces that are pointing inward, and re-export.
You could change the default material.side attribute of your material. My best guess is that: material.side = THREE.BackSide would solve your problem, but you could try the other values in that documentation page.
In Shetchfab.com you can add a 3d background environment for your 3d objects.
Im making this page where i show an .x3d object in a tag frame using x3dom.
<x3d height='500px'>
<scene id="mainScene">
<Inline id="inlineBox" nameSpaceName="dcm" url="juicecarton.x3d" />
</scene>
</x3d>
How do i add a background like Sketchfab with the rotating environment ?
Can someone help me out with this?
The rotating background is often called a "cubemap" (although that name can be used for both, the kind of texture and the way it is being used / visualized in 3D).
In X3DOM, you should be able to use a background like this (inside the Scene element):
<Background id='back1'
backUrl='"./ocean_3_back.jpg"' bottomUrl='"./ocean_3_bottom.jpg"'
frontUrl='"./ocean_3_front.jpg"' leftUrl='"./ocean_3_left.jpg"'
rightUrl='"./ocean_3_right.jpg"' topUrl='"./ocean_3_top.jpg"'>
</Background>
There's also an X3DOM node for integrating such texture maps to obtain a reflecting material, it's called "ComposedCubeMapTexture":
https://doc.x3dom.org/author/CubeMapTexturing/ComposedCubeMapTexture.html
I didn't find a live online example, but it should be straightforward to get one working - here's some code:
https://github.com/x3dom/x3dom/blob/master/test/regression-suite/test/cases/cubemap/cubemap.html
Result should look like this:
http://testing.x3dom.org/test/reference/cubemap_0.png
I am trying to build an obj file viewer using Helix Toolkit (https://github.com/helix-toolkit/helix-toolkit) with SharpDX. So far I am able to load an object file and render it's contents to Helix Viewport3DX. Model looks good with some obj files but for others there are some lightning problem and back surfaces are always black. I am not sure what am I doing wrong. Is this light problem due to the fact that SharpDX does not support back materials?? Please help.
Problem using Helix Sharp DX:
Original Model in Adobe DC Reader looks like this:
Viewport3DX settings are:
<Window.Resources>
<DataTemplate x:Key="Template1">
<hx:MyMeshGeometryModel3D Geometry="{Binding Geometry}" Transform="{Binding Transform}" Material="{Binding Material}"/>
</DataTemplate>
<hx:RenderTechniqueConverter x:Key="RenderTechniqueConverter"/>
</Window.Resources>
<hx:Viewport3DX x:Name="helixViewport" Camera="{Binding Camera}" CameraRotationMode="Trackball" RenderTechnique="{Binding RenderTechnique}" RenderTechniquesManager="{Binding RenderTechniquesManager}" EffectsManager="{Binding EffectsManager}" BackgroundColor="{Binding BackgroundColor}" UseDefaultGestures="False">
<hx:Viewport3DX.InputBindings>
<MouseBinding Gesture="LeftClick" Command="hx:ViewportCommands.Rotate"/>
<MouseBinding Gesture="MiddleClick" Command="hx:ViewportCommands.Zoom"/>
<MouseBinding Gesture="RightClick" Command="hx:ViewportCommands.Pan"/>
</hx:Viewport3DX.InputBindings>
<hx:AmbientLight3D Color="{Binding AmbientLightColor}"/>
<hx:DirectionalLight3D Color="{Binding DirectionalLightColor1}" Direction="-1,-1,-1"/>
<hx:DirectionalLight3D Color="{Binding DirectionalLightColor2}" Direction="1,-1,-0.1"/>
<hx:DirectionalLight3D Color="{Binding DirectionalLightColor3}" Direction="0.1,1,-1"/>
<hx:DirectionalLight3D Color="{Binding DirectionalLightColor4}" Direction="0.1,0.1,1"/>
<hx:ItemsModel3D x:Name="itemsModel3d" ItemTemplate="{StaticResource Template1}" ItemsSource="{Binding Items}"/>
</hx:Viewport3DX>
I'm not sure what u mean with "back materials".
SharpDX supports what ever u want it to as its just a wrapper around DirectX, the issue could have something to do with helix but again I don't really know because helix is a framework that is based on sharpDX and I'm just using sharpDX to build my own framework.
You never draw the back side of a mesh because u cant see it anyway so why bother sending drawing it?
It almost looks like there is some sort of falloff on the light but because its a directional light that would be of no use.
Sometimes in max I have to flip the normal so things draw right in game or I change the winding order when I import the mesh with assimp.
I need anyone to help me about my work
Work here :
ivanvujnovic.com/Avatar_final/index.html
I would have a better rendering, like smooth shading or something else.
How can i do that?
Thank's
You already have smooth shading happening there. I believe you might be looking for 'pixel shading' or 'pixel lighting'.
This might be useful:
http://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/lighting.php
Looks like the normals are messed up in your model, or there is a glitch translating them with Three.js making for a bumpy look by messing up the lighting.
You could try to re-export your model and check any normal-related export options if the problem could be solved with using different configuration.
Or you could let Three.js try to recalculate new normals for your geometry, ignoring the ones existing in the model:
geometry.computeFaceNormals();
geometry.computeVertexNormals();
I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.