学习threejs 在WebGL中混合HTML页面

最新推荐文章于 2024-05-30 17:57:45 发布

啊辉的小号

最新推荐文章于 2024-05-30 17:57:45 发布

阅读量5.1k

点赞数 5

分类专栏：菜鸟学three 文章标签： html5

本文链接：https://blog.csdn.net/weixin_38527697/article/details/104991206

版权

菜鸟学three 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

近期遇到一个问题，就是在webgl 中如加载html页面，翻遍了各个网站终于找到解决方案：

收先奉上大神的文章 http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ 可能需要爬过一个很高的wall，出去才能观看。

看了看时间是13年写的，想象那个时候，我还不知道html为何物

其中的主要思想就是，同时用到了 webglRenderer 和 CssRenderer 同时渲染：

这是老外的原话。

上一下主要代码

1.引入两个渲染器：

  <script src="./build//three.js"> </script>  //内部自带webgl渲染器
  <script src="./build/renderers/CSS3DRenderer.js"></script> //css3渲染器

2.创建两个渲染器并且添加到两个场景里：

glRenderer = createGlRenderer();//创建webgl 渲染器
cssRenderer = createCssRenderer();//创建 css 渲染器
document.body.appendChild(cssRenderer.domElement);
cssRenderer.domElement.appendChild(glRenderer.domElement);
glScene = new THREE.Scene();  //创建两个场景
cssScene = new THREE.Scene();

  function update() {

    controls.update();

    glRenderer.render(glScene, camera);

    cssRenderer.render(cssScene, camera);

    requestAnimationFrame(update);
  }

3.创建三维物体，放到三维场景中，创建dom物体，放到css 场景中

奉上示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ADN CSS3D Demo</title>
  <style>
    body {
      background-color: #ffffff;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="build/three.min.js"></script>
<script src="build/controls/TrackballControls.js"></script>
<script src="build/renderers/CSS3DRenderer.js"></script>

<script>

  ///
  // CSS3DRenderer Demo
  // By Philippe Leefsma, July 2015
  ///

  //References:
  //http://codereply.com/answer/83pofc/threejs-properly-blending-css3d-webgl.html
  //http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

  var controls, camera, glScene, cssScene, glRenderer, cssRenderer;

  ///
  // Creates WebGL Renderer
  //
  ///
  function createGlRenderer() {

    var 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;

    return glRenderer;
  }

  ///
  // Creates CSS Renderer
  //
  ///
  function createCssRenderer() {

    var 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;

    return cssRenderer;
  }

  ///
  // Creates plane mesh
  //
  ///
  function createPlane(w, h, position, rotation) {

    var material = new THREE.MeshBasicMaterial({
      color: 0x000000,
      opacity: 0.0,
      side: THREE.DoubleSide
    });

    var geometry = new THREE.PlaneGeometry(w, h);

    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;

    return mesh;
  }

  ///
  // Creates CSS object
  //
  ///
  function createCssObject(w, h, position, rotation, url) {

    var html = [

      '<div style="width:' + w + 'px; height:' + h + 'px;">',
      '<iframe src="' + url + '" width="' + w + '" height="' + h + '">',
      '</iframe>',
      '</div>'

    ].join('\n');

    // var div = document.createElement('div');
    // img.url='resources/la.png'

    var iframe =document.createElement('iframe')
    iframe.src='https://www.baidu.com';
    iframe.style.width = w+'px';
				iframe.style.height = h+'px';
				iframe.style.border = '0px';

    // $(div).html(html);
    // div.innerHTML=html
    // console.log(div.innerHTML)
    // document.getElementsByTagName('div')[0].innerHTML(html)
    // console.log(document.getElementsByTagName('div'))
    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;

    return cssObject;
  }

  ///
  // Creates 3d webpage object
  //
  ///
  function create3dPage(w, h, position, rotation, url) {

    var plane = createPlane(
        w, h,
        position,
        rotation);

    glScene.add(plane);

    var cssObject = createCssObject(
        w, h,
        position,
        rotation,
        url);

    cssScene.add(cssObject);
  }

  ///
  // Creates material with random color
  //
  ///
  function createColoredMaterial() {

    var material = new THREE.MeshBasicMaterial({
      color: Math.floor(Math.random() * 16777215),
      shading: THREE.FlatShading,
      side: THREE.DoubleSide
    });

    return material;
  }

  ///
  // Creates 3D geometry to place in the scene
  //
  ///
  function create3dGeometry() {

    var mesh1 = new THREE.Mesh(
      new THREE.CylinderGeometry(0, 200, 300, 20, 4),
      createColoredMaterial());

    mesh1.position.x = 0;
    mesh1.position.y = -300;
    mesh1.position.z = 400;

    glScene.add(mesh1);

    var mesh2 = new THREE.Mesh(
      new THREE.BoxGeometry(200, 200, 200),
      createColoredMaterial());

    mesh2.position.x = -300;
    mesh2.position.y = -300;
    mesh2.position.z = 400;

    glScene.add(mesh2);


    var mesh3 = new THREE.Mesh(
        new THREE.SphereGeometry(100, 128, 128),
        createColoredMaterial());

    mesh3.position.x = 500;
    mesh3.position.y = -300;
    mesh3.position.z = 400;

    glScene.add(mesh3);
  }

  ///
  // Initializes scene
  //
  ///
  function initialize() {

    camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      1,
      10000);

    camera.position.set(0, 100, 3000);

    controls = new THREE.TrackballControls(camera);

    glRenderer = createGlRenderer();
    cssRenderer = createCssRenderer();

    //document.body.appendChild(glRenderer.domElement);

    document.body.appendChild(cssRenderer.domElement);
    cssRenderer.domElement.appendChild(glRenderer.domElement);

    glScene = new THREE.Scene();
    cssScene = new THREE.Scene();

    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);

    create3dPage(
      1000, 1000,
      new THREE.Vector3(-1050, 0, 400),
      new THREE.Vector3(0, 45 * Math.PI / 180, 0),
      'https://www.baidu.com');

    create3dPage(
      900, 1000,
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(0, 0, 0),
      'https://www.baidu.com');

    create3dPage(
      1000, 1000,
      new THREE.Vector3(1050, 0, 400),
      new THREE.Vector3(0, -45 * Math.PI / 180, 0),
      'https://www.baidu.com');

    create3dGeometry();

    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();
</script>
</body>
</html>

最后实现的效果：

啊辉的小号

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
3
评论
学习threejs 在WebGL中混合HTML页面

近期遇到一个问题，就是在webgl 中如加载html页面，翻遍了各个网站终于找到解决方案：收先奉上大神的文章http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ 可能需要爬墙出去才能观看。看了看时间是13年写的，想象那个时候，我还不知道html为何物其中的主要思想就...
复制链接

扫一扫