dsfdf

import * as THREE from 'three'; // 引入Three.js库
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import Stats from 'three/examples/jsm/libs/stats.module.js'; // 引入性能监控库
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
//导入hdr加载器

export class ThreeTool {
    public camera: THREE.PerspectiveCamera; // 相机对象
    public scene: THREE.Scene; // 场景对象
    public renderer: THREE.WebGLRenderer; // 渲染器对象
    public hdrTextureLoader: THREE.TextureLoader;
    // 构造函数,初始化Three.js工具
    constructor() {
        this.renderer = this.initRenderer(); // 初始化渲染器
        this.scene = this.initScene(); // 初始化场景
        this.camera = this.initCamera(); // 初始化相机
        this.hdrTextureLoader = this.initSky();
        this.initOrbitControls();
    }
    public rendererContainer() {
        this.renderer.render(this.scene, this.camera); // 渲染场景和相机
    }
    // 初始化场景的方法
    public initScene(): THREE.Scene {
        const scene = new THREE.Scene();
        return scene;
    }
    // 设置hdr背景图
    public initSky(url: String) {
        const textureLoader = new THREE.TextureLoader().load(url);
        this.scene.background = textureLoader;
    }
    // 初始化渲染器的方法
    public initRenderer(): THREE.WebGLRenderer {
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        return renderer;
    }

    // 初始化相机的方法
    public initCamera(): THREE.PerspectiveCamera {
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        return camera;
    }
    public initOrbitControls() {
        const controls = new OrbitControls(this.camera, this.renderer.domElement);
        controls.update();
    }

    // 初始化性能监控的方法
    public initStats(container: HTMLDivElement) {
        const stats = new Stats();
        stats.dom.style.position = 'absolute';
        stats.dom.style.left = '0';
        stats.dom.style.zIndex = '100';
        container.appendChild(stats.dom); // 将性能监控DOM元素添加到容器中
        return stats;
    }

    //初始化坐标系辅助
    public initAxisHelper(axesLength: number = 150, showText: boolean = true) {
        const helper = new THREE.AxesHelper(axesLength);
        if (showText) {
            const loader = new FontLoader();
            let meshX = new THREE.Mesh();
            let meshY = new THREE.Mesh();
            let meshZ = new THREE.Mesh();
            loader.load('fonts/optimer_regular.typeface.json', (font) => {
                meshX = this.createText('X', font);
                meshY = this.createText('Y', font);
                meshZ = this.createText('Z', font);
                meshX.position.x = 12;
                meshY.position.y = 12;
                meshZ.position.z = 12;
                this.scene.add(meshX);
                this.scene.add(meshY);
                this.scene.add(meshZ);
            });
        }
        this.scene.add(helper);
    }
    // 初始化文本
    private createText(content: string, font: any) {
        const textGeometry = new TextGeometry(content, {
            font: font,
            size: 1,
            depth: 0.1,
            curveSegments: 1,
        });
        textGeometry.center();
        const textMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); // front
        const mesh = new THREE.Mesh(textGeometry, textMaterial);
        return mesh;
    }
}

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小杜的博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值