专栏首页技术综合ThreeJS实现船行效果

ThreeJS实现船行效果

最近确实业务上需要, 简单学习了ThreeJS的API 文章中代码不全, 需要了解的可以访问仓库: https://github.com/klren0312/threejs_ocean_ship 在线示例(很慢)

效果图

一. 相关库

项目里用到的相关库, 基本都在ThreeJS项目文件夹里https://github.com/mrdoob/three.js/tree/dev/examples/js

  1. three.js 核心库: https://github.com/mrdoob/three.js/blob/dev/build/three.min.js
  2. OrbitControls 相机控制库: https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js 相机有很多种控制方式, 具体可以查看文档
  3. OBJLoader 模型加载库: https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/OBJLoader.js
  4. MTLLoader贴图加载库: https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/MTLLoader.js
  5. CSS2DRenderer 2D渲染库: https://github.com/mrdoob/three.js/blob/dev/examples/js/renderers/CSS2DRenderer.js
  6. water 水纹库: https://github.com/mrdoob/three.js/blob/dev/examples/js/objects/Water.js

二. 开发中遇到的小问题

1. 鼠标移动或者点击到导入的模型, 如何捕获

解决方法: 官方提供了射线捕获的接口 raycaster.intersectObjects, 但是只能识别自建的Mesh模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来 所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给raycaster.intersectObjects, 即可识别 1. 递归函数

function getMesh(s, arr, name = '') {
  s.forEach(v => {
    if (v.children && v.children.length > 0) {
      getMesh(v.children, arr, v.name)
    } else {
      if (v instanceof THREE.Mesh) {
        if (name) {
          v.name = name
        }
        arr.push(v)
      }
    }
  })
}

2.mtlLoader的onProgress事件

var onProgress = function (xhr) {
    if (xhr.lengthComputable) {
      var percentComplete = xhr.loaded / xhr.total * 100;
      // 每次加载完毕将mesh放进数组
      if (percentComplete === 100) {
        objectArr = []
        scene.traverse(function (s) {
          if (s && s.type === 'Scene') {
            getMesh(s.children, objectArr)
          }
        })
      }
    }
  }

3.鼠标点击事件

function handleMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
  raycaster.setFromCamera(mouse, camera)
  var intersects = raycaster.intersectObjects(objectArr)
  // console.log('当前点击的Mash', intersects)
  if (intersects && intersects.length > 0) {
  }
}

2. 如何显示2D平面?

2D平面展示有两种, 一种是这个项目里的鼠标触碰直升机的提示牌, 时刻与摄像头在同一角度的2D平面; 另一种是只在一个方向上可见的2D平面

多角度可见的2D平面

固定角度可见的2D平面

解决方法

  1. 首先是第一种, 多角度的2D平面. 我们需要用到CSS2DRenderer对其进行渲染, 即创建一个DOM, 将其赋给CSS2DRenderer, 下面代码没有设置坐标, 我是放在鼠标移动事件里设置的
  var planeInfo = document.createElement('div')
  planeInfo.className = 'the-modal'
  planeInfo.innerHTML = '<div>治电护航直升机</div>' +
    '<div>ZZES 007 </div>'
  planeInfo.classList.add('hide')
  infoModal = new THREE.CSS2DObject(planeInfo)
  scene.add(infoModal)
  1. 第二种, 固定角度2D平面. 原理是, 创建一个矩形Mesh, 然后创建一个canvas内容, 作为其贴图.
var tipsGeo2 = new THREE.PlaneBufferGeometry(3, 1, 1, 1)
var tips2 = new THREE.Mesh(tipsGeo2, createFont('测试测试', {bgColor: '#E6A23C', fontColor: '#FFFFFF'}))
tips2.position.set(9, 1.5, -3)
tips2.rotation.y = 3.15
scene.add(tips2)

封装的canvas函数

/**
 * text 文字
 * options.fontColor 文字颜色
 * options.bgColor 背景颜色
 */
function createFont (text, options={bgColor: '', fontColor: ''}) {
    var canvas = document.createElement("canvas");
    canvas.width = 512;
    canvas.height = 128;
    var c = canvas.getContext('2d');
    // 矩形区域填充背景
    c.fillStyle = options.bgColor || '#ff0000';
    c.fillRect(0, 0, 512, 128);
    c.beginPath();
    // 文字
    c.beginPath();
    c.translate(256,64);
    c.fillStyle = options.fontColor || '#ffffff'; //文本填充颜色
    c.font = 'bold 36px 微软雅黑'; //字体样式设置
    c.textBaseline = 'middle'; //文本与fillText定义的纵坐标
    c.textAlign = 'center'; //文本居中(以fillText定义的横坐标)
    c.fillText(text, 0, 0);
    var texture = new THREE.CanvasTexture(canvas);
    var textMaterial = new THREE.MeshPhongMaterial({
        map: texture, // 设置纹理贴图
        // side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.9
    });
    textMaterial.map.needsUpdate = true
    return textMaterial
}

3. 如何让船动起来?

解决方法: 动画一般就放在固定的动画函数里, 通过requestAnimationFrame维持60帧

function initAnimate() {
    renderer.render(scene, camera)
    labelRenderer.render(scene, camera)
    if (movePlane) {
        movePlane.position.x -= 0.2
        if (movePlane.position.x < -10) {
            movePlane.position.y += 0.02
        }
        if (movePlane.position.x < -100) {
            movePlane.position.x = 35
            movePlane.position.y = 0
        }
        planeAnimateModal.position.set(movePlane.position.x, movePlane.position.y + 3, movePlane.position.z)
        planeAnimateModal.element.classList.remove('hide')
    }
    requestAnimationFrame(initAnimate)
}

4. 屏幕大小变化, 如何等比缩放?

解决方法:

function handleWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}
window.addEventListener('resize', handleWindowResize, false)

三.参考资料

  1. threejs文档: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
  2. threejs官方示例: https://threejs.org/examples/#webgl_animation_cloth
  3. threejs官方github: https://github.com/mrdoob/three.js

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实习第六周

    https://stackoverflow.com/questions/11872832/how-to-respond-to-clicks-on-a-check...

    治电小白菜
  • 实习第十一周,第十二周

    title属性是必须的,用来指定通知的标题,格式为字符串。options属性是可选的,格式为一个对象,用来设定各种设置

    治电小白菜
  • 搭建简易的物联网服务端和客户端-第一次融合(五)

    治电小白菜
  • 手把手教你构建食物识别AI:小白轻易可上手,人气高赞有Demo | 资源

    最近,工程师Nidhin Pattaniyil和Reshama Shaikh写了一篇从零开始构建网页&App版食物识别AI的教程,有数据、有教程、有Demo,简...

    量子位
  • webpack多页面开发与懒加载hash解决方案

    本文内容只适用于webpack v1版本,webpack v2已经修复了hash计算规则。 之前讨论了webpack的hash与chunkhash的区别以及各...

    寒月十八
  • Docker下,实战mongodb副本集(Replication)

    在《Docker下,极速体验mongodb》一文中我们体验了单机版的mongodb,实际生产环境中,一般都会通过集群的方式来避免单点故障,今天我们就在Docke...

    程序员欣宸
  • mysql 导入数据太慢,来教你实用干货

    日常开发中,大家肯定遇到过这些需求:“ 数据迁移、数据恢复、新建从库 ” 等等一系列任务,因为做这些需求我们肯定知道,会涉及到 大量的数据 的处理。

    八点半的Bruce、D
  • Webpack中hash的用法

    这种带哈希值的文件名,可以帮助实现静态资源的长期缓存,在生产环境中非常有用。关于这一点的详细内容,可以参考这篇久远的大公司里怎样开发和部署前端代码。

    前端博客 : alili.tech
  • 最大似然估计(MLE)原理及计算方法

    1)有两堆球,其中A堆有99个白球和1个黑球,B堆有99个黑球和1个白球。假如随便摸一个球,发现是黑球,那么这个球更有可能来自于哪一堆?

    生信编程日常
  • React.js 小书 Lesson9 - 事件监听

    在 React.js 里面监听事件是很容易的事情,你只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性,例如我们现在要给 ...

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券