typescript 如何将网格转换为Object3D

db2dz4w8  于 2023-03-24  发布在  TypeScript
关注(0)|答案(1)|浏览(101)

我使用TypescriptWebpack。为了在three.js中创建一个3D地板,我使用了几个平面对象(100中的100个),并使用无缝图像作为其背景:

import {
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    TextureLoader,
    PlaneGeometry,
    MeshBasicMaterial,
    Mesh,
} from 'three'
import ground from './ground.jpg'

class Game {
    private readonly scene: Scene = new Scene()
    private readonly camera: PerspectiveCamera = new PerspectiveCamera()
    private readonly renderer: WebGLRenderer = new WebGLRenderer()

    constructor() {
        document.body.style.margin = "0"
        document.body.style.overflow = "hidden"
        document.body.appendChild(this.renderer.domElement)
        this.resizeCanvas()
        window.addEventListener("resize", this.resizeCanvas.bind(this))
        this.setupCamera()
        this.initiateGround()
        this.render()
    }

    private initiateGround() {
        const texture = new TextureLoader().load(ground);
        const geometry = new PlaneGeometry(1, 1);
        const material = new MeshBasicMaterial({map: texture});

        for (let i = 0; i < 100; i++) {
            for (let j = 0; j < 100; j++) {
                const plane = new Mesh(geometry, material);
                this.scene.add(plane);
                plane.position.set(i - 50, j - 50, 1);
            }
        }

        this.camera.position.z = 5;
        this.camera.rotation.x = .6;
    }

    private resizeCanvas(): void {
        this.renderer.setSize(window.innerWidth, window.innerHeight)
        this.camera.aspect = window.innerWidth / window.innerHeight
        this.camera.updateProjectionMatrix()
    }

    private setupCamera() {
        this.camera.fov = 75
        this.camera.near = .001
        this.camera.far = 100
        this.camera.updateProjectionMatrix()
    }

    private render() {
        requestAnimationFrame(this.render.bind(this))
        this.renderer.render(this.scene, this.camera)
    }
}

new Game()

为了获得更好的性能,我的想法是只显示用户可以看到的平面。所以,我搜索了一下,我发现了这个:

const intersects = new Raycaster().intersectObjects(theObject);
if ( intersects.length > 0 ) {
     // Hidden if index > 0
}

但问题是:当我想检查飞机是否对用户的相机可见时,我得到这个错误:

Argument of type 'Mesh<PlaneGeometry, MeshBasicMaterial>' is not assignable to parameter of type 'Object3D<Event>[]'.

这意味着我需要将网格转换为Object3D。虽然我在网上没有找到任何东西。所以,我发布了这个问题。
我也非常感谢你对我的代码的其他部分的评论,因为它并不完美。

n1bvdmb6

n1bvdmb61#

我只需要添加[]

const intersects = new Raycaster().intersectObjects([theObject]);
if ( intersects.length > 0 ) {
     // Hidden if index > 0
}

相关问题