视图辅助

视图辅助 · View Helper · ▶ 在线运行案例

• 案例合集： 三维可视化功能案例（threehub.cn）

• 开源仓库github地址： https://github.com/z2586300277/three-cesium-examples

• **400个案例代码: ** 网盘链接

你将学到什么

• ViewHelper 右下角 orientation gizmo
• renderer.autoClear = false 叠加绘制
• 主场景 render 后再 viewHelper.render(renderer)

效果说明

网格场景右下角显示 XYZ 方向小控件，点击可快速切换标准视角（Three.js r152+ ViewHelper 内置交互）。

核心概念

renderer.autoClear = false;
const viewHelper = new ViewHelper(camera, renderer.domElement);

function animate() {
    controls.update();
    renderer.render(scene, camera);
    viewHelper.render(renderer);  // 叠在小角落
    requestAnimationFrame(animate);
}

编辑器、Blender 式视口方向指示同款思路。

代码要点

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper.js'

const box = document.getElementById('box')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000)

camera.position.set(0, 10, 10)

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })

renderer.setSize(box.clientWidth, box.clientHeight)

box.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)

controls.enableDamping = true

scene.add(new THREE.AxesHelper(5), new THREE.GridHelper(10, 10))

const viewHelper = new ViewHelper(camera, renderer.domElement)

renderer.autoClear = false // 需要将自动清除关闭

animate()

function animate() {

    controls.update()

    // renderer.clear() // 可能需要的清除操作

    renderer.render(scene, camera)

    viewHelper.render(renderer)

    requestAnimationFrame(animate)

}

完整源码：GitHub

小结