<meta name="viewport" content="width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

  var controls, camera, glScene, cssScene, glRenderer, cssRenderer;
 
  ///////////////////////////////////////////////////////////////////
  // Initializes scene
  //
  ///////////////////////////////////////////////////////////////////
  function initialize() {
    /**
     * 1、创建相机
     */
    camera = new THREE.PerspectiveCamera(
            50,
            window.innerWidth / window.innerHeight,
            0.01,
            1000);

    camera.position.set(0, 5.5, 25);


    /**
     * 2、创建webGLRenderer
     */
    glRenderer = new THREE.WebGLRenderer({alpha:true});

    glRenderer.setClearColor(0xECF8FF);
    glRenderer.setPixelRatio(window.devicePixelRatio);
    glRenderer.setSize(window.innerWidth, window.innerHeight);

    glRenderer.domElement.style.position = 'absolute';
    glRenderer.domElement.style.zIndex = 1;
    glRenderer.domElement.style.top = 0;
    /**
     * 3、控制器
     */
    controls = new THREE.OrbitControls(camera, glRenderer.domElement);
    /**
     * 4、cssRenderer
     */
    cssRenderer = new THREE.CSS3DRenderer();

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

    cssRenderer.domElement.style.position = 'absolute';
    // glRenderer.domElement.style.zIndex = 0;
    cssRenderer.domElement.style.top = 0;
    /**
     * 5、加载到dom中
      */
    document.body.appendChild(cssRenderer.domElement);
    cssRenderer.domElement.appendChild(glRenderer.domElement);

    /**
     * 6、创建scene
     */
    glScene = new THREE.Scene();
    cssScene = new THREE.Scene();
    /**
     * 7、加入灯光
     */
    var ambientLight = new THREE.AmbientLight(0x555555);
    glScene.add(ambientLight);
 
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set( -.5, .5, -1.5 ).normalize();
    glScene.add(directionalLight);




   var position=new THREE.Vector3(0, 0, 0)
   var rotation=  new THREE.Vector3(0, 45 * Math.PI / 180, 0)
    var material = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
      // blending:THREE.NoBlending,
       opacity:0.5,
      transparent:true
    });

    var geometry = new THREE.PlaneGeometry(10, 10);

    var mesh = new THREE.Mesh(geometry, material);

    mesh.position.x = position.x;
    mesh.position.y = position.y;
    mesh.position.z = position.z;

    mesh.rotation.x = rotation.x;
    mesh.rotation.y = rotation.y;
    mesh.rotation.z = rotation.z;
    glScene.add(mesh)

    var iframe =document.createElement('div')
    iframe.textContent='https://www.baidu.com';
    iframe.style.width = 10+'px';
    iframe.style.height = 10+'px';
    iframe.style.border = '1px sloid red';
    var cssObject = new THREE.CSS3DObject(iframe);

    cssObject.position.x = position.x;
    cssObject.position.y = position.y;
    cssObject.position.z = position.z;

    cssObject.rotation.x = rotation.x;
    cssObject.rotation.y = rotation.y;
    cssObject.rotation.z = rotation.z;
    cssScene.add(cssObject);
    var material = new THREE.MeshBasicMaterial({
      color: Math.floor(Math.random() * 16777215),
      shading: THREE.FlatShading,
      side: THREE.DoubleSide
    });
    var mesh1 = new THREE.Mesh(
            new THREE.CylinderGeometry(0, 1, 3, 20, 4),
            material);

    mesh1.position.x = 0;
    mesh1.position.y = -3;
    mesh1.position.z = 5;

    glScene.add(mesh1);
 
    update();
  }
 
  ///////////////////////////////////////////////////////////////////
  // Updates scene
  //
  ///////////////////////////////////////////////////////////////////
  function update() {
 
    // controls.update();
 
    glRenderer.render(glScene, camera);
 
    cssRenderer.render(cssScene, camera);
 
    requestAnimationFrame(update);
  }
 
  ///////////////////////////////////////////////////////////////////
  // On document ready
  //
  ///////////////////////////////////////////////////////////////////
  // $(document ).ready(function() {
  //   initialize();
  // });
  initialize();