there are cool examples on internet that by useing threejs we can motion detect with a web cam,my question is can we dectect depth(Far and near) using threejs + webcam?
I think the downvotes are because this isn't a three.js question. The question you want to ask is how to get depth data with a webcam. If you Google that you will find what you are looking for. Three.js in this case would be a way to visualize the data, not a way to generate it.
Related
I'm currently doing a personal project to make a VR drawing game in which you can draw a 3D image in your surrounding. I have very little experience with visual studio and unity which i am using currently. Does anyone have suggestions on what i can do to get going in the right direction?
I've currently been looking online for tutorials and making a 'Frankenstein' code using what i have found. I can only do 2D drawing currently and have yet to implement VR. I can send out my current code if it would be helpful.
There was an easy to start demo in the internet like 1 or 2 years ago, but I can't find it right now. But I'd suggest you look out for it. Perhaps it even was the official unity demo. That demo already had the motion input covered and some basic functions. Good Luck on your project.
You find a good tutorial here:
https://unity3d.com/de/learn/tutorials/topics/xr/getting-started-vr-development
And some resources here:
https://unity3d.com/de/learn/tutorials/topics/virtual-reality/resources-getting-started-vr
That is maybe a pretty complicated project to start with. But I think you should be able to draw lines in 3D with generating meshes at runtime, that are rotated to the viewer, or the hand. So you generate or spawn some Sprites at your controller/digital-hand position, rotate them so they face to the viewer and scale them accordingly.
Somebody knows how it's possible to have so good quality for the 3D Objects like here http://showroom.littleworkshop.fr/? The objects are exported at this quality from 3DsMax or Blender or something similar, or the quality it's improved in threejs? As far I saw, the project was created with threejs. Any information regarding this project it will be helpful.
Thank you.
Question of quality is subjective. A better question would be "how can I create a scene using three.js with photo-realistic lighting and materials".
So here's an answer to that. There are a few points that make the example you provided look good:
1 - lighting. The example uses a mixture of direct and ambient lighting.
It is practically impossible to generate such lighting in real time in three.js (or any other 3d package for that matter) with the current state of the art on commodity hardware. So, you need to use light-maps. Light maps are pre-rendered textures of light and shadow, they can take a long time to generate, but look incredible, as demonstrated by example you mentioned. You can use Blender's Cycles renderer to generate light maps using "Bake" feature. The topic of lightmap generation is really outside of the scope of the question.
2 - Physically based materials. This is used to refer to material models that have excellent representation of real-life materials beyond "plastic". Three.js had at least 1 such maretial: StandardMaterial which is based on Metalness/Roughness/Albedo model (https://threejs.org/examples/?q=material#webgl_materials_standard)
good luck!
Turn on Antialias for better quality of rendering it works great
Also use lights as per requirement and camera view
Hi I'm new to Google Tango and stackoverflow and I'm doing a group project for school using the Tango device. I've searched the site and the web in general, but can't seem to find anything quite like what I'm looking for.
We've successfully used the AreaLearning feature to re-localize within a space and have used the Constructor to create a 3d model of a space. We want to load that model and localize within it so that we can use raycasting to measure the distance to walls.
Is there a way to do this or a better idea of how to obtain the wall (and other obstructions) distances?
thanks,
Ryan
I found Famo.us and it seemed pretty exciting but their docs are closed. I am very curios about WebGL so I started looking for alternatives. I found Three.js and Clara.io.
How do they differ from famo.us? What is the main objective of each framework?
Thanks.
Edit: Rephrased.
Three.js is a lightweight javascript library to create 3D visualisations (using WebGL, SVG, Canvas or another renderer).
Clara.io is an online 3D modelling tool using WebGL.
Famo.us is a javascript rendering engine to create web-apps with 3D user interfaces that promises to run smooth (60FPS) on mobile devices.
Famo.us claims to solve the HTML5 performance issue by avoiding DOM-layout and repaints, which are very expensive computations. Instead, Famo.us keeps a flat DOM and uses CSS3 transforms for all layout and positioning. Unlike the others you mentioned, Famo.us does not render using WebGL (yet), as Safari does not have this enabled by default.
Famo.us includes a physics engine to provide realistic and complex user interaction (e.g. bounce on a scrollview, 3D coverflow, that sorts of stuff). In Famous, you construct a scene-graph and add animations, events and physics to make everything come alive.
http://Clara.io is an online 3D modeling, rendering and publishing platform that can import and export in standard formats. It uses ThreeJS/WebGL and it imports and exports in the ThreeJS format as well.
Although Clara.io is not intended for creating applicatipns, you can also easily make interactive experiences Clara.io such as this demo by Klaas:
https://exocortex.github.io/klaas
I'm trying to find or create a working example of inverse kinematic posing in three.js. Ideally I would like to export human models from Makehuman via their Collada exporter, load them with THREE.ColladaLoader and set them into different poses in three.js programmatically or through some dat.GUI interface. A bit like an artist doll implementation - I don't need animation, but real-time feedback when tweaking the pose would be nice, and inverse kinematic style posing would be highly preferred.
I've been studying and searching information for days. This http://www.youtube.com/watch?v=6om9xy6rnc0 is very close, but I was unable to find any example code or downloads. The closest working example I've found is this: http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html However that appears to use predefined animation frames, which in turn appears to manipulate the bones in forward kinematics manner so that was not much help either.
I couldn't even find a model for testing, as I don't know what to look for when searching something with IK rigs/skinning/bones compatible with Three.js. Makehuman does seem to have plenty of rigging export options, I don't know if any of those are usable.
Is there a usable IK system in Three.js, and if so, are there any working examples, working human models, or any hints on which exact rigging system/workflow should study to accomplish this? If direct Collada support is not possible, creating the characters in Blender and exporting them is an option too..
EDIT: found this live demo http://www.akjava.com/demo/poseeditor/ but the code is totally unreadable.
I don’t feel competent enough to answer your question, but I’ll post three links which may put you on the right track.
wylieconlon/kinematics
– a great demo of 2D inverse kinematics animation. The code is totally readable.
https://www.khanacademy.org/computer-programming/inverse-kinematics/1191743453
– another demo, this time less flexible but more terse.
How to calculate inverse kinematics
– a rabbit hole of links. Just in case you’d want to dive right into the thing.
This seems promising.
Fullik : javascript fast iterative solver for Inverse Kinematics on three.js
is a conversion from java to Caliko 3D libs
Caliko library is an implementation of the FABRIK inverse kinematics (IK) algorithm
https://github.com/lo-th/fullik