I am a newbie regarding three.js and I have a problem with imported geometry (js-file from 3dsmax inclusive all material and textures) and the CanvasRenderer. The CanvasRenderer displays the triangle edges of imported geometry, the WebGLRenderer works well.
Canvas example:
http://der-n.square7.ch/threejs/examples/teapot_canvas.html
WebGL example:
http://der-n.square7.ch/threejs/examples/teapot_webgl.html
In the three.js library I have found the option "overdraw: true" for a material to fix this behaviour but obviously the material+textures are defined by the above mentioned exported 3dsmax js-file.
For the tests I use the "misc_camera_trackball" example with small changes (I have added a JSONLoader, changed some camera and trackball parameters, changed some light colors, added a CanvasRenderer)
Any hints how to solve this?
Thanks for your help.
Best regards
Oggy
In the loader callback, you have all of the loaded materials in an array geometry.materials. You could loop over those materials and set the overdraw property to true for each.
As far as I know, THREE.MeshFaceMaterial is just a pass-through material that indicates "faces have an index that points to a material instance to use from the geometry's materials array", so setting properties for MeshFaceMaterial won't have any effect.
Related
I'm writing a 'template creation' app using the dcc.Graph image annotation features in Plotly Dash.
The user adds multiple rectangles for specific features in the image (an invoice) and my callback captures the coordinates of each rectangle via the relayoutData variable. I want to use a different color for each rectangle, but can't figure out how to do it.
It seems like the only way to change the newshapes fillcolor
property is to replace the whole figure, but then I lose all previous shapes
All and any help appreciated.
Andrew
I have just found the following demo that does exactly what I am trying to do:
https://dash-gallery.plotly.host/dash-image-annotation/
Now to unpack the logic and adapt it to my context ... Happy 2021!
Andrew
I have a basic three.js scene in which I am attempting to get objects exported from Blender (as JSON files with embedded morphs) to function and update their shapes with user input.
Here is a test scene
http://onthez.com/temphosting/three-js-morph-test/morph-test.html
The slab is being resized without morphs by simply scaling a box, which is working just fine.
I must be missing something fundamental with the little monument on top. It has 3 morphs (width, depth, height) that are intended to allow it to resize.
I am using this code to implement the morph based on users dat.gui input.
folder1.add( params, 'width', 12, 100 ).step(1).name("Width").onChange( function () {
updateFoundation();
building.morphTargetInfluences['width'] = params.width/100;
roofL.morphTargetInfluences['width'] = params.width/100;
roofR.morphTargetInfluences['width'] = params.width/100;
building.updateMorphs();
});
The materials for building, roofL, and roofR each have morphTargets set as true.
I've been going over the three.js examples here:
http://threejs.org/examples/?q=morph#webgl_morphtargets_human
as well as #webgl_morphtargets and #webgl_morphtargets_horse
Any thoughts or input would be much appreciated!
I believe I've reached a solution for my question I was under the impression that the JSON loader was preserving the morph target names to be used in place of an index number with morphTargetInfluences
something like morphTargetInfluences['myMorphTargetName']
but, after closer inspection in the console it seems like they should be referred to by number like morphTargetInfluences[0]
Not the most intuitive, but I can work with it.
I've been working a lot with AGAL vertex and fragment shaders. I've got individual objects lit correctly (including specular shading) but I'd like to have objects cast shadows on OTHER objects. I have looked online, but I think most people working directly with AGAL have built custom Stage3D libraries and the shadow-casting solution doesn't seem to be in the public domain. Anyone willing to change that?
I'd like to know how to get an object to cast a shadow on another. I can't post what I've tried, because I can't get my head around where to begin on this problem. How would you pass the information (whether other objects are blocking the light) into another object's shader?
Thanks.
IT's called Deferred shading, you have to do 2 pass of vertex and fragment shaders.
In the first pass you accumulate informations about distances, normals, occlusion...
In the second pass you render and apply the informations of the first pass to make shadows.
Another options is ShadowMapping:
Basic shadowmap
The basic shadowmap algorithm consists in two passes. First, the scene is rendered from the point of view of the light. Only the depth of each fragment is computed. Next, the scene is rendered as usual, but with an extra test to see it the current fragment is in the shadow.
The “being in the shadow” test is actually quite simple. If the current sample is further from the light than the shadowmap at the same point, this means that the scene contains an object that is closer to the light. In other words, the current fragment is in the shadow.
I'm looking for a list of flash.include.whatever.whatever for as3.
If no one knows a list then can someone tell me the flash.include to use for drawing rectangle with the startFill and endFill things? Thanks for any help.
I didn't find anything on either of these googling, and the place I got the code for drawing a rectangle of course didn't have the flash.includes included in the example code... is their a reason so many people do that? Any way I can get around it?
Do you mean you want a list of the packages and classes that come with AS3? That is typically called the documentation and can be found here:
Adobe ActionScript® 3 API Reference
For drawing a Rectangle, you can start at flash.display.Shape. It has a graphics object with the methods .beginFill() and .endFill().
you can using a Graphics.
The Graphics class contains a set of methods that you can use to
create a vector shape. Display objects that support drawing include
Sprite and Shape objects. Each of these classes includes a graphics
property that is a Graphics object. The following are among those
helper functions provided for ease of use: drawRect(),
drawRoundRect(), drawCircle(), and drawEllipse(). You cannot create a
Graphics object directly from ActionScript code. If you call new
Graphics(), an exception is thrown.
The Graphics class is final; it cannot be subclassed.
here is a sample
import flash.display.*;
this.graphics.beginFill(0xff0000);
this.graphics.drawRect(0,0,100,100);
here is a Adobe Tutorial
AS3 all display class list here
You do not necessarily need to default AS3 include. fine compile. But include only the code you can see the hint. perhaps, CS4 after that if you use a specific class will automatically include. or ctrl+space is autocompletion.
As follows by default when you install the flash is because of the SWC path.
As per I know, there is not such a thing like Flash.include. May be you're trying to ask something else or may be i am still unknown about this feature.
If you found any positive thing about this, please let me know, i want to know that new thing.
We have a flash application that we are planning on converting to javascript. It's a pretty simple map application with an image as the background and a bunch of simple polygon movie clips that represent destinations on the map.
I would like to iterate through each movie clip and extract the shape into an array of x,y points to redraw the polygon using an external javascript function.
Is this possible with actionscript?
If you want to export the shape coordinates at author time, you can do try the JSFL script recommented by #strille or this one or export transparent images (if that's not too limiting for your application).
If you need to export the shapes at runtime, you can use the awesome as3swf library to decompile the swf and export the shapes. Have a look at the ShapeExport wiki as there are couple of handy exporters for js like JSCanvasShapeExporter and the more generic JSONShapeExporter
There are ways you can read the coordinates from an SWF. For instance, I've written a parser in PHP (link). Getting the data doesn't help though, as it turns out. The Flash painting model is different enough from the HTML5 one enough to make transfer exceeding difficult. The main obstacle I discovered is that in Flash, a path can be filled with two fill styles: one for area enclosed by the path, the other for enclosed area considered to be "outside" by the even-odd rule (e.g. the pentagon in the middle of a star). Since the HTML5 canvas let you specify only one fill style, you can't redraw shapes from Flash accurately. I was trying to create a tool that extract shapes as SVG and was getting a lot of gap and holes in the result.
Flash Player 11.6 introduced readGraphicsData() which does exactly what you ask for.
If you need to target an earlier version, then there's no simple way to read shape coordinates from a display object with ActionScript at runtime unfortunately.
If you just want to extract the shape coordinates once someone has written a jsfl script for Flash CS3 which looks like it might be able to help you out.