What's the best way to extend CanvasRenderer in Three.js for a custom material?
I've got a ShaderMaterial for customized dashed lines in WebGL, but I need CanvasRenderer support as well. I figure I could create a custom material that extends the Material class. But I'm sure I'll have to extend Canvas Renderer in some way. How should I go about that? Copy and paste, creating a new class entirely?
Here is a jsFiddle (http://jsfiddle.net/VyP29/1/) . of what I want to do, but in WebGL. I need the lines to stay a consistent length so it will probably have to be implemented by expanding a single line to multiple lines and gaps (for the CanvasRenderer).
Related
I'm working on a little project with react-three-fiber. If I load my .gbl 3D Model into the scene it's completly dark even if I use the ambientlight in the canvas. But in the three.js editor it looks exactly like I want it if I use the Modeviewer environment. Is it possbile to download this environmet somewhere and use it in my project?
yes, the stage component from the drei library https://twitter.com/0xca0a/status/1402975317174726656 all you need is wrap your model into <Stage>. as for models being dark even with ambientlight, this is usually related to wrong materials, for instance metalness=1. take a look here: https://discourse.threejs.org/t/ambient-light-and-gltf-models-not-working-results-in-black-model/7428/5
I am using ThreeJS r67
I have a static room with lighting baked so lights do not need to affect it, but I also have a person in the room that does need the lighting. Is there a way to set all the materials in the room to ignore the lights?
According to the ColladaLoader.js (in three.js r67) lines 3550-3572 you can specify in the collada model file what type of material to create. You are probably using blinn or phong and you need to change that to constant.
I would like to extend the default lambert material shader of three.js.
I basically would like to add some custom code at the end of the default fragment shader so the last line will apply my color transformations.
It's there any simple way to do that? Or should I rewrite a completely new one adding the default code on it?
I've created a custom ShaderMaterial using the predefined blocks from the default materials.
I am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.
I fall back to CanvasRenderer if user's browser does not support WebGL. I would like to have wireframe only rendering when using CanvasRenderer for performance reasons. However I cannot get overrideMaterial to work with it. It's working with WebGLRendererer quite nicely like this:
scene.overrideMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
In CanvasRenderer this seems to have no effect, making FireFox unresponsive because the code is just too heavy for all but the simplest models.
Previously I had replaced all object materials directly with wireframe material by traversing the scene geometries and just overwriting the "real" materials. That kind of works, but makes material and object management guite messy, as I would like to have the material information present in the models even if they are not rendered.
Is it possible use scene.overrideMaterial with CanvasRenderer? Or other way to force wireframe rendering? I'm using r54.
No, CanvasRenderer does not support scene.overrideMaterial. I think you have pretty much exhausted your options.
I would be careful about using MeshBasicMaterial as an override. Only do so if your scene contains meshes only -- no lines, for example.
three.js r.54