Hello, i have an animation, a door that opens and the camera pass through, and goes to the next scene(room).I have also a plane that plays a video.The plane intesects the door, as you will see at the images.The problem is how i create a hole, in the door, so it passes thought and goes to the next room. O maybe a different way of organize the scene.
Picture one:
Picture Two (how the scene will be seen actually):
And here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Window</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js\OBJLoader.js"></script>
<script src="js\JSONLoader.js"></script>
<script src="js\MTLLoader.js"></script>
<script src="js\ObjectLoader.js"></script>
<script src="js\OrbitControls.js"></script>
<script src="js\Box3.js"></script>
<script src="js\BoxHelper.js"></script>
<script src="js\CameraHelper.js"></script>
<script>
var scene, camera, renderer, controls, cameraAnim, counter = 0,
helperCamera, emptyCube,imageObject,planeHeightAtDistance,planeWidthAtDistance;
var points = [];
var CurveRes = 500;
var clock = new THREE.Clock();
var increment;
var tangent = new THREE.Vector3();
var axis = new THREE.Vector3();
var up = new THREE.Vector3(0, 1, 0);
var scrollCount = 1;
var myObjs = {};
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 8;
camera.position.y = 1;
cameraAnim = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
helperCamera = new THREE.CameraHelper(cameraAnim);
cameraAnim.position.z = 0;
cameraAnim.position.y = 0;
scene.add(helperCamera);
scene.add(cameraAnim);
controls = new THREE.OrbitControls(camera);
renderer = new THREE.WebGLRenderer();
var video = document.createElement('video');
console.log(video);
var texture = new THREE.VideoTexture(video);
texture.needsUpdate;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.crossOrigin = 'anonymous';
imageObject = new THREE.Mesh(
new THREE.PlaneGeometry(1, 1),
new THREE.MeshBasicMaterial({
map: texture
}), );
imageObject.position.y = 0
imageObject.position.z = -1.5
scene.add(imageObject);
video.src = "./Assets/Test.mp4";
video.load();
video.play();
var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);
var curve = new THREE.QuadraticBezierCurve3(
new THREE.Vector3(0, 0, -10),
new THREE.Vector3(0, 0, 5),
new THREE.Vector3(0, 0, 5),
new THREE.Vector3(0, 0, 10)
);
points = curve.getPoints(CurveRes);
var geometry = new THREE.Geometry().setFromPoints(points);
var material = new THREE.LineBasicMaterial({
color: 0xff0000
});
var curveObject = new THREE.Line(geometry, material);
for (i = 0; i < points.length; i++) {
}
scene.add(curveObject);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var ambientLight = new THREE.AmbientLight(0xcccccc, 0.8);
ambientLight.position.y = -2;
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.y = -2;
scene.add(pointLight);
var empty = new THREE.BoxGeometry(0.3, 0.3, 0.3);
var materialEmpty = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
emptyCube = new THREE.Mesh(empty, materialEmpty);
scene.add(emptyCube);
function addObject(model, Matrix_x, Matrix_y, Matrix_z, pos_x, pos_y, pos_z) {
var manager = new THREE.LoadingManager();
manager.onStart = function() {
};
manager.onLoad = function() {
var box = new THREE.AxesHelper(5);
myObjs[model].add(box);
myObjs[model].children[0].applyMatrix(new THREE.Matrix4().makeTranslation(Matrix_x, Matrix_y, Matrix_z));
myObjs[model].position.set(pos_x, pos_y, pos_z);
};
var mtlLoader = new THREE.MTLLoader(manager);
var objLoader = new THREE.OBJLoader(manager);
mtlLoader.load('Assets/' + model + '.mtl', function(materials) {
materials.preload();
objLoader.setMaterials(materials);
objLoader.load('Assets/' + model + '.obj', function(object) {
object.name = model;
scene.add(object);
myObjs[model] = object;
console.log(myObjs[model]);
return object;
});
});
};
addObject('window_R', -1, 0, 1.4, 1, 0, -1.4, 0);
addObject('window_L', 1, 0, 1.4, -1, 0, -1.4);
addObject('Fixed_window', 0, 0, 0, 0, 0, 0);
console.log(myObjs);
camera.position.z = 10;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
console.log(cameraAnim.position);
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('wheel', WheelControl, true);
}
function moveCamera() {
if (counter <= CurveRes) {
for (i = 0; i < points.length; i++) {
cameraAnim.position.copy(points[CurveRes - counter]);
}
counter += 1;
} else {
counter = 0;
}
}
function videoResize(){
var cameraZ = cameraAnim.position.z;
var planeZ = imageObject.position.z;
var distance = cameraZ - planeZ;
var aspect = window.innerWidth / window.innerHeight;
var vFov = camera.fov * Math.PI / 180;
planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
planeWidthAtDistance = planeHeightAtDistance * aspect;
// console.log("planeWidthAtDistance: "+planeWidthAtDistance);
// console.log("planeHeightAtDistance: "+planeHeightAtDistance);
// console.log("planeZ: "+planeZ);
// console.log("cameraZ: "+cameraZ);
// console.log("aspect: "+aspect);
console.log("distance: "+distance);
if(distance>=0){
imageObject.scale.set( planeWidthAtDistance, planeHeightAtDistance, 1 );
}else{
imageObject.scale.set( 0, 0, 1 )
}
console.log(imageObject.width);
console.log(imageObject);
}
function windowOpen() {
// maxRot_R=2
// minRot_R=0
// maxRot_L=-2
// minRot_L=0
var rotSpeed = 0.004;
// console.log("Rotspeed" + rotSpeed);
if (myObjs['window_R'] !== undefined) {
if (myObjs['window_R'].rotation.y < 2) {
myObjs['window_R'].rotation.y += rotSpeed;
} else {
myObjs['window_R'].rotation.y = 0
}
}
if (myObjs['window_L'] !== undefined) {
if (myObjs['window_R'].rotation.y < 2) {
myObjs['window_L'].rotation.y -= rotSpeed;
} else {
myObjs['window_L'].rotation.y = 0
}
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function WheelControl(e) {
if (e.wheelDelta < 0 && scrollCount < 20) {
scrollCount += 2;
} else if (e.wheelDelta > 0 && scrollCount > -20) {
scrollCount -= 2;
}
console.log(scrollCount);
}
function animate() {
videoResize()
windowOpen();
moveCamera();
render();
controls.update();
requestAnimationFrame(animate);
// cameraAnim.lookAt(emptyCube.position);
}
function render() {
renderer.render(scene, cameraAnim);
}
</script>
</body>
</html>