Hello everyone My question is - how do I access the standard camera in the three js editor? I am trying to make a scene with a portal, in the scene I have two cameras (one inside the cubemap) to project the image into the portal. In the case of a local project, everything works fine for me, but in the case of creating a similar scene in the editor, everything goes down a bad path. It seems to me that the reason is that when you click on PLAY, a new camera is created. I attach the script of the scene below. I hope that a solution will be found! Thank you all for your attention!
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;
}