How to use the VideoTexture function from three

Find comprehensive JavaScript three.VideoTexture code examples handpicked from public code repositorys.

three.VideoTexture is a class in the Three.js library that creates a texture from a video element to be applied on 3D objects.

Root.jsx

52
53
54
55
56
57
58
59
60
61
// instantiate a loader
var video = document.getElementById('video');
video.load()
video.play();

const texture = new THREE.VideoTexture(video);
var sphere = new THREE.SphereGeometry(RADIUS, SEGMENTS, RINGS);
var material = new THREE.MeshBasicMaterial({ map: texture });
var mesh = new THREE.Mesh(sphere, material);
globe.add(mesh);

scatter.js

GitHub: vidartf/ipyvolume

112
113
114
115
116
117
118
119
120
121
if(texture.stream) { // instanceof media.MediaStreamModel) {
    this.textures = null
    this.texture_video = document.createElement('video')
    texture.stream.then(_.bind(function(stream) {
        this.texture_video.src = window.URL.createObjectURL(stream);
        var texture = new THREE.VideoTexture(this.texture_video)
        //texture.wrapS = THREE.RepeatWrapping;
        //texture.wrapT = THREE.RepeatWrapping;
        texture.minFilter = THREE.LinearFilter;
        //texture.wrapT = THREE.RepeatWrapping;

236

How does three.VideoTexture work?

three.VideoTexture is a class in the Three.js library that creates a texture from a video element to use in a 3D scene. When an instance of VideoTexture is created, it takes a video element as its argument and creates a texture using the video element as the source. The texture is then applied to a material, which can be used to create a mesh that can be added to a 3D scene. The video element can be updated dynamically and the changes will be reflected in the texture, allowing for dynamic video content in a 3D environment. The video element can also be loaded from a URL or a file.

THREE.WebAR.js

GitHub: magr1725/jeromeetienne-AR.js

249
250
251
252
253
254
255
256
257
258

geometry.addAttribute("uv", new THREE.BufferAttribute(
  new Float32Array(textureCoords), 2 ));
geometry.computeBoundingSphere();

var videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.NearestFilter;
videoTexture.magFilter = THREE.NearestFilter;
videoTexture.format = THREE.RGBFormat;
videoTexture.flipY = false;

videojs-vr.cjs.js

GitHub: ateriad/titar

1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
  // Render left eye when not in VR mode
  this.camera.layers.enable(1);
}

this.scene = new THREE.Scene();
this.videoTexture = new THREE.VideoTexture(this.getVideoEl_()); // shared regardless of wether VideoTexture is used or
// an image canvas is used

this.videoTexture.generateMipmaps = false;
this.videoTexture.minFilter = THREE.LinearFilter;

+ 20 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Create a video element
const video = document.createElement("video");
video.src = "path/to/video.mp4";
video.load();
video.play();

// Create a VideoTexture from the video element
const texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

// Create a material that uses the VideoTexture
const material = new THREE.MeshBasicMaterial({ map: texture });

// Create a mesh using the material
const geometry = new THREE.BoxGeometry();
const mesh = new THREE.Mesh(geometry, material);

In this example, we create a video element and set its src to the path of a video file. We then create a VideoTexture from the video element and set its properties such as minFilter, magFilter, and format. We then create a MeshBasicMaterial using the VideoTexture and a BoxGeometry to create a mesh.

photosphere-renderer.js

GitHub: liuxiong332/react-vrview-player

129
130
131
132
133
134
135
136
137
138
  loader.load(src, this.onTextureLoaded_.bind(this), null, this.onTextureError_.bind(this));
}

set360Video(videoElement) {
  // Load the video texture.
  var videoTexture = new THREE.VideoTexture(videoElement);
  videoTexture.minFilter = THREE.LinearFilter;
  videoTexture.magFilter = THREE.LinearFilter;
  videoTexture.format = THREE.RGBFormat;
  videoTexture.generateMipmaps = false;

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About