Loading a 3d model from DB and using it in Three.js

Question

now my task is to load a 3d model from a MySQL database and use it in Three.js.

Here is what I have done,

i created a database like this

models{model_id int(4), model mediumblob};

I can successfully load the 3d models in JSON format to and from the database.

I know how to retrive the data from DB.

But my problem is - 'How do i make the JSON file that is loaded from DB to be used by Three.js?'

I load the Json file conventionally like this

// instantiate a loader
var loader = new THREE.JSONLoader();

    // load a resource
    loader.load(
    // resource URL
    'models/animated/monster/monster.js',
    // Function when resource is loaded
    function ( geometry, materials ) {
        var material = new THREE.MultiMaterial( materials );
        var object = new THREE.Mesh( geometry, material );
        scene.add( object );
    }
);

This is an example code from Three.js documentation.

The resource URL appears to be a file located physically in the root. But I can't figure it out in my head 'how to load the model obtained from Database to Three.js?'

I am not asking for any code.

Just guide me to load the file in Three.js

I am familiar with loading an simple image. But that is html oriented. This is Three.js oriented.

the `monster.js` file path is relative to the demo.html file in which is running. So if you're familiar with loading image files you just use the same path structure. i.e. as if you were loading an image file into your loader but the generated path points to the 3d Model json. — Sam0, Sep 25 '16 at 09:42
i don't use a path to load an image. its from a database. actually i would query the image data. But can you give me an example to load the json with JSONLoader? — Yashwanth CB, Sep 25 '16 at 09:49
The middle line in the example code from the Three.JS doc. `'models/animated/monster/monster.js',` just replace this path with the full path for your 3d model. The path length and structure should be the same as if you wee to load an image file. — Sam0, Sep 25 '16 at 09:50
function load() { $sql = "SELECT model FROM `ovf_items_cycles`"; if(!$res = $_ENV['db']->query($sql)) { echo ' failed to operate'; } while($row = $res->fetch_assoc() ) { echo $row['pid'] . ' ' . $row['pname']; } } — Yashwanth CB, Sep 25 '16 at 09:53
actually this is how i would load the json file.now where to find the path. — Yashwanth CB, Sep 25 '16 at 09:54
*************you havn't understood my problem. the link of the model is not a problem. i have saved the model in database. how do i retrive that model from database and use it in THREE.js — Yashwanth CB, Sep 25 '16 at 09:57
so if you echo your $row['pname'] into a js variable, then replace the model path variable in your variabe it should work. comments aren't suitable for this . will post a code suggestion sooon — Sam0, Sep 25 '16 at 09:59
ok .. the json file will be huge.. if i pass the variable to the JSONLoader like this loader.load(JsonVariable,function ( geometry, materials ) {...}; will it work like the same? — Yashwanth CB, Sep 25 '16 at 10:02
I don't know your set-up but the js can't query the php directly. I use three. js loaders with wordpress php so everything is mediated through the html page. My method is simply to echo the file path into the js script via the html, when the js is loaded it sees the path and then inputs that into the loader — Sam0, Sep 25 '16 at 10:11
my code is wrong.........this is the right one -> function load() { $sql = "SELECT model FROM ovf_items_cycles"; if(!$res = $_ENV['db']->query($sql)) { echo ' failed to operate'; } while($row = $res->fetch_assoc() ) { echo $row['pid'] . ' ' . $row['modeldata']; } }....note that i use the modeldata which is a blob file of JSON objects...and not the modelname — Yashwanth CB, Sep 25 '16 at 10:12

score 1 · Answer 1 · edited May 23 '17 at 11:52

Looking at I need my PHP page to show my BLOB image from mysql database I would try taking the : <img src="image.php?id=<?php echo $image_id; ?>" /> line and using the src attribute for the js loader so in the js (I'm assuming it's working on a web page via html) something like:

js:

// set up a path variable
var filed = 'model.php?id=<?php echo $sql_id; ?>'

// instantiate a loader

var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL location
filed,
// Function when resource is loaded
function ( geometry, materials ) {
    var material = new THREE.MultiMaterial( materials );
    var object = new THREE.Mesh( geometry, material );
    scene.add( object );
}
);

and then the php:

<?php
function load() { $sql = "SELECT model FROM ovf_items_cycles"; if(!$res = $_ENV['db']->query($sql)) { echo ' failed to operate'; } while($row = $res->fetch_assoc() ) { echo $row['pid'] . ' ' . $row['modeldata']; } } 
?>

This is a sketch as my php is not so good. But ultimately it would be much easier if you could also store the path to the blob file in your sql and access that for the loader variable.

i think i am getting it.. Let me make my hands dirty.. I will post my progress tomorrow.. So be with me buddy.. Thanks.. — Yashwanth CB, Sep 25 '16 at 10:39
my php is not so good, but maybe you can change `file_id` to be your `modeldata`, but really you should be looking up the path location of the model. Otherwise I think you'll be doubling the model data (once in the page space and then again when Three loads it) which will lead to problems. Use the `filed` variable to show Three where the file is, not hold the content of the file. — Sam0, Sep 25 '16 at 11:53

score 0 · Answer 2 · answered Apr 14 '20 at 21:14

0

Look if the Three.js loader has a parse function which you use instead of the load function.

answered Apr 14 '20 at 21:14

Paul

126
1
11

Loading a 3d model from DB and using it in Three.js

2 Answers2