Use custom mesh instead of generated one in three.js

Question

I have just discovered the world of three.js and it's amazing. I downloaded the examples, and started checking some of them.

I have never been coding in JavaScript, so I was wondering if somebody could help me with editing one of the example files (misc_controls_trackball.html). Instead of generated geometry (mesh.position.x = ( Math.random() - 0.5 ) ...) I was wondering if I could just include an already made mesh (from 3 studio max for example)?

I think this is the part of the code which generates the mesh:

            // world

            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

            var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
            var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );

            for ( var i = 0; i < 500; i ++ ) {

                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.x = ( Math.random() - 0.5 ) * 1000;
                mesh.position.y = ( Math.random() - 0.5 ) * 1000;
                mesh.position.z = ( Math.random() - 0.5 ) * 1000;
                mesh.updateMatrix();
                mesh.matrixAutoUpdate = false;
                scene.add( mesh );

            }

In what way should this be changed, so that I could import my external mesh (in form of .3ds, .obj, .dae, does not matter)?

Thank you.

Here is the misc_controls_trackball.html example file along with "js" folder.

PEER · Accepted Answer · 2015-01-10 01:00:24Z

Tried this?

http://threejs.org/examples/webgl_loader_collada

It`s an example for Collada, but for the other formats the concept is the same, just using a different loader.

var loader = new THREE.ColladaLoader();

// Depending on how you created your model, you may need to
loader.options.convertUpAxis = true;

// Then load it:
loader.load( './models/collada/monster/monster.dae', function ( collada ) {
    // All this will happen asynchronously

    dae = collada.scene;

    // Before displaying it, you can tweak it as necessary
    dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
    dae.updateMatrix();

    scene.add(dae);
    // At the next frame, you`ll have your model loaded.
} );

EDIT, additions

First you need the links to the proper libraries, including the ColladaLoader

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
    <script src="js/loaders/ColladaLoader.js"></script>

Then a number of things needed fixing in the code. - scene object was missing
- Model loaded, but to be scaled up a bit
- No call to render() in the animate function, so you had no animation.
- The fog statement was broken... Best spending some time on the basics, first...

        function init() {

            // Create your scene first
            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 500;

            controls = new THREE.TrackballControls( camera );

            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            controls.addEventListener( 'change', render );

            // world

            var loader = new THREE.ColladaLoader();

            // Depending on how you created your model, you may need to
            loader.options.convertUpAxis = true;

            // Then load it:
            //loader.load( './models/collada/monster/monster.dae', function ( collada ) {
            loader.load( 'models/monster.dae', function ( collada ) {
                // All this will happen asynchronously

                dae = collada.scene;

                // Give it a decent scale
                dae.scale.x = dae.scale.y = dae.scale.z = 1;
                dae.updateMatrix();

                scene.add(dae);
                // At the next frame, you`ll have your model loaded.
            } );


            // lights

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 1, 1, 1 );
            scene.add( light );

            light = new THREE.DirectionalLight( 0x002288 );
            light.position.set( -1, -1, -1 );
            scene.add( light );

            light = new THREE.AmbientLight( 0x222222 );
            scene.add( light );


            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: false } );
            //renderer.setClearColor( scene.fog.color, 1 );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild( stats.domElement );

            //

            window.addEventListener( 'resize', onWindowResize, false );

            // The following is not necessary at this stage, as you`ll call it
            // from animate later down (if you want to do an animation, of course,
            // which I guess you do)
            render();

        }

And the animate function should look like this

        function animate() {

            requestAnimationFrame( animate );
            controls.update();
            render();

        }

Hope that helps! :)

An answer shouldn't consist of links only. Summarize the content of that webpage.
Thank you for the help Dario. It didn't work. I am just getting a blank screen, the .dae model does not appear. Here is file with inserted Collada loader: filedropper.com/colladaloader
Thank you for the edit Dario. Interestingly once I try to run the .html page with all the changes you made, I get a message: "Your graphics card does not seem to support WebGL. Find out how to get it here." I am using Chrome version 39.0.2171.95 m (the latest one). But when I check if this version of Chrome supports webgl (go to: get.webgl.org), it says: Your browser supports WebGL. Interestingly I can use the default misc_controls_trackball.html file with no problem, but when I run the edited one, I get this message: "Your graphics card does not seem to support WebGL." Any idea?

Collectives™ on Stack Overflow

Use custom mesh instead of generated one in three.js

1 Answer 1

EDIT, additions

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT, additions

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related