How to show a canvas scene inside a specific div?

I like to show a scene inside a existing div on my page. Canvas always gets appended at the top. I have tried using getElementById but it did not work for me.

What Am I Missing Here? Thank you very much in advance!

<div id="preview"></div>

<script>

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    var SCREEN_WIDTH = window.innerWidth;
    var SCREEN_HEIGHT = window.innerHeight;
    var FLOOR = -250;

    var container;

    var camera, scene, controls;
    var renderer;

    var mesh;

    var textureCube;
    var cameraCube, sceneCube;

    var loader;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    init();
    animate();

    function init() {
      container = document.createElement( 'div' );
      document.body.appendChild( container );

      // CAMERA

      camera = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
      camera.position.set( 185, 40, 170 );

      controls = new THREE.OrbitControls( camera );
      controls.maxPolarAngle = Math.PI / 2;
      controls.minDistance = 200;
      controls.maxDistance = 500;

      // SCENE

      scene = new THREE.Scene();

      // SKYBOX

      sceneCube = new THREE.Scene();
      cameraCube = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
      sceneCube.add( cameraCube );

      var r = "textures/cube/pisa/";
      var urls = [ r + "px.png", r + "nx.png",
             r + "py.png", r + "ny.png",
             r + "pz.png", r + "nz.png" ];


      textureCube = THREE.ImageUtils.loadTextureCube( urls );

      var shader = THREE.ShaderLib[ "cube" ];
      shader.uniforms[ "tCube" ].value = textureCube;

      var material = new THREE.ShaderMaterial( {

        fragmentShader: shader.fragmentShader,
        vertexShader: shader.vertexShader,
        uniforms: shader.uniforms,
        depthWrite: false,
        side: THREE.BackSide

      } ),

      mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
      sceneCube.add( mesh );

      // LIGHTS

      var light = new THREE.PointLight( 0xffffff, 1 );
      light.position.set( 2, 5, 1 );
      light.position.multiplyScalar( 30 );
      scene.add( light );

      var light = new THREE.PointLight( 0xffffff, 0.75 );
      light.position.set( -12, 4.6, 2.4 );
      light.position.multiplyScalar( 30 );
      scene.add( light );

      scene.add( new THREE.AmbientLight( 0x050505 ) );

      // RENDERER

      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
      renderer.domElement.style.position = "relative";

      renderer.autoClear = false;

      container.appendChild( renderer.domElement );

      //

      renderer.gammaInput = true;
      renderer.gammaOutput = true;


      // EVENTS

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

      // LOADER

      var start = Date.now();

      // new way via CTMLoader and separate parts

      loaderCTM = new THREE.CTMLoader( true );
      document.body.appendChild( loaderCTM.statusDomElement );

      var position = new THREE.Vector3( -105, -78, -40 );
      var scale = new THREE.Vector3( 30, 30, 30 );

      loaderCTM.loadParts( "models/ctm/camaro/camaro.js", function( geometries, materials ) {

        hackMaterials( materials );

        for ( var i = 0; i < geometries.length; i ++ ) {

          var mesh = new THREE.Mesh( geometries[ i ], materials[ i ] );
          mesh.position.copy( position );
          mesh.scale.copy( scale );
          scene.add( mesh );

        }

        loaderCTM.statusDomElement.style.display = "none";

        var end = Date.now();

        console.log( "load time:", end - start, "ms" );

      }, { useWorker: true } );

    }

    //

    function hackMaterials( materials ) {

      for ( var i = 0; i < materials.length; i ++ ) {

        var m = materials[ i ];

        if ( m.name.indexOf( "Body" ) !== -1 ) {

          var mm = new THREE.MeshPhongMaterial( { map: m.map } );

          mm.envMap = textureCube;
          mm.combine = THREE.MixOperation;
          mm.reflectivity = 0.75;

          materials[ i ] = mm;

        } else if ( m.name.indexOf( "mirror" ) !== -1 ) {

          var mm = new THREE.MeshPhongMaterial( { map: m.map } );

          mm.envMap = textureCube;
          mm.combine = THREE.MultiplyOperation;

          materials[ i ] = mm;

        } else if ( m.name.indexOf( "glass" ) !== -1 ) {

          var mm = new THREE.MeshPhongMaterial( { map: m.map } );

          mm.envMap = textureCube;
          mm.color.copy( m.color );
          mm.combine = THREE.MixOperation;
          mm.reflectivity = 0.25;
          mm.opacity = m.opacity;
          mm.transparent = true;

          materials[ i ] = mm;

        } else if ( m.name.indexOf( "Material.001" ) !== -1 ) {

          var mm = new THREE.MeshPhongMaterial( { map: m.map } );

          mm.shininess = 30;
          mm.color.setHex( 0x404040 );
          mm.metal = true;

          materials[ i ] = mm;

        }

        materials[ i ].side = THREE.DoubleSide;

      }

    }

    //

    function createScene( geometry, materials, x, y, z, s ) {

      loader.statusDomElement.style.display = "none";

      geometry.center();

      hackMaterials( materials );

      var material = new THREE.MeshFaceMaterial( materials );

      mesh = new THREE.Mesh( geometry, material );
      mesh.position.set( x, y, z );
      mesh.scale.set( s, s, s );
      scene.add( mesh );

    }

    //

    function onWindowResize( event ) {

      SCREEN_WIDTH = window.innerWidth;
      SCREEN_HEIGHT = window.innerHeight;

      renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

      camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
      camera.updateProjectionMatrix();

      cameraCube.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
      cameraCube.updateProjectionMatrix();

    }


    function onDocumentMouseMove(event) {

      mouseX = ( event.clientX - windowHalfX );
      mouseY = ( event.clientY - windowHalfY );

    }

    //

    function animate() {

      requestAnimationFrame( animate );

      render();

    }

    function render() {

      controls.update();

      cameraCube.rotation.copy( camera.rotation );

      renderer.clear();
      renderer.render( sceneCube, cameraCube );
      renderer.render( scene, camera );

    }

  </script>

Answers


Remove the codelines with the container, then add after creating the renderer:

var previewDiv = document.getElementById("preview");    
previewDiv.appendChild (renderer.domElement);

You want to attach the renderer to a specific div in your HTML file, not the body like you are doing in your code.

Here is a jsfiddle: http://jsfiddle.net/L0rdzbej/25/


Need Your Help

Trying to write an alternative Hello World using Scala and Akka

scala akka

I have little previous experience with deprecated Scala actor, recently I started to learn Akka actor, they seem to be quite different.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.