Hi,
First of all, I am new to all programming, so please be gentle with my mess. I am having Bruno’s lessons and everything is going great. I wanted to pause the lessons and try everything I have learned and experiment freely for a few days but I am frustrated about video textures.
I was experimenting about putting a video texture on a plane and use it like monitor in three.js
. I am using the same starter template as Bruno’s lessons. but as soon as video starts, I am losing the server. Here is the terminal’s message :
node:events:491
throw er; // Unhandled ‘error’ event
^
TypeError: Cannot set property closed of # which has only a getter
at FsReadStream.close (C:\Users\Mehme\Desktop\Visual Studio Projeler\Sitem_v2\node_modules\memfs\lib\volume.js:2047:17)
at FsReadStream._destroy (C:\Users\Mehme\Desktop\Visual Studio Projeler\Sitem_v2\node_modules\memfs\lib\volume.js:2032:10)
at _destroy (node:internal/streams/destroy:109:10)
at class_1.destroy (node:internal/streams/destroy:71:5)
at class_1. (C:\Users\Mehme\Desktop\Visual Studio Projeler\Sitem_v2\node_modules\memfs\lib\volume.js:1962:22)
at class_1.emit (node:events:525:35)
at endReadableNT (node:internal/streams/readable:1359:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted ‘error’ event on class_1 instance at:
at emitErrorNT (node:internal/streams/destroy:151:8)
at emitErrorCloseNT (node:internal/streams/destroy:116:3)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Node.js v19.3.0
Here is the developers console message :
Here is chrome’s console messages;
Failed to load resource: net::ERR_CONNECTION_RESET
WebSocket connection to 'ws://192.168.1.11:8080/ws' failed:
WebSocketClient @ bundle.2001c2d1a1888ad6.js:12604
c7b58a553d975169.mp4:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
c7b58a553d975169.mp4:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
bundle.2001c2d1a1888ad6.js:12604 WebSocket connection to 'ws://192.168.1.11:8080/ws' failed:
GET http://192.168.1.11:8080/c7b58a553d975169.mp4 net::ERR_CONNECTION_RESET 206 (Partial Content)
http://192.168.1.11:8080/c7b58a553d975169.mp4
when I try to go for this link after restarting the server, it does the same thing. plays 5 second or so, then shuts down the server. I tried other videos, same result.
I don’t know where to paste my code. This is my first thread, so I will paste it here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>21 - Scroll base animation</title>
<link rel="shortcut icon" href="#">
</head>
<body>
<canvas class="webgl"></canvas>
<nav>
<div class="box" style="background-color: blue;">
<a
id="logo"
href="C:\Users\Mehme\Desktop\Visual Studio Projeler\Sitem_v2\src\interaktif.html"
target="_blank"
>Cosmos Motions</a>
</div>
<button class="contact-btn" id="contact-btn">Contacts</button>
<button class="photos-btn" id="photos-btn">Next</button>
<button class="portfolio-btn" id="portfolio-btn">Portfolio</button>
<button class="home-btn" id="home-btn">Home</button>
<ul>
<li>Keşfet</li>
<li>Yarat</li>
</ul>
</nav>
<!-- <h1 class="Baslik">Sanaldan Gerçeğe !</h1> -->
<video id="cosmosVideo" loop crossOrigin="anonymous" playsinline style="display:none">
<source src="/static/cosmosVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<section class="section">
<h1>,</h1>
</section>
<section class="section">
<h2>My projects</h2>
</section>
<section class="section">
<h2>Contact me</h2>
</section>
<section class="section">
<h2>Contact me</h2>
</section>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;1,300;1,400&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}
html {
background-color: #c0c0c0;
/* background-color: #1e1a20; */
overflow: hidden;
}
.webgl {
position: fixed; /*absolute olura aşağı inince canvas yukarda kalır. */
top: 0;
left: 0;
outline: none;
}
.section {
display: flex;
align-items: center;
height: 100vh;
position: relative;
font-family: "Cabin", sans-serif;
color: #ffeded;
text-transform: uppercase;
font-size: 7vmin;
padding-left: 10%;
padding-right: 10%;
}
section:nth-child(odd) {
justify-content: flex-end;
}
.navbardiv {
position: absolute;
top: 0;
left: 0;
margin: 10px;
}
nav {
color: white;
z-index: 2;
position: relative;
padding: 4rem 8rem;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul {
list-style: none;
display: flex;
gap: 4rem;
}
.Baslik {
color: white;
z-index: 2;
position: absolute;
font-size: 3rem;
left: 50%;
top: 75%;
transform: translate(-50%, -75%);
}
p {
color: white;
}
/*
video {
width: 720px;
height: 360px;
display:none
} */
import "./style.css";
import * as THREE from "three";
import * as dat from "lil-gui";
import gsap from "gsap";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
//! Sizes
const sizes = {
width: window.innerWidth,
height: window.innerHeight,
};
window.addEventListener("resize", () => {
// Update sizes
sizes.width = window.innerWidth;
sizes.height = window.innerHeight;
// Update camera
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
// Update renderer
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});
//! Canvas
const canvas = document.querySelector("canvas.webgl");
//! Scene
const scene = new THREE.Scene();
//! Loaders
const gltfLoader = new GLTFLoader();
const textureLoader = new THREE.TextureLoader();
const fontLoader = new FontLoader();
//* AXIS HELPER
const axesHelper = new THREE.AxesHelper();
scene.add(axesHelper);
//! Debug
const gui = new dat.GUI();
const parameters = { materialColor: "#ffeded" };
gui.addColor(parameters, "materialColor").onChange(() => {
// material.color.set(parameters.materialColor);
// particleMaterial.color.set(parameters.materialColor);
});
// console.time('blabla')
// //? ikisinin arasına kaç saniye süreceğini merak ettiğini koy.
// console.timeEnd('blabla')
//!-----------------------------------------
//*Texture Loaders
//* Object
//Imports
let cosmos = null;
gltfLoader.load("./cosmosv2.gltf", (gltf) => {
cosmos = gltf.scene.children[0];
gltf.scene.children[0].position.x = 0;
gltf.scene.children[0].position.y = -1;
gltf.scene.children[0].position.z = 0;
// gltf.scene.children[0].rotation.y =Math.PI/4
scene.add(cosmos);
console.log(cosmos);
});
//! Cosmos Header
const headerFont = fontLoader.load("/fonts/Lato_Regular.json", (lato) => {
const textGeometry = new TextGeometry("Cosmos Motions", {
font: lato,
size: 0.4,
height: 0.2,
curveSegments: 2,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
textGeometry.center();
const textMaterial = new THREE.MeshBasicMaterial();
const cosmosText = new THREE.Mesh(textGeometry, textMaterial);
cosmosText.position.set(0, 0.69, -2);
scene.add(cosmosText);
});
//Texture Load
const texture1 = textureLoader.load("/Photos/1.png");
console.log(texture1);
// Geometry
const photoGeometry = new THREE.PlaneGeometry(2, 1);
const photoMaterial = new THREE.MeshBasicMaterial({ map: texture1 });
const photoBackgroundObject = new THREE.Mesh(photoGeometry, photoMaterial);
photoBackgroundObject.position.set(10, 0, 0);
scene.add(photoBackgroundObject);
//! Triple Monitörler
// VIDEO
const cosmosVideo = document.getElementById("cosmosVideo");
const videoTexture = new THREE.VideoTexture(cosmosVideo);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
// Monitörlerin arkası
const videoGeometry = new THREE.PlaneGeometry(2, 1);
const videoMaterial = new THREE.MeshBasicMaterial({
map: videoTexture,
side: THREE.FrontSide,
});
const videoBackgroundObject = new THREE.Mesh(videoGeometry, videoMaterial);
videoBackgroundObject.position.set(0, 0, 0);
scene.add(videoBackgroundObject);
//* Lights
const directionalLight = new THREE.DirectionalLight("#ffffff", 5);
directionalLight.position.set(1, 1, 0);
scene.add(directionalLight);
//* Camera
//Group
const cameraGroup = new THREE.Group();
scene.add(cameraGroup);
// Base camera
const camera = new THREE.PerspectiveCamera(
55,
sizes.width / sizes.height,
0.1,
100
);
camera.position.set(0, 10, 0);
cameraGroup.add(camera);
gui.add(cameraGroup.position, "y").min(-15).max(15).step(1);
gui.add(cameraGroup.position, "x").min(-15).max(15).step(1);
gui.add(cameraGroup.position, "z").min(-15).max(15).step(1);
//* Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.enablePan = true;
controls.enableZoom = true;
controls.autoRotate = false;
//* Renderer
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas,
alpha: true, //? canvası transparant yapmak için
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
//* Fare Sıfırlama
const cursor = {};
cursor.x = 0;
cursor.y = 0;
window.addEventListener("mousemove", (event) => {
cursor.x = event.clientX / sizes.width - 0.5;
cursor.y = event.clientY / sizes.height - 0.5;
});
// //*GSAP
// document.getElementById("home-btn").addEventListener("mousedown", () =>
// {
// gsap.to(camera.position,{
// z:10,
// x:0,
// y:0,
// duration:1.5,
// delay:0.1,})
// })
var tl = gsap.timeline();
window.addEventListener("wheel", () => {
tl.to(camera.position, {
z: 5,
y: 1,
delay: 0.1,
duration: 1.5,
ease: "power2.InOut",
onUpdate: () => {
// camera.lookAt(0,0,0)
},
});
});
window.addEventListener("wheel", () => {
tl.to(camera.position, {
z: 2,
y: 1,
delay: 0.1,
duration: 1.5,
ease: "power2.InOut",
onUpdate: () => {
document.getElementById("cosmosVideo").play();
camera.lookAt(0, 0, 0);
},
});
});
//? HTML Animasyonu
// gsap.to(".box",{
// x:300,
// rotation:300,
// duration:3,
// repeat:true,
// })
//* TICK - Animate
const clock = new THREE.Clock();
let previousTime = 0;
const tick = () => {
//Time
const elapsedTime = clock.getElapsedTime();
const deltaTime = elapsedTime - previousTime;
previousTime = elapsedTime;
//Photos Animation
// if (cosmos)
// {
// cosmos.rotation.y += deltaTime * 0.02;
// }
// Render
controls.update();
renderer.render(scene, camera);
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
tick();