在用户脚本中使用 Three.js 的 YouTube 视频着色器
Shaders for YouTube videos using Three.js in a userscript
我想对 YouTube 上的视频应用着色器。
我目前的尝试是为此使用 Three.js，即在 youtube.com.
上将 this example of applying a shader to a video (code here) 变成 运行 的 Tampermonkey 用户脚本
以下 @require 语句是否正确翻译自 the original import statements？如何解决eslint: no-undef - 'THREE' is not defined、eslint: no-undef - 'PerspectiveCamera' is not defined（如果删除THREE.，假设直接导入three.module.js的内容）、eslint: no-undef - 'RenderPass' is not defined?
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?domain=tampermonkey.net
// @grant none
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.module.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/EffectComposer.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/RenderPass.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/ShaderPass.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/BloomPass.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/shaders/CopyShader.js
// ==/UserScript==
(function() {
'use strict';
// Your code here...
let container;
let camera, scene, renderer;
let video, texture, material, mesh;
let composer;
let mouseX = 0;
let mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let cube_count;
const meshes = [],
materials = [],
xgrid = 20,
ygrid = 10;
const startButton = document.getElementsByClassName( 'title' )[0];
startButton.addEventListener( 'click', function () {
init();
animate();
} );
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0.5, 1, 1 ).normalize();
scene.add( light );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
video = document.getElementsByClassName( 'video-stream html5-main-video' )[0];
video.play();
video.addEventListener( 'play', function () {
this.currentTime = 3;
} );
texture = new THREE.VideoTexture( video );
//
let i, j, ox, oy, geometry;
const ux = 1 / xgrid;
const uy = 1 / ygrid;
const xsize = 480 / xgrid;
const ysize = 204 / ygrid;
const parameters = { color: 0xffffff, map: texture };
cube_count = 0;
for ( i = 0; i < xgrid; i ++ ) {
for ( j = 0; j < ygrid; j ++ ) {
ox = i;
oy = j;
geometry = new THREE.BoxGeometry( xsize, ysize, xsize );
change_uvs( geometry, ux, uy, ox, oy );
materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
material = materials[ cube_count ];
material.hue = i / xgrid;
material.saturation = 1 - j / ygrid;
material.color.setHSL( material.hue, material.saturation, 0.5 );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = ( i - xgrid / 2 ) * xsize;
mesh.position.y = ( j - ygrid / 2 ) * ysize;
mesh.position.z = 0;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
scene.add( mesh );
mesh.dx = 0.001 * ( 0.5 - Math.random() );
mesh.dy = 0.001 * ( 0.5 - Math.random() );
meshes[ cube_count ] = mesh;
cube_count += 1;
}
}
renderer.autoClear = false;
document.addEventListener( 'mousemove', onDocumentMouseMove );
// postprocessing
const renderModel = new RenderPass( scene, camera );
const effectBloom = new BloomPass( 1.3 );
const effectCopy = new ShaderPass( CopyShader );
composer = new EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectCopy );
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer.setSize( window.innerWidth, window.innerHeight );
}
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
const uvs = geometry.attributes.uv.array;
for ( let i = 0; i < uvs.length; i += 2 ) {
uvs[ i ] = ( uvs[ i ] + offsetx ) * unitx;
uvs[ i + 1 ] = ( uvs[ i + 1 ] + offsety ) * unity;
}
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY ) * 0.3;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
let h, counter = 1;
function render() {
const time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
for ( let i = 0; i < cube_count; i ++ ) {
material = materials[ i ];
h = ( 360 * ( material.hue + time ) % 360 ) / 360;
material.color.setHSL( h, material.saturation, 0.5 );
}
if ( counter % 1000 > 200 ) {
for ( let i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.rotation.x += 10 * mesh.dx;
mesh.rotation.y += 10 * mesh.dy;
mesh.position.x -= 150 * mesh.dx;
mesh.position.y += 150 * mesh.dy;
mesh.position.z += 300 * mesh.dx;
}
}
if ( counter % 1000 === 0 ) {
for ( let i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.dx *= - 1;
mesh.dy *= - 1;
}
}
counter ++;
renderer.clear();
composer.render();
}
})();
这是错误的屏幕截图：
eslint: no-undef - 'THREE' is not defined不一定有问题
使用 normal JavaScript versions of the Three.js scripts 而不是模块版本：
// @require https://threejs.org/build/three.min.js
// @require https://threejs.org/examples/js/postprocessing/EffectComposer.js
// @require https://threejs.org/examples/js/postprocessing/RenderPass.js
// @require https://threejs.org/examples/js/postprocessing/ShaderPass.js
// @require https://threejs.org/examples/js/postprocessing/BloomPass.js
// @require https://threejs.org/examples/js/shaders/CopyShader.js
添加 ConvolutionShader 因为 BloomPass 否则会抛出一个错误，指出它缺少：
// @require https://threejs.org/examples/js/shaders/ConvolutionShader.js
将THREE.放在RenderPass、CopyShader之前，依此类推。
向上移动let h, counter = 1;，否则h被视为未定义。
使用 container = document.getElementsByClassName( 'video-stream html5-main-video' )[0].parentElement; 因为 container = document.createElement( 'div' ); 在 YouTube 上不可见。
总的来说，我们得到以下 Tampermonkey 用户脚本：
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?domain=tampermonkey.net
// @grant none
// @require https://threejs.org/build/three.js
// @require https://threejs.org/examples/js/postprocessing/EffectComposer.js
// @require https://threejs.org/examples/js/postprocessing/RenderPass.js
// @require https://threejs.org/examples/js/postprocessing/ShaderPass.js
// @require https://threejs.org/examples/js/postprocessing/BloomPass.js
// @require https://threejs.org/examples/js/shaders/CopyShader.js
// @require https://threejs.org/examples/js/shaders/ConvolutionShader.js
// ==/UserScript==
//debugger;
(function() {
'use strict';
// Your code here...
let container;
let camera, scene, renderer;
let video, texture, material, mesh;
let composer;
let mouseX = 0;
let mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let cube_count;
let hue, counter = 1;
const meshes = [],
materials = [],
xgrid = 20,
ygrid = 10;
init();
animate();
function init() {
container = document.createElement( 'div' );
container = document.getElementsByClassName( 'video-stream html5-main-video' )[0].parentElement;
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0.5, 1, 1 ).normalize();
scene.add( light );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
video = document.getElementsByClassName( 'video-stream html5-main-video' )[0];
video.play();
video.addEventListener( 'play', function () {
this.currentTime = 3;
} );
texture = new THREE.VideoTexture( video );
//
let i, j, ox, oy, geometry;
const ux = 1 / xgrid;
const uy = 1 / ygrid;
const xsize = 480 / xgrid;
const ysize = 204 / ygrid;
const parameters = { color: 0xffffff, map: texture };
cube_count = 0;
for ( i = 0; i < xgrid; i ++ ) {
for ( j = 0; j < ygrid; j ++ ) {
ox = i;
oy = j;
geometry = new THREE.BoxGeometry( xsize, ysize, xsize );
change_uvs( geometry, ux, uy, ox, oy );
materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
material = materials[ cube_count ];
material.hue = i / xgrid;
material.saturation = 1 - j / ygrid;
material.color.setHSL( material.hue, material.saturation, 0.5 );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = ( i - xgrid / 2 ) * xsize;
mesh.position.y = ( j - ygrid / 2 ) * ysize;
mesh.position.z = 0;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
scene.add( mesh );
mesh.dx = 0.001 * ( 0.5 - Math.random() );
mesh.dy = 0.001 * ( 0.5 - Math.random() );
meshes[ cube_count ] = mesh;
cube_count += 1;
}
}
renderer.autoClear = false;
document.addEventListener( 'mousemove', onDocumentMouseMove );
// postprocessing
const renderModel = new THREE.RenderPass( scene, camera );
const effectBloom = new THREE.BloomPass( 1.3 );
const effectCopy = new THREE.ShaderPass( THREE.CopyShader );
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectCopy );
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer.setSize( window.innerWidth, window.innerHeight );
}
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
const uvs = geometry.attributes.uv.array;
for ( let i = 0; i < uvs.length; i += 2 ) {
uvs[ i ] = ( uvs[ i ] + offsetx ) * unitx;
uvs[ i + 1 ] = ( uvs[ i + 1 ] + offsety ) * unity;
}
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY ) * 0.3;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
const time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
for ( let i = 0; i < cube_count; i ++ ) {
material = materials[ i ];
hue = ( 360 * ( material.hue + time ) % 360 ) / 360;
material.color.setHSL( hue, material.saturation, 0.5 );
}
if ( counter % 1000 > 200 ) {
for ( let i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.rotation.x += 10 * mesh.dx;
mesh.rotation.y += 10 * mesh.dy;
mesh.position.x -= 150 * mesh.dx;
mesh.position.y += 150 * mesh.dy;
mesh.position.z += 300 * mesh.dx;
}
}
if ( counter % 1000 === 0 ) {
for ( let i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.dx *= - 1;
mesh.dy *= - 1;
}
}
counter ++;
renderer.clear();
composer.render();
}
})();
结果：
我想对 YouTube 上的视频应用着色器。
我目前的尝试是为此使用 Three.js，即在 youtube.com.
上将 this example of applying a shader to a video (code here) 变成 运行 的 Tampermonkey 用户脚本以下 @require 语句是否正确翻译自 the original import statements？如何解决eslint: no-undef - 'THREE' is not defined、eslint: no-undef - 'PerspectiveCamera' is not defined（如果删除THREE.，假设直接导入three.module.js的内容）、eslint: no-undef - 'RenderPass' is not defined?
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?domain=tampermonkey.net
// @grant none
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.module.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/EffectComposer.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/RenderPass.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/ShaderPass.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/postprocessing/BloomPass.js
// @require https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/shaders/CopyShader.js
// ==/UserScript==
(function() {
'use strict';
// Your code here...
let container;
let camera, scene, renderer;
let video, texture, material, mesh;
let composer;
let mouseX = 0;
let mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let cube_count;
const meshes = [],
materials = [],
xgrid = 20,
ygrid = 10;
const startButton = document.getElementsByClassName( 'title' )[0];
startButton.addEventListener( 'click', function () {
init();
animate();
} );
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0.5, 1, 1 ).normalize();
scene.add( light );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
video = document.getElementsByClassName( 'video-stream html5-main-video' )[0];
video.play();
video.addEventListener( 'play', function () {
this.currentTime = 3;
} );
texture = new THREE.VideoTexture( video );
//
let i, j, ox, oy, geometry;
const ux = 1 / xgrid;
const uy = 1 / ygrid;
const xsize = 480 / xgrid;
const ysize = 204 / ygrid;
const parameters = { color: 0xffffff, map: texture };
cube_count = 0;
for ( i = 0; i < xgrid; i ++ ) {
for ( j = 0; j < ygrid; j ++ ) {
ox = i;
oy = j;
geometry = new THREE.BoxGeometry( xsize, ysize, xsize );
change_uvs( geometry, ux, uy, ox, oy );
materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
material = materials[ cube_count ];
material.hue = i / xgrid;
material.saturation = 1 - j / ygrid;
material.color.setHSL( material.hue, material.saturation, 0.5 );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = ( i - xgrid / 2 ) * xsize;
mesh.position.y = ( j - ygrid / 2 ) * ysize;
mesh.position.z = 0;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
scene.add( mesh );
mesh.dx = 0.001 * ( 0.5 - Math.random() );
mesh.dy = 0.001 * ( 0.5 - Math.random() );
meshes[ cube_count ] = mesh;
cube_count += 1;
}
}
renderer.autoClear = false;
document.addEventListener( 'mousemove', onDocumentMouseMove );
// postprocessing
const renderModel = new RenderPass( scene, camera );
const effectBloom = new BloomPass( 1.3 );
const effectCopy = new ShaderPass( CopyShader );
composer = new EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectCopy );
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer.setSize( window.innerWidth, window.innerHeight );
}
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
const uvs = geometry.attributes.uv.array;
for ( let i = 0; i < uvs.length; i += 2 ) {
uvs[ i ] = ( uvs[ i ] + offsetx ) * unitx;
uvs[ i + 1 ] = ( uvs[ i + 1 ] + offsety ) * unity;
}
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY ) * 0.3;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
let h, counter = 1;
function render() {
const time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
for ( let i = 0; i < cube_count; i ++ ) {
material = materials[ i ];
h = ( 360 * ( material.hue + time ) % 360 ) / 360;
material.color.setHSL( h, material.saturation, 0.5 );
}
if ( counter % 1000 > 200 ) {
for ( let i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.rotation.x += 10 * mesh.dx;
mesh.rotation.y += 10 * mesh.dy;
mesh.position.x -= 150 * mesh.dx;
mesh.position.y += 150 * mesh.dy;
mesh.position.z += 300 * mesh.dx;
}
}
if ( counter % 1000 === 0 ) {
for ( let i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.dx *= - 1;
mesh.dy *= - 1;
}
}
counter ++;
renderer.clear();
composer.render();
}
})();
这是错误的屏幕截图：
eslint: no-undef - 'THREE' is not defined不一定有问题
使用 normal JavaScript versions of the Three.js scripts 而不是模块版本：
// @require https://threejs.org/build/three.min.js
// @require https://threejs.org/examples/js/postprocessing/EffectComposer.js
// @require https://threejs.org/examples/js/postprocessing/RenderPass.js
// @require https://threejs.org/examples/js/postprocessing/ShaderPass.js
// @require https://threejs.org/examples/js/postprocessing/BloomPass.js
// @require https://threejs.org/examples/js/shaders/CopyShader.js
添加 ConvolutionShader 因为 BloomPass 否则会抛出一个错误，指出它缺少：
// @require https://threejs.org/examples/js/shaders/ConvolutionShader.js
将THREE.放在RenderPass、CopyShader之前，依此类推。
向上移动let h, counter = 1;，否则h被视为未定义。
使用 container = document.getElementsByClassName( 'video-stream html5-main-video' )[0].parentElement; 因为 container = document.createElement( 'div' ); 在 YouTube 上不可见。
总的来说，我们得到以下 Tampermonkey 用户脚本：
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?domain=tampermonkey.net
// @grant none
// @require https://threejs.org/build/three.js
// @require https://threejs.org/examples/js/postprocessing/EffectComposer.js
// @require https://threejs.org/examples/js/postprocessing/RenderPass.js
// @require https://threejs.org/examples/js/postprocessing/ShaderPass.js
// @require https://threejs.org/examples/js/postprocessing/BloomPass.js
// @require https://threejs.org/examples/js/shaders/CopyShader.js
// @require https://threejs.org/examples/js/shaders/ConvolutionShader.js
// ==/UserScript==
//debugger;
(function() {
'use strict';
// Your code here...
let container;
let camera, scene, renderer;
let video, texture, material, mesh;
let composer;
let mouseX = 0;
let mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let cube_count;
let hue, counter = 1;
const meshes = [],
materials = [],
xgrid = 20,
ygrid = 10;
init();
animate();
function init() {
container = document.createElement( 'div' );
container = document.getElementsByClassName( 'video-stream html5-main-video' )[0].parentElement;
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0.5, 1, 1 ).normalize();
scene.add( light );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
video = document.getElementsByClassName( 'video-stream html5-main-video' )[0];
video.play();
video.addEventListener( 'play', function () {
this.currentTime = 3;
} );
texture = new THREE.VideoTexture( video );
//
let i, j, ox, oy, geometry;
const ux = 1 / xgrid;
const uy = 1 / ygrid;
const xsize = 480 / xgrid;
const ysize = 204 / ygrid;
const parameters = { color: 0xffffff, map: texture };
cube_count = 0;
for ( i = 0; i < xgrid; i ++ ) {
for ( j = 0; j < ygrid; j ++ ) {
ox = i;
oy = j;
geometry = new THREE.BoxGeometry( xsize, ysize, xsize );
change_uvs( geometry, ux, uy, ox, oy );
materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
material = materials[ cube_count ];
material.hue = i / xgrid;
material.saturation = 1 - j / ygrid;
material.color.setHSL( material.hue, material.saturation, 0.5 );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = ( i - xgrid / 2 ) * xsize;
mesh.position.y = ( j - ygrid / 2 ) * ysize;
mesh.position.z = 0;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
scene.add( mesh );
mesh.dx = 0.001 * ( 0.5 - Math.random() );
mesh.dy = 0.001 * ( 0.5 - Math.random() );
meshes[ cube_count ] = mesh;
cube_count += 1;
}
}
renderer.autoClear = false;
document.addEventListener( 'mousemove', onDocumentMouseMove );
// postprocessing
const renderModel = new THREE.RenderPass( scene, camera );
const effectBloom = new THREE.BloomPass( 1.3 );
const effectCopy = new THREE.ShaderPass( THREE.CopyShader );
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectCopy );
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer.setSize( window.innerWidth, window.innerHeight );
}
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
const uvs = geometry.attributes.uv.array;
for ( let i = 0; i < uvs.length; i += 2 ) {
uvs[ i ] = ( uvs[ i ] + offsetx ) * unitx;
uvs[ i + 1 ] = ( uvs[ i + 1 ] + offsety ) * unity;
}
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY ) * 0.3;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
const time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
for ( let i = 0; i < cube_count; i ++ ) {
material = materials[ i ];
hue = ( 360 * ( material.hue + time ) % 360 ) / 360;
material.color.setHSL( hue, material.saturation, 0.5 );
}
if ( counter % 1000 > 200 ) {
for ( let i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.rotation.x += 10 * mesh.dx;
mesh.rotation.y += 10 * mesh.dy;
mesh.position.x -= 150 * mesh.dx;
mesh.position.y += 150 * mesh.dy;
mesh.position.z += 300 * mesh.dx;
}
}
if ( counter % 1000 === 0 ) {
for ( let i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.dx *= - 1;
mesh.dy *= - 1;
}
}
counter ++;
renderer.clear();
composer.render();
}
})();
结果：