使用three.js和CSS3DRenderer.js构建3D空间图片

已于 2022-03-01 14:49:31 修改
阅读量1.7k 收藏
点赞数
文章标签： mesh 云原生 cloud native
于 2022-02-28 17:55:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chj_2020/article/details/123187445
版权

分为两个部分，html部分和js引入部分，自己感兴趣也可以去three.js官网看，都有源码

three.js gitHub库地址：https://github.com/mrdoob/three.js

three.js 官网 Three.js中文网

html部分：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>css3d</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
      body {
        background-color: #000000;
        margin: 0;
        cursor: move;
        overflow: hidden;
      }
      a {
        color: #ffffff;
      }
      · #info {
        position: absolute;
        width: 100%;
        color: #ffffff;
        padding: 5px;
        font-family: Monospace;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <script src="./three.js"></script>
    <script src="./CSS3DRenderer.js"></script>
    <script>
      //定义相机，场景，渲染器，是3D场景形成的三大要素
      var camera, scene, renderer;
      //定义几何体，材质，以及几何体加材质之后形成的网格
      var geometry, material, mesh;
      //生成三维向量（0,0,0），相机的目标点
      var target = new THREE.Vector3();
      //lon 经度 竖着的 有东经 西经 ；lat 维度 横着的 有南纬 北纬
      //该经纬表示相机的聚焦点，初始状态在前面
      var lon = 90,
        lat = 0;
      //同样是相机的聚焦点，上面是角度，此处转化为弧度制
      var phi = 0,
        theta = 0;
      //移动端用户输入的x，y
      var touchX, touchY;

      init();
      animate();

      function init() {
        //相机的默认位置在坐标系的原点
        camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          1,
          1000
        );
        //创建场景
        scene = new THREE.Scene();
        //右手坐标系，z朝向观察者，即相机。下面是将六个面拼接成立方体，分别对应
        //这里的图片可以krpano 或则 pano2vr工具生成6张图
        var sides = [
          {
            url: "http://inews.gtimg.com/newsapp_match/0/10974602313/0.jpg", //右侧 
            position: [-512, 0, 0],
            rotation: [0, Math.PI / 2, 0],
          },
          {
            url: "http://inews.gtimg.com/newsapp_match/0/10974602313/0.jpg", //左侧 
            position: [512, 0, 0],
            rotation: [0, -Math.PI / 2, 0],
          },
          {
            url: "http://inews.gtimg.com/newsapp_match/0/10974602313/0.jpg", //上侧 
            position: [0, 512, 0],
            rotation: [Math.PI / 2, 0, Math.PI],
          },
          {
            url: "http://inews.gtimg.com/newsapp_match/0/10974602313/0.jpg", //下侧 
            position: [0, -512, 0],
            rotation: [-Math.PI / 2, 0, Math.PI],
          },
          {
            url: "http://inews.gtimg.com/newsapp_match/0/10974602313/0.jpg", //前 
            position: [0, 0, 512],
            rotation: [0, Math.PI, 0],
          },
          {
            url: "http://inews.gtimg.com/newsapp_match/0/10974602313/0.jpg", //后 
            position: [0, 0, -512],
            rotation: [0, 0, 0],
          },
        ];
        //将六个图片添加到场景中
        for (var i = 0; i < sides.length; i++) {
          var side = sides[i];
          var element = document.createElement("img");
          element.width = 1026; // 2 pixels extra to close the gap.
          element.src = side.url;
          //CSS3DObject 是拓展出去的方法，原型是object3D，见CSS3DRenderer.js
          var object = new THREE.CSS3DObject(element);
          object.position.fromArray(side.position);
          object.rotation.fromArray(side.rotation);
          scene.add(object);
        }
        //渲染器也是拓展出来的方法，见CSS3DRenderer.js
        renderer = new THREE.CSS3DRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        //添加鼠标，手势，窗口事件
        document.addEventListener("mousedown", onDocumentMouseDown, false);
        document.addEventListener("wheel", onDocumentMouseWheel, false);
        document.addEventListener("touchstart", onDocumentTouchStart, false);
        document.addEventListener("touchmove", onDocumentTouchMove, false);

        window.addEventListener("resize", onWindowResize, false);
      }

      function onWindowResize() {
        //窗口缩放的时候，保证场景也跟随着一起缩放
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

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

      function onDocumentMouseDown(event) {
        event.preventDefault();
        //保证监听拖拽事件
        document.addEventListener("mousemove", onDocumentMouseMove, false);
        document.addEventListener("mouseup", onDocumentMouseUp, false);
      }

      function onDocumentMouseMove(event) {
        //鼠标的移动距离  currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
        var movementX =
          event.movementX || event.mozMovementX || event.webkitMovementX || 0;
        var movementY =
          event.movementY || event.mozMovementY || event.webkitMovementY || 0;
        lon -= movementX * 0.1;
        lat += movementY * 0.1;
      }

      function onDocumentMouseUp(event) {
        //保证监听拖拽事件
        document.removeEventListener("mousemove", onDocumentMouseMove);
        document.removeEventListener("mouseup", onDocumentMouseUp);
      }

      function onDocumentMouseWheel(event) {
        //相机的视觉随着鼠标滚动的距离拉进或者远离
        var fov = camera.fov + event.deltaY * 0.05;
        camera.fov = THREE.Math.clamp(fov, 10, 75);
        camera.updateProjectionMatrix();
      }

      function onDocumentTouchStart(event) {
        event.preventDefault();
        //移动端没有movement，所以直接用touchX touchY去计算移动的距离
        var touch = event.touches[0];
        touchX = touch.screenX;
        touchY = touch.screenY;
      }

      function onDocumentTouchMove(event) {
        event.preventDefault();
        var touch = event.touches[0];
        lon -= (touch.screenX - touchX) * 0.1;
        lat += (touch.screenY - touchY) * 0.1;
        touchX = touch.screenX;
        touchY = touch.screenY;
      }
      //开启动画
      function animate() {
        requestAnimationFrame(animate);
        //自动由左向右横向预览全景
        //lon +=  0.1;
        lat = Math.max(-85, Math.min(85, lat));
        phi = THREE.Math.degToRad(90 - lat); //角度转为弧度制
        theta = THREE.Math.degToRad(lon);
        //在球坐标系中算出相机的聚焦点的坐标
        target.x = Math.sin(phi) * Math.cos(theta);
        target.y = Math.cos(phi);
        target.z = Math.sin(phi) * Math.sin(theta);
        camera.lookAt(target);
        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>

js引入文件部分：

three.js可以自己到官网找一下，内容太多，就不贴出来了

CSS3DRenderer.js内容如下：

(function () {
  const _position = new THREE.Vector3();

  const _quaternion = new THREE.Quaternion();

  const _scale = new THREE.Vector3();

  class CSS3DObject extends THREE.Object3D {
    constructor(element = document.createElement("div")) {
      super();
      this.element = element;
      this.element.style.position = "absolute";
      this.element.style.pointerEvents = "auto";
      this.element.style.userSelect = "none";
      this.element.setAttribute("draggable", false);
      this.addEventListener("removed", function () {
        this.traverse(function (object) {
          if (
            object.element instanceof Element &&
            object.element.parentNode !== null
          ) {
            object.element.parentNode.removeChild(object.element);
          }
        });
      });
    }

    copy(source, recursive) {
      super.copy(source, recursive);
      this.element = source.element.cloneNode(true);
      return this;
    }
  }

  CSS3DObject.prototype.isCSS3DObject = true;

  class CSS3DSprite extends CSS3DObject {
    constructor(element) {
      super(element);
      this.rotation2D = 0;
    }

    copy(source, recursive) {
      super.copy(source, recursive);
      this.rotation2D = source.rotation2D;
      return this;
    }
  }

  CSS3DSprite.prototype.isCSS3DSprite = true; //

  const _matrix = new THREE.Matrix4();

  const _matrix2 = new THREE.Matrix4();

  class CSS3DRenderer {
    constructor(parameters = {}) {
      const _this = this;

      let _width, _height;

      let _widthHalf, _heightHalf;

      const cache = {
        camera: {
          fov: 0,
          style: "",
        },
        objects: new WeakMap(),
      };
      const domElement =
        parameters.element !== undefined
          ? parameters.element
          : document.createElement("div");
      domElement.style.overflow = "hidden";
      this.domElement = domElement;
      const cameraElement = document.createElement("div");
      cameraElement.style.transformStyle = "preserve-3d";
      cameraElement.style.pointerEvents = "none";
      domElement.appendChild(cameraElement);

      this.getSize = function () {
        return {
          width: _width,
          height: _height,
        };
      };

      this.render = function (scene, camera) {
        const fov = camera.projectionMatrix.elements[5] * _heightHalf;

        if (cache.camera.fov !== fov) {
          domElement.style.perspective = camera.isPerspectiveCamera
            ? fov + "px"
            : "";
          cache.camera.fov = fov;
        }

        if (scene.autoUpdate === true) scene.updateMatrixWorld();
        if (camera.parent === null) camera.updateMatrixWorld();
        let tx, ty;

        if (camera.isOrthographicCamera) {
          tx = -(camera.right + camera.left) / 2;
          ty = (camera.top + camera.bottom) / 2;
        }

        const cameraCSSMatrix = camera.isOrthographicCamera
          ? "scale(" +
            fov +
            ")" +
            "translate(" +
            epsilon(tx) +
            "px," +
            epsilon(ty) +
            "px)" +
            getCameraCSSMatrix(camera.matrixWorldInverse)
          : "translateZ(" +
            fov +
            "px)" +
            getCameraCSSMatrix(camera.matrixWorldInverse);
        const style =
          cameraCSSMatrix +
          "translate(" +
          _widthHalf +
          "px," +
          _heightHalf +
          "px)";

        if (cache.camera.style !== style) {
          cameraElement.style.transform = style;
          cache.camera.style = style;
        }

        renderObject(scene, scene, camera, cameraCSSMatrix);
      };

      this.setSize = function (width, height) {
        _width = width;
        _height = height;
        _widthHalf = _width / 2;
        _heightHalf = _height / 2;
        domElement.style.width = width + "px";
        domElement.style.height = height + "px";
        cameraElement.style.width = width + "px";
        cameraElement.style.height = height + "px";
      };

      function epsilon(value) {
        return Math.abs(value) < 1e-10 ? 0 : value;
      }

      function getCameraCSSMatrix(matrix) {
        const elements = matrix.elements;
        return (
          "matrix3d(" +
          epsilon(elements[0]) +
          "," +
          epsilon(-elements[1]) +
          "," +
          epsilon(elements[2]) +
          "," +
          epsilon(elements[3]) +
          "," +
          epsilon(elements[4]) +
          "," +
          epsilon(-elements[5]) +
          "," +
          epsilon(elements[6]) +
          "," +
          epsilon(elements[7]) +
          "," +
          epsilon(elements[8]) +
          "," +
          epsilon(-elements[9]) +
          "," +
          epsilon(elements[10]) +
          "," +
          epsilon(elements[11]) +
          "," +
          epsilon(elements[12]) +
          "," +
          epsilon(-elements[13]) +
          "," +
          epsilon(elements[14]) +
          "," +
          epsilon(elements[15]) +
          ")"
        );
      }

      function getObjectCSSMatrix(matrix) {
        const elements = matrix.elements;
        const matrix3d =
          "matrix3d(" +
          epsilon(elements[0]) +
          "," +
          epsilon(elements[1]) +
          "," +
          epsilon(elements[2]) +
          "," +
          epsilon(elements[3]) +
          "," +
          epsilon(-elements[4]) +
          "," +
          epsilon(-elements[5]) +
          "," +
          epsilon(-elements[6]) +
          "," +
          epsilon(-elements[7]) +
          "," +
          epsilon(elements[8]) +
          "," +
          epsilon(elements[9]) +
          "," +
          epsilon(elements[10]) +
          "," +
          epsilon(elements[11]) +
          "," +
          epsilon(elements[12]) +
          "," +
          epsilon(elements[13]) +
          "," +
          epsilon(elements[14]) +
          "," +
          epsilon(elements[15]) +
          ")";
        return "translate(-50%,-50%)" + matrix3d;
      }

      function renderObject(object, scene, camera, cameraCSSMatrix) {
        if (object.isCSS3DObject) {
          const visible = object.visible && object.layers.test(camera.layers);
          object.element.style.display = visible ? "" : "none";

          if (visible) {
            object.onBeforeRender(_this, scene, camera);
            let style;

            if (object.isCSS3DSprite) {
              _matrix.copy(camera.matrixWorldInverse);

              _matrix.transpose();

              if (object.rotation2D !== 0)
                _matrix.multiply(_matrix2.makeRotationZ(object.rotation2D));
              object.matrixWorld.decompose(_position, _quaternion, _scale);

              _matrix.setPosition(_position);

              _matrix.scale(_scale);

              _matrix.elements[3] = 0;
              _matrix.elements[7] = 0;
              _matrix.elements[11] = 0;
              _matrix.elements[15] = 1;
              style = getObjectCSSMatrix(_matrix);
            } else {
              style = getObjectCSSMatrix(object.matrixWorld);
            }

            const element = object.element;
            const cachedObject = cache.objects.get(object);

            if (cachedObject === undefined || cachedObject.style !== style) {
              element.style.transform = style;
              const objectData = {
                style: style,
              };
              cache.objects.set(object, objectData);
            }

            if (element.parentNode !== cameraElement) {
              cameraElement.appendChild(element);
            }

            object.onAfterRender(_this, scene, camera);
          }
        }

        for (let i = 0, l = object.children.length; i < l; i++) {
          renderObject(object.children[i], scene, camera, cameraCSSMatrix);
        }
      }
    }
  }

  THREE.CSS3DObject = CSS3DObject;
  THREE.CSS3DRenderer = CSS3DRenderer;
  THREE.CSS3DSprite = CSS3DSprite;
})();

效果：

3d空间图片

小白的蓝色生活
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
three.js CSS3DRenderer、CSS3DObject渲染HTML标签
yinge0508的博客
02-01 1566
【代码】three.js CSS3DRenderer渲染HTML标签。
three.js 实现全景图360°
xiao_a_gang的博客
08-16 6690
&lt;!DOCTYPE html&gt; &lt;!-- saved from url=(0048)https://threejs.org/examples/css3d_panorama.html --&gt; &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
使用ThreeJs搭建BIM模型浏览器-CSS3D图层
疯狂的蒲公英
04-23 2879
CSS3D这种技术有些人叫它图层叠加，其实原理就是图层叠加。CSS3D的本质是在Canvas之上罩了一层透明的div，然后把原本的DOM元素通过CSS的变换实现了立体感。 用户期望的结果像这样： 如何实现的呢，首先我们得先学习一下threejs提供的示例Demo http://www.qmodel.cn/threejs/three/examples/?q=css3d#css3d_periodictable 首先它不是几何信息，只是一些div通过css控制的样式，例如： .element.
CSS3DRenderer与WEBGLRenderder共用问题
最新发布
weixin_49065241的博客
04-18 149
CSS3DRenderer与WEBGLRenderder共用问题
threejs元素周期表-CSS3DRenderer
qq_43157227的博客
11-26 2106
threejs元素周期表-CSS3DRenderer
Three.js前端3D开发：使用 CSS3DRenderer 渲染全景图
weixin_51678651的博客
08-07 966
此实例主要通过使用 THREE.CSS3DRenderer 和 THREE.CSS3DObject,实现以鼠标拖曳方式在天空盒(即模拟人站在真实的空间中)中查看全景图。
Three.js前端3D开发：使用CSS3DRenderer渲染全景图
08-07
使用 CSS3DRenderer 渲染全景图
CSS3D.js, 用于 Three.js的CSS 3D 渲染器.zip
09-18
CSS3D.js, 用于 Three.js的CSS 3D 渲染器 CSS3D.js由 Steven Wittens 用于 Three.js的CSS 3D 渲染器注意：这个库现在已经过时了，因为 Three.js 拥有自己的CSS 3D 呈现器插件，它集成在一个更清晰的样式中。...
three-css2drenderer:threejs正式将CSS2DRender.js与npm一起应用
05-15
threejs正式将CSS2DRender.js与npm一起应用 安装 npm i --save three-css2drender 用法 import * as THREE from 'three' import { CSS2DRenderer , CSS2DObject } from 'three-css2drender' let scene = new THREE...
d3threejs使用D3和THREEjs实现的CSS3D变换
08-10
d3-threejs：使用D3和THREE.js实现的CSS 3D变换
vue页面引入three.js实现3d动画场景操作
11-19
three.js是JavaScript编写的WebGL第三方库。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。 我们开始引入three.js相关插件。 1、首先利用淘宝镜像...
VR看房threejs.rar
07-06
VR看房
使用 three.js 中的 CSS3DRenderer 实现 3d 卡片的效果
weixin_34007020的博客
04-16 6959
前言 最近要做一个 3D 卡片的效果，设计图如下： 第一次尝试 第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 第二次尝试 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可能是相中了 CSS3DRenderer 与 ...
three.js CSS3DObject在非全屏场景下浏览器缩放尺寸导致位置偏移问题（vue）
HQBCK的博客
04-10 431
经过多次测试，在flex布局或者百分比布局下，threejs场景盒子左侧的盒子宽度会出现小数的情况，猜测three.js在进行CSS3DObject定位操作的时候会因为小数问题导致精度丢失。1、不使用flex布局或者百分比布局，使用精确的宽度进行布局。2、使用js设置精准的盒子宽度。
Three.js CSS3D、CSS2D及精灵的区别
阿星小栈
01-10 711
Three.js CSS3D、CSS2D及精灵的区别
Vue集成three.js 3D场景渲染示例
moxiaomomo的专栏
07-23 3641
Demo工程目录结构如下所示 │ .browserslistrc │ .eslintrc.js │ .gitignore │ babel.config.js │ package-lock.json │ package.json │ README.md │ tsconfig.json │ ├─public │ │ favicon.ico │ │ index.html │ │ │ └─model │ agvCar.gltf │ house001.
js绘制超炫酷3D化学元素周期表
kongzhonghu的专栏
09-19 1228
js单页面在线绘制化学元素周期表
基于Echarts实现可视化数据大屏3D元素周期表(1页)
HTML网页设计
08-16 653
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ......
使用ThreeJs从零开始构建3D智能仓库——第三章（选中物体与特效）
热门推荐
homula123的博客
09-29 1万+
使用ThreeJs从零开始构建3D智能仓库——第三章写在前面——目录结构如何添加墙壁、窗户、门添加三面实心的墙壁创建挖去门窗的墙安装门及窗户完整的代码结束语 写在前面——目录结构 这一章我们来完成激动人心的，关于如何鼠标单击选中一个物体，并让该物体周围闪烁白光，并在鼠标点击位置的上方显示该物体的名字。如下图所示： 在开始这章内容的讲解之前，我想先给大家推荐下项目的目录结构，因为这一章我们将要引入...
解释一下three.js中CSS3DRenderer和CSS3DSprite的用法并给我一些示例进行参考
04-13
CSS3DRenderer和CSS3DSprite是three.js中的两个组件，用于创建CSS3D场景和CSS3D对象。 CSS3DRenderer可以将CSS3D元素（如HTML元素）渲染为three.js场景的一部分。它的用法类似于WebGLRenderer，但它是基于CSS3D变换...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白的蓝色生活

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值