Been through the introduction tuturial. got the green cube working.
Replaced it with a json model. very exciting!
Then i tried to do the same with the teapot one. or the car.
Because i want a bit more detail and a texture on my model.
But for some reason nothing keeps showing up when i want to replace them.
With my own JSON model (exported from blender).
Also its hard to find any example that uses JSON.
Even the blender example does not use JSON for some reason.
I am trying to achieve a nice turntable effect for showcasing my models.
Would be even way more amazing if it had keyframe dragging below aswell for animating.
Links to examples:
http://threejs.org/examples/#webgl_geometry_teapot
http://threejs.org/examples/#webgl_loader_ctm_materials
Thank you for reading!
Related
I have 3D model which I have created in three.js. Based on some data, I want to create a text above each object of my scene.
It seems like I have one option which is creating a 3d text model and position it above my object , but this doesn't work with me i don't know if i had commited an error or something like that.
I'm wondering how to go about this. Which is the "correct" way to do this? Any suggestions and example code is very welcome!
here is my code
here is my problem
I loaded a Mesh from a JSON File, here is my current result:
my Project
It is an object I exported from blender as JSON and then used its vertices to create a geometry of Points (THREE.Points) (which is important for the looks of it)
I am now looking for a way to "animate" the Points, so that the "surface" looks vivid / living. So basically it should be moving around a bit, something like this (without the rotation):
Link to animated Gif
I have ruled out displacementMap, as this does not work for the PointsMaterial (or does someone know a workaround?)
Does anyone have hints or ideas? I thought of maybe morphing 2-3 Objects .. but I am not sure if this will work for a points mesh.
One approach to achieve your desired effect is to use morph target animation (also called vertex morphing). As you can see at the following example, three.js does support morph target animations with points.
https://threejs.org/examples/webgl_morphtargets_sphere.html
There is a lot of existing literature about vertex morphing, so it should be no problem to get familiar with this technique. I suggest you create your animations in Blender, export the model to glTF and the load the file via GLTFLoader into your app like shown in the example.
In working with Three.js and I’ve run across several useful Helper classes that really make displaying and or modifying the scene much easier. There is one tool out there that I can’t seem to find again. It is kind of like the AxisHelper however it has a plane between the axis when you mouse over that area allowing the user to move the object along the xy, xz, or yz plane depending on what you pick. I’ve drawn an example of what it adds to the object in order to help the user move the object along the plane. If anyone knows of this tool or maybe an example of something that uses a utility like this, it would be great if you could point it out to me. Thanks.
I expect you are looking for TransformControls. There is a three.js example of its use here.
TransformControls is not part of the library -- it is part of the examples. You must include it explicitly in your project.
three.js r.80
I am facing a very obscure issue.
I am loading .obj 3d models into a WebGL application I am working on. I am parsing them using a custom function. I know it works correctly. Because I get this:
Granted the texture is stretched way too much. But that's the way the UVs are mapped.
But, when I load a goose model here's what I get:
An untextured goose. I am using the same texture.
Weirder still is the fact that the texture renders only around the eyes. If I don't draw the wireframe, I get this:
Those two tiny specs that I've circled are the eyes.
Just to make sure that it wasn't this model, I tried another one:
I have no idea why it won't render the texture everywhere else.
Here's what I've tried:
Recalcuated normals and exported from Blender again. Same outcome.
Loaded models in Photoshop and they preview correctly. Meaning models are fine.
Checked my parsing of the .obj file into a usable format for WebGL over and over. Also, since the cube loads correctly, I assume it's not that.
Tried switching off MipMapping, disabling CULL_FACE and changing winding order. No difference.
Used different texture image. The texture images are all NPOT. Tried non NPOT. Nothing changed, except with different images the texels of the little eyes or the fragment on the axe changed to the texture.
Checked UV mappings, all look fine. No negative or out of range values.
I am totally out of ideas. If someone has had similar experiences, I'd appreciate pointers as to where to look next.
I generally don't like to ask questions without posting the code, but the code is very convoluted because I'm using sweet.js for custom javascript syntax. Let me know if anyone would like to look at the code and I could try and clean up some code and upload somewhere.
From your images i was wondering if you did not draw a constant number of polygon, or if the draw started then silently failed on its road because of some bug. That's why i asked if the drawn polygons were the first of the models.
And so it seems that indeed there was a hard coded limit to the number of drawn polygons.
Glad you found it !
I'm about to jump into some simple game development with Javascript. I would like to one day transition to 3D development but for now am only going to be doing 2D "top down" objects.
I know that this isn't ideal but I feel like it will help me get familiar with the 3D "environment".
I am using Three.js as it appears to be very well developed and I like that it can do Canvas, WebGL and SVG. However, my very first problem I've come across is, I don't know how to "move" an object. Using just Canvas I can easily take an object I have rendered and modify it's .x or .y property to "move" it. However, for Three.js objects so far all I've found is object.rotation.x, etc. I can move the camera, but this doesn't work because I need objects to move individually.
So I guess what I'm looking for is any resources into Three.js for 2D development, or developing a 2D top-down game in a 3D environment.
The Getting Started article is pretty good.
LearningThree.js got a series on "let's make a 3D Game".
There is a nice searchable reference available too.
Note that the project moves super fast so the API might change
here and there, so keep an eye out on github and when you
update always read the change log to see if you need to update your code.
Gooduck!.