Embed 3D model viewer

Question

I'm trying to implement this 3D model viewer, however I want to embed it into an already set div instead of making a new one as this does. So I've edited the code like so but it hasn't worked. Any help would be appreciated.

<script>
    // This is where our model viewer code goes.
    var container;
    var camera, scene, renderer;
    var mouseX = 0, mouseY = 0;

    var windowHalfX = document.getElementById('viewer').clientHeight / 2;
    var windowHalfY = document.getElementById('viewer').clientHeight / 2;

    init();
    animate();

    // Initialize
    function init() {
      // This <div> will host the canvas for our scene.
      container = document.getElementById( 'viewer' );
      //document.body.appendChild( container );

      // You can adjust the cameras distance and set the FOV to something
      // different than 45°. The last two values set the clippling plane.
      camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
      camera.position.z = 100;

      // These variables set the camera behaviour and sensitivity.
      controls = new THREE.TrackballControls( camera );
      controls.rotateSpeed = 5.0;
      controls.zoomSpeed = 5;
      controls.panSpeed = 2;
      controls.noZoom = false;
      controls.noPan = false;
      controls.staticMoving = true;
      controls.dynamicDampingFactor = 0.3;

      // This is the scene we will add all objects to.
      scene = new THREE.Scene();

      // You can set the color of the ambient light to any value.
      // I have chose a completely white light because I want to paint
      // all the shading into my texture. You propably want something darker.
      var ambient = new THREE.AmbientLight( 0xffffff );
      scene.add( ambient );

      // Uncomment these lines to create a simple directional light.
      // var directionalLight = new THREE.DirectionalLight( 0xffeedd );
      // directionalLight.position.set( 0, 0, 1 ).normalize();
      // scene.add( directionalLight );

      // Texture Loading
      var manager = new THREE.LoadingManager();
      manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
      };
      var texture = new THREE.Texture();
      var loader = new THREE.ImageLoader( manager );

      // You can set the texture properties in this function. 
      // The string has to be the path to your texture file.

      loader.load( 'img/sickletexture.png', function ( image ) {
        texture.image = image;
        texture.needsUpdate = true;
        // I wanted a nearest neighbour filtering for my low-poly character,
        // so that every pixel is crips and sharp. You can delete this lines
        // if have a larger texture and want a smooth linear filter.
        texture.magFilter = THREE.NearestFilter;
        texture.minFilter = THREE.NearestMipMapLinearFilter;
      } );

      // OBJ Loading
      var loader = new THREE.OBJLoader( manager );

      // As soon as the OBJ has been loaded this function looks for a mesh
      // inside the data and applies the texture to it.
      loader.load( 'obj/sickle.obj', function ( event ) {
        var object = event;
        object.traverse( function ( child ) {
          if ( child instanceof THREE.Mesh ) {
            child.material.map = texture;
          }
        } );

        // My initial model was too small, so I scaled it upwards.
        object.scale = new THREE.Vector3( 2, 2, 2 );

        // You can change the position of the object, so that it is not
        // centered in the view and leaves some space for overlay text.
        object.position.y -= 2.5;
        scene.add( object );
      });

      // We set the renderer to the size of the window and
      // append a canvas to our HTML page.
      renderer = new THREE.WebGLRenderer();
      renderer.setSize( document.getElementById('viewer').innerWidth, document.getElementById('viewer').innerHeight );
      container.appendChild( renderer.domElement );
    }

    // The Loop 
    function animate() {
      // This function calls itself on every frame. You can for example change
      // the objects rotation on every call to create a turntable animation.
      requestAnimationFrame( animate );

      // On every frame we need to calculate the new camera position
      // and have it look exactly at the center of our scene.
      controls.update();
      camera.lookAt(scene.position);
      renderer.render(scene, camera);
    }

  </script>

Answer 1

I found a rather easy solution, I'm surprised I did not find it earlier.

Create the 3D in a seperate html document (using the original script, not the edited one in the OP), then in the div <embed src="3d.html"></embed>

Answer 2

I'm trying to get things to work myself and this code works for me with the latest version (66) of three. Its a little different to you example as I am using a vrml model rather than an obj and I handle the material differently. But it does run fine.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - loaders - vrml loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            threewindow {
                border: 1px solid black;
                }
        </style>

        <script src="../three.js/build/three.min.js"></script>
        <script src="../three.js/examples/js/controls/TrackballControls.js"></script>
        <script src="../three.js/examples/js/loaders/VRMLLoader.js"></script>
        <script src="../three.js/examples/js/Detector.js"></script>
        <script src="../three.js/examples/js/libs/stats.min.js"></script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
            var container, stats;
            var camera, controls, scene, renderer;
            var cross;

            function init() {
                alert("init");
                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
                camera.position.z = 6;

                controls = new THREE.TrackballControls( camera );
                controls.rotateSpeed = 5.0;
                controls.zoomSpeed = 5;
                controls.panSpeed = 2;
                controls.noZoom = false;
                controls.noPan = false;
                controls.staticMoving = true;
                controls.dynamicDampingFactor = 0.3;

                scene = new THREE.Scene();
                scene.add( camera );

                var sphereMaterial =
                      new THREE.MeshLambertMaterial(
                        {
                          color: 0xCC0000
                        });

                // light

                var dirLight = new THREE.DirectionalLight( 0xffffff );
                dirLight.position.set( 200, 200, 1000 ).normalize();

                camera.add( dirLight );
                camera.add( dirLight.target );

                var loader = new THREE.VRMLLoader();
                loader.addEventListener( 'load', function ( event ) {
                    var object = event.content; 
                    object.traverse( function ( child ) {
                          if ( child instanceof THREE.Mesh ) {
                            //child.material.map = texture;
                            //child.material = sphereMaterial;
                            child.material.side = THREE.DoubleSide;
                          }
                       } );

                    scene.add(object);

                } );
//              loader.load( "models/vrml/house.wrl" );
                loader.load( "cayley.wrl" );

                // renderer

                renderer = new THREE.WebGLRenderer( { antialias: false } );
                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer.setSize(200, 200);
                document.getElementById("threewindow").appendChild(renderer.domElement);
//              container = document.createElement( 'div' );
//              document.body.appendChild( container );
//              container.appendChild( renderer.domElement );

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

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

                animate();
            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

                controls.handleResize();

            }

            function animate() {
                requestAnimationFrame( animate );
                controls.update();
                renderer.render( scene, camera );
                //stats.update();
            }

        </script>

    </head>

    <body onload="init()">

    <h1>Cubic surfaces</h1>
    <p>All the surfaces defined by cubics equations.</p>
    <ul><li><a href="parade/Cubics.php">Singularities of cubic surfaces</a>.</li>
    <li>A <a href="parade/index.html">pictorial introduction</a> to singularity theory.</li>
    </ul>
    <div id="threewindow"></div>


    </body>
</html>