优雅永不过时 · Elegant Always · ▶ 在线运行案例

优雅永不过时

你将学到什么

  • OrbitControls 相机轨道交互
  • BufferGeometry 自定义顶点/索引数据

效果说明

本案例演示 优雅永不过时 效果：基于 WebGL 实现「优雅永不过时」可视化效果，附完整可运行源码；核心用到 OrbitControls、BufferGeometry。建议先打开文首在线案例查看动态画面，再对照下方源码逐步理解。

核心概念

  • Scene / Camera / WebGLRenderer 构成最小渲染闭环；大场景可开 logarithmicDepthBuffer 缓解 Z-fighting。
  • OrbitControls 提供轨道旋转/缩放；开启 enableDamping 后需在 animate 中 controls.update()。
  • 阅读下方完整源码时，建议从 init / load / animate 三条主线入手，再深入 shader 与工具函数。

实现步骤

  1. 搭建 Scene、PerspectiveCamera、WebGLRenderer，挂载 canvas 并处理 resize
  2. 创建 OrbitControls（及 Raycaster 等交互控件，若源码包含）
  3. 在 requestAnimationFrame 循环中更新状态并 render（Cesium 为 viewer.render 或自动渲染）

代码要点

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { MeshSurfaceSampler } from 'three/examples/jsm/math/MeshSurfaceSampler.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 100, 300)

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

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

let sampler = null

let path = null

new OBJLoader().load(

    FILE_HOST + 'files/model/z2586300277.obj',

    (obj) => {

        sampler = new MeshSurfaceSampler(obj.children[0]).build();

        path = new Path();

        scene.add(path.line);

        renderer.setAnimationLoop(render);

    }

)

const tempPosition = new THREE.Vector3();

class Path {
    constructor() {

        this.vertices = [];

        this.geometry = new THREE.BufferGeometry();

        this.material = new THREE.LineBasicMaterial({ color: 0xa58fb5, transparent: true, opacity: 0.5 });

        this.line = new THREE.Line(this.geometry, this.material);

        sampler.sample(tempPosition);

        this.previousPoint = tempPosition.clone()

    }
    update() {

        let pointFound = false;

        while (!pointFound) {

            sampler.sample(tempPosition);

            if (tempPosition.distanceTo(this.previousPoint) < 20) {

                this.vertices.push(tempPosition.x, tempPosition.y, tempPosition.z);

                this.previousPoint = tempPosition.clone();

                pointFound = true;

            }

        }

        this.geometry.setAttribute("position", new THREE.Float32BufferAttribute(this.vertices, 3));

    }

}

function render() {

    if (path.vertices.length < 50000) {

        Array.from({ length: 10 }).forEach(() => path.update())

    }

    controls.update();

    renderer.render(scene, camera);

}

window.onresize = () => {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

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

}

完整源码：GitHub

小结