recently updated a simple three.js scene from ~ r74 to r94. Textured materials are loading correctly but LineBasicMaterial is not showing. All references to materials are giving the error ".shading has been removed. Use the boolean .flatShading instead."
I can't find where .shading is being referenced. I'm just using three.js, not referencing any other three-related js files.
I found one thread saying to check the dependencies have been updated, but I don't know how to do this and assumed everything was just in the three.js file.
Does anyone have any ideas where .shading is being set please?
Many thanks.
LineBasicMaterial does not respond to lights, and never has.
LineBasicMaterial does not utilize the .flatShading property.
The .flatShading property is only used when rendering meshes.
three.js r.94
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.
I'm working from the most recent examples I can find, and I still can't get shadowCasting to display.
barebones jsFiddle: https://jsfiddle.net/bitsofcoad/rw48tu93/
The point light should cast a shadow from the first mesh to the second.
According to https://github.com/mrdoob/three.js/wiki/Migration-Guide:
shadowMap.enable = true/false is correct syntax.
https://threejs.org/docs/#api/renderers/WebGLRenderer support that.
However, I get a syntax error if I use that label. Am I missing something?
Thanks
Enable shadows like so:
renderer.shadowMap.enabled = true;
And yes, if you are trying to update an outdated example, the Migration Guide can be helpful.
Other good resources are the three.js examples, as they are consistent with the latest three.js release.
three.js r.88
I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)
I'm trying to make a simulation consisting of many lines. Up until now I had Three.js v45 and Trackball Controls and it worked fine.
I then tried to implement my lines in a buffer geometry (as in this example: http://fzwoch.project-sheol.org/three.js/examples/webgl_buffergeometry_lines.html)
but for that I needed to update to the newer Three.js build. And Trackball Controls doesn't work anymore! Am I missing something? How can I get both to work?
Thank you,
Kasia
First have you noticed that the controls changed location? Now you have to add in your html file:
<script src="three.js/examples/js/controls/TrackballControls.js"></script>
You should also check the migration notes https://github.com/mrdoob/three.js/wiki/Migration to see if anything else changed for your code from the r45 release to r55 (current).
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.