deck.gl 叠加 three.js 物体

最新推荐文章于 2026-06-23 15:54:10 发布

原创

最新推荐文章于 2026-06-23 15:54:10 发布 · 533 阅读

标签

#javascript #dec

收录于

文章介绍了如何在DeckGL框架中结合three.js创建一个交互式的3D视图，通过叠加对象和控制相机来展示3D几何体，如立方体和网格辅助工具，以及如何处理视口变换矩阵以实现精确渲染。

deck.gl 叠加 three.js 物体

import {
   
    Matrix4 } from "@math.gl/core";
import {
   
    Layer, LayerContext } from "@deck.gl/core";
import DeckGL from "@deck.gl/react";
import {
   
    OrbitView } from "@deck.gl/core";
import * as THREE from "three";
import {
   
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";

type ThreeLayerProps = {
   
   
  scene: THREE.Scene;
  center: [number, number, number];
};
class ThreeLayer extends Layer<ThreeLayerProps> {
   
   
  state!: {
   
   
    renderer: THREE.WebGLRenderer;
    camera: THREE.PerspectiveCamera;
    controls: OrbitControls;
    scene: THREE.Scene;
  };

  initializeState(context: LayerContext): void {
   
   
    const renderer = new THREE.WebGLRenderer({
   
   
      antialias: true,
      context: context.gl,
    }