1

我有一个画布和一个three.js场景。我想要实现的是 3D 弯曲屏幕/容器，就像旧的电子管电视一样 - 我想你明白了。

换句话说，我所有的内容——目前只是iframe为了测试目的而显示另一个网站——应该看起来是弯曲的。

我不知道这是什么努力，因此如果这不适合 stackoverflow 问题，我很抱歉。- 不幸的是，我什至不知道从哪里开始。

import * as THREE from 'three';

const perspective = 900;

export default class Scene  {
    constructor($scene) {
        this.container = $scene;

        this.W = window.innerWidth;
        this.H = window.innerHeight;

        this.start();
    }

    start() {
        this.mainScene = new THREE.Scene();
        this.initCamera();
        this.initLights();

        this.renderer = new THREE.WebGLRenderer({
            canvas: this.container,
            alpha: true,
        });

        this.renderer.setSize(this.W, this.H);
        this.renderer.setPixelRatio(window.devicePixelRatio);
    }

    initCamera() {
        const fov = (180 * (2 * Math.atan(this.H / 2 / perspective))) / Math.PI;

        this.camera = new THREE.PerspectiveCamera(fov, this.W / this.H, 1, 10000);
        this.camera.position.set(0, 0, perspective)
    }

    initLights() {
        const ambientLight = new THREE.AmbientLight(0xffffff, 2);
        this.mainScene.add(ambientLight)
    }

    update() {
        requestAnimationFrame(this.update.bind(this));

        this.renderer.render(this.mainScene, this.camera)
    }

}

<div className="screen__wrapper">
    <iframe className="screen" src="https://tudor-raoul.web.app/de/" width="1000" height="1000"/>
</div>
<canvas id="scene"/>

编辑：我在 github 上找到了以下内容：demo 但是如何将这三个向量应用于整个视图以一次性弯曲所有 HTML 内容？

4

0 回答 0