three.js 求两个vector3 的夹角_微信小游戏3D开发中 hud应用(threejs方案)

最新推荐文章于 2024-09-18 23:47:33 发布

weixin_39883129

最新推荐文章于 2024-09-18 23:47:33 发布

阅读量240

点赞数

文章标签： three.js 求两个vector3 的夹角

本文链接：https://blog.csdn.net/weixin_39883129/article/details/111360204

版权

平视显示器（head up display）简称HUD。

微信小游戏官方也对hud做了详细的解释,

(18)微信3D小游戏下HUD绘制的经验分享 | 微信开放社区developers.weixin.qq.com

有兴趣的小伙伴可以自己深入了解. 解决方案比较晦涩难懂, 这里主要讲一下 threejs里hud应用的解决方案.

此文会适当加入一些threejs基本知识, 部分知识可以移步其他基础知识讲解.

首先我们使用两种camera, 正交相机 OrthographicCamera , 透视相机PerspectiveCamera

1.正交相机主要负责游戏场景的显示, camera的position位置会有一定的偏转, 而透视相机则用来显示 hud的页面, left, right, top, bottom刚好要充满整个屏幕,代码如下

   // 游戏相机 
   camera = new THREE.PerspectiveCamera(15, cameraAspect, 0.1, 100000)
    camera.position.set(0, 30, 1000)
    camera.lookAt(new THREE.Vector3(0, 0, 0));
   // hud相机
    hudCamera = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, -10, 10);

    hudCamera.updateProjectionMatrix();
    hudCamera.lookAt(new THREE.Vector3(0, 0, 0));

2. 同时设置两个不同的scene

renderer.clear();

renderer.clearDepth(); 此处尤为重要，没有加入部分安卓机无法正常渲染

hudScene = new THREE.Scene()
renderer = new THREE.WebGLRenderer({ context: ctx, alpha: true, antialias: true })
renderer.autoClear = false;  // 此处关键否则,画布会被重新擦拭
renderer.clear();
renderer.render(scene, camera)
renderer.clearDepth();
renderer.render(hudScene, hudCamera) // renderer显示两个scene的内容

3. hud面板的绘制, 这里以实时绘制分数为例

screenWidth = window.innerWidth * window.devicePixelRatio
screenHeight = window.innerHeight * window.devicePixelRatio
// 制作canvas内容
   this.canvas = wx.createCanvas()
    this.canvas.width = screenWidth //屏幕的宽高
    this.canvas.height = screenHeight
    this.context = this.canvas.getContext('2d');
this.context.clearRect(0, 0, screenWidth, screenHeight);
   
    ctx.restore();
    ctx.fillStyle = "#ffffff"
    ctx.font= "30px Arial"
    ctx.fillText(
      '得分： '+ score,
      20,
      50
    )
    ctx.save();

    // 将canvas作为材质的一面贴上去
    this.geometry = new THREE.PlaneGeometry(screenWidth, screenHeight) // 设置成屏幕的宽高
    this.scoreTexture = new THREE.CanvasTexture(this.canvas)
    this.scoreTexture.minFilter = this.scoreTexture.magFilter = THREE.LinearFilter
    this.scoreTexture.needsUpdate = true
    let material = new THREE.MeshBasicMaterial({
      map: this.scoreTexture,
      transparent: true,
      opacity: 1
    })
    let scorePlane = new THREE.Mesh(this.geometry, material)
    hudScene.add(let scorePlane)  // 将生成的平面添加到hudScene场景中即可

这样,不管原本的PerspectiveCamera相机如何移动,或者改变位置, hud场景的位置始终不变一直位于屏幕的正前方

这样hud的场景大功告成, 此处算伪码, 还是希望大家明白原理, 而后能自己写出来

这里提供一个 threejs官方提供的sample

three.js webgl - spritesthreejs.org