如何访问相机三.js 编辑器？

Question

如何在 three.js 编辑器中访问标准相机？我正在尝试使用门户制作场景，在场景中我有两个相机（一个在立方体贴图中）将图像投影到门户中。在本地项目的情况下，一切对我来说都很好，但在编辑器中创建类似场景的情况下，一切都走上了一条糟糕的道路。在我看来，原因是当您单击 PLAY 时，会创建一个新相机。我附上下面场景的脚本。希望能找到解决办法。

var mainMover, otherMover;
var otherCamera;
var portalA, portalB;
var portalRing;

function init() {

    otherCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
    //console.log(this.children[3].children[0]);
    let ambientLight = new THREE.AmbientLight(0xcccccc, 1.00);
    scene.add(ambientLight);


    deltaTime = 0;
    totalTime = 0;

    let loader = new THREE.TextureLoader();

    let defaultMaterial = new THREE.MeshBasicMaterial({
        map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/sphere-colored.png"),
        color: 0x444444,
        side: THREE.DoubleSide,
        transparent: true
    });

    // Portal A ================================
    portalA = new THREE.Mesh(
        new THREE.CircleGeometry(1, 64),
        defaultMaterial.clone()
    );
    portalA.material.opacity = 0.5;
    portalA.position.set(-22, 0.5, -3);
    portalA.rotation.y = Math.PI / 4;
    portalA.layers.set(1);
    scene.add(portalA);

    portalRing = new THREE.Mesh(
        new THREE.RingGeometry(1, 1.1, 64),
        new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide, transparent: true })
    );
    portalRing.position.copy(portalA.position);
    portalRing.rotation.copy(portalA.rotation);
    portalRing.layers.set(0);
    scene.add(portalRing);


    
    mainMover = new THREE.Group();
    mainMover.position.set(-21, 0.5, 0);
    mainMover.add(camera);
    mainMover.name = "mainMover";
    scene.add(mainMover);


    // Portal B -  ================================
    let skyMaterialArray2 = [
        new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/posx.jpg"), side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/negx.jpg"), side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/posy.jpg"), side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/negy.jpg"), side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/posz.jpg"), side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/negz.jpg"), side: THREE.BackSide }),
    ];
    let skyMesh2 = new THREE.Mesh(
        new THREE.BoxGeometry(30, 30, 30),
        skyMaterialArray2);
    skyMesh2.position.x = 20;
    scene.add(skyMesh2);

    portalB = new THREE.Mesh(
        new THREE.CircleGeometry(1, 64),
        defaultMaterial.clone()
    );
    portalB.material.opacity = 0.5;
    portalB.position.set(24, 0.5, -5);
    portalB.rotation.y = -Math.PI / 4;
    portalB.layers.set(2);
    scene.add(portalB);


    otherMover = new THREE.Group();
    otherMover.add(otherCamera);
    scene.add(otherMover);

}

function update() {

    portalRing.material.color.setHSL(totalTime / 10 % 1, 1, 0.75);

    let relativePosition = portalA.worldToLocal(mainMover.position.clone());
    otherMover.position.copy(portalB.localToWorld(relativePosition));

    let relativeRotation = mainMover.quaternion.clone().multiply(portalA.quaternion.clone().invert());
    otherMover.quaternion.copy(relativeRotation.multiply(portalB.quaternion));

    otherCamera.rotation.x = camera.rotation.x;

    render()
}

function render() {  
    camera.layers.enable(0);
    camera.layers.enable(1);
    renderer.render(scene, camera);
    let gl = renderer.getContext();

  
    renderer.clear(true, true, true);
   
    renderer.autoClear = false;


    // FIRST PASS (enable stencil buffer) 


    gl.enable(gl.STENCIL_TEST); 

    camera.layers.set(1);

    
    gl.stencilFunc(gl.ALWAYS, 1, 0xff); 

    
    gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE); 

   
    gl.stencilMask(0xff);

    gl.colorMask(false, false, false, false);

  
    gl.depthMask(false);

    renderer.render(scene, camera);


    //SECOND PASS
    let portalToCamera = new THREE.Vector3().subVectors(mainMover.position.clone(), portalA.position.clone()); //  applyQuaternion( mainMover.quaternion );
    let normalPortal = new THREE.Vector3(0, 0, 1).applyQuaternion(portalA.quaternion);
    let clipSide = -Math.sign(portalToCamera.dot(normalPortal));

    let clipNormal = new THREE.Vector3(0, 0, clipSide).applyQuaternion(portalB.quaternion);
    let clipPoint = portalB.position;
    let clipPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(clipNormal, clipPoint);
    renderer.clippingPlanes = [clipPlane];

    gl.colorMask(true, true, true, true);

    gl.depthMask(true);

    
    gl.stencilFunc(gl.EQUAL, 1, 0xff);

    
    gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);


    otherCamera.layers.set(0);
    renderer.render(scene, otherCamera);

    
    renderer.clippingPlanes = [];

    //THIRD PASS
    
    gl.disable(gl.STENCIL_TEST);

    
    gl.colorMask(false, false, false, false);

    
    gl.depthMask(true);

    renderer.clear(false, true, false);
    renderer.render(scene, camera);

    //FINAL PASS
    gl.colorMask(true, true, true, true);

    gl.depthMask(true);

    camera.layers.set(0); 
    renderer.render(scene, camera);

    renderer.autoClear = true;
}

更新： 我为相机添加了一个助手，所以主相机应该代替立方体。但是，由于某种原因，在播放时，我发现自己不在这个立方体的位置......（只需创建一个网格：让 mainCameraMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE .MeshBasicMaterial());

Answer 1

当您在three.js 编辑器中创建脚本时，您可以访问update() 函数中的某些全局变量。在渲染器和场景旁边，您还可以访问透视相机。试试这个：

function update( event ) {

    console.log( camera );

}