Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    THREE.js 3D Body

    Hi there,

    I currently need to show a 3D human body in the browser, be able to rotate the body with the mouse, make several areas of the body clickable / selectable by mouse click and i need to somehow make this work in every browser without any plugins.

    I've never done something like this and googled quite a lot, until i found three.js. Sadly three.js's documentation is not really useful and most of the stuff has no documentation, there is no explanation. Furthermore i dont know much about JS and this topic is a bit complicated. Somehow i managed to draw a 3D body in the browser which the user can manipulate / rotate with the mouse.

    Here is the Code:

    Code:
    <!DOCTYPE html>
    <html lang="en">
            <head>
                    <title>3D Body</title>
              <script src="three.min.js"></script>
              <script src="OBJLoader.js"></script>
                    <script src="TrackballControls.js"></script>
              <style type="text/css">
                   #container {
                        border:thin solid black;
                   }
              </style>
            </head>
    
            <body>
                    <div id="container"></div>
    
                    <script>
    
                            var container, camera, controls, scene, renderer;
    
                            init();
                            animate();
    
                            function init() {
                        // Renderer
                                    renderer = new THREE.CanvasRenderer();
                                    renderer.setSize(window.innerWidth,window.innerHeight);
                                    container = document.getElementById('container');
                                    container.appendChild(renderer.domElement);
    
                        // Camera, controls
                                    camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,500);
                                    camera.position.z = 400;
                                    controls = new THREE.TrackballControls(camera,renderer.domElement);
                                    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];
                                    controls.addEventListener('change',render);
    
                                    // Scene
                                    scene = new THREE.Scene();
    
                        // Texture
    
                        var texture = new THREE.Texture();
    
                                    var loader = new THREE.ImageLoader();
                                    loader.addEventListener( 'load', function ( event ) {
    
                                            texture.image = event.content;
                                            texture.needsUpdate = true;
    
                                    } );
                                    loader.load( 'texture.jpg' );
    
                        // Model
    
                        var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
                        var loader = new THREE.OBJLoader();
                                    loader.addEventListener( 'load', function ( event ) {
    
                                            var object = event.content;
    
                                            object.traverse( function ( child ) {
    
                                                    if ( child instanceof THREE.Mesh ) {
    
                                                            child.material.map = texture;
    
                                                    }
    
                                            } );
    
                                            object.position.y = - 80;
                                            scene.add( object );
    
                                    });
                                    loader.load( 'body.obj' );
                            }
    
                            function animate() {
                        // Animate
                                    requestAnimationFrame(animate);
                                    controls.update();
                            }
    
                            function render() {
                        // Render complete scene
                                    renderer.render( scene, camera );
                            }
                    </script>
    
            </body>
    </html>
    (This code is made of and copied from the few exampled i found about three.js in the web and changed as long as it would work as i wanted). For those who want to see the result, here is the 3D Model im using: http://www.file-upload.net/download-.../body.obj.html

    Now my questions:

    1. Is it correct, that WebGL is the semi-standard for 3D in the web but is not supported by all browsers? According to my research in the web, Chrome and FF support WebGL 100% and Opera and Safari do support it but you need to enable it first. IE doesn't support anything. Is this correct?
    2. Am i correct that Canvas is some sort of Fallback which i can use to make this whole think work magically in every browser? In my Script i use CavasRenderer because i think it runs in every browser. So i decided to not use WebGLRenderer because it wouldn't run in IE that way. Am i also correct that the CanvasRenderer coverts the 3D Code in some sort of JavaScript so that all browser who support JS (which are most browsers) are able to show / perform my 3D Body?
    3. I got a function called animate() in my code with the Line requestAnimationFrame(animate); but i don't understand why i need this line. Yes i googled it and i understand that it is some sort of new JS feature to make animations in JS easier so you dont need to permanently use setTimeout() (and it saves resources), but i am not animating anything in my script. There is no constant need to repaint the whole scene unless the user uses his mouse to rotate the scene. So why doesn't the script work without that line?
    4. For what do i need controls.update()? It's a method of the THREE.TrackballControlls.js library. There is no single documentation about it and i don't know what this function does. Yes i looked in the code of it, but i dont understand what this function does.
    5. Someone has any idea how to devide this 3D body into several parts / areas that are clickable by mouse / selectable ?
    6. When I am starting the Script in my IE 8 it breaks and doesn't show anything because of constant JS-Errors. Why, when i use CanvasRenderer?

    Thank's a lot for any help and tips and sorry for my english - i am not a native speaker.

  • #2
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shiuyin im also looking a way to create a human model in html page for my final year project. can you please share your example with me it will be a great help.
    please share the HTML files and the appropriate libraries.

    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •