three.jsglsltexturescropplane
THREE.JS | GLSL How to split canvas texture to multiple planes
I have a small demo, there I have multiple planes stacked together inside 1024x1024 area. The task it to evenly split 1024x1024 animated canvas texture, so I would get the following result:
Not this:
So, I have somehow to pass to their shaders material which part from canvas texture I need to crop. And I don't know how to do it.
The current code is attached here.
The following answer is great, but I have to use glsl for these planes, so this solution could fit other tasks, not mine.
var renderer, scene, camera, controls, glslMaterial, uniforms, canvas, ctx, markupTexture, t = 0.0;
inits();
function inits(){
canvas = document.createElement("canvas")
canvas.width = 1024 * 2;
canvas.height = 1024 * 2;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00FFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
markupTexture = new THREE.CanvasTexture(canvas);
//markupTexture.flipX = false;
//markupTexture.flipY = false;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
var light = new THREE.HemisphereLight( 0xFFFFFF, 0x080820, 2.0 );
scene.add( light );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5120 );
camera.position.set(-200, 400, 400);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var markupGeometry = new THREE.PlaneGeometry(1024, 1024, 64, 64);
var markupPlane = new THREE.Mesh(markupGeometry, new THREE.MeshBasicMaterial({ color: 0xFFFFFF, map: markupTexture, side: THREE.DoubleSide }));
markupPlane.rotation.set(-Math.PI / 2, 0, 0);
markupPlane.position.set(0, 1, 0);
//scene.add(markupPlane);
var uniforms = {
markup: { type: 't', value: markupTexture }
};
glslMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
//side: new THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
var plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane0";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(256, 0, -256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane1";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane2";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane3";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane4";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane5";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-256, 0, 256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane6";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane7";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane8";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane9";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -384)
scene.add(plane);
window.addEventListener( "resize", onWindowResize, false );
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
ctx.imageSmoothingEnabled = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FFFF00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(1024, 1024, 640, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF00FF";
ctx.lineWidth = 16.0;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1024, 1024);
ctx.arc(1024, 1024, 640, t - Math.PI / 8, t + Math.PI / 8, false);
ctx.lineTo(1024, 1024);
ctx.fillStyle = "#FF00FF";
ctx.fill();
controls.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
for(var i = 0; i < 10; i++){
scene.getObjectByName("plane" + i).material.uniforms.markup.needsUpdate = true;
}
//glslMaterial.uniforms.markup.needsUpdate = true;
markupTexture.needsUpdate = true;
t += 0.05;
}
body { margin: 0px; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D markup;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(markup, vUv);
}
</script>
</body>
</html>Solution
You don't need a custom shader. You just need to set the texture coordinates for each plane.
Here's a function to scale and offset the texture coordinates
function offsetUVs(geometry, offU, offV, scaleU, scaleV) {
const off = new THREE.Vector2(offU, offV);
const scale = new THREE.Vector2(scaleU, scaleV);
for(const uvs of geometry.faceVertexUvs[0]) {
for (const uv of uvs) {
uv.multiply(scale);
uv.add(off);
}
}
}
If you set the scale to 0.25, 0.25 then one 16th of the texture will appear on that plane (as in if the texture was divided into a 4x4 grid)
The offset will move the texture where 1 is the full length of the texture, 0.5 is half the length, 0.25 is a quarter of the length
var renderer, scene, camera, controls, glslMaterial, uniforms, canvas, ctx, markupTexture, t = 0.0;
inits();
function inits(){
canvas = document.createElement("canvas")
canvas.width = 1024 * 2;
canvas.height = 1024 * 2;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00FFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
markupTexture = new THREE.CanvasTexture(canvas);
//markupTexture.flipX = false;
//markupTexture.flipY = false;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
var light = new THREE.HemisphereLight( 0xFFFFFF, 0x080820, 2.0 );
scene.add( light );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5120 );
camera.position.set(-200, 400, 400);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var markupGeometry = new THREE.PlaneGeometry(1024, 1024, 64, 64);
var markupPlane = new THREE.Mesh(markupGeometry, new THREE.MeshBasicMaterial({ color: 0xFFFFFF, map: markupTexture, side: THREE.DoubleSide }));
markupPlane.rotation.set(-Math.PI / 2, 0, 0);
markupPlane.position.set(0, 1, 0);
//scene.add(markupPlane);
/*glslMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
//side: new THREE.DoubleSide
});
*/
const simple = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, map: markupTexture, side: THREE.DoubleSide });
var geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
offsetUVs(geometry, 0.5, 0.5, 0.5, 0.5);
var plane = new THREE.Mesh(geometry, simple);
plane.name = "plane0";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(256, 0, -256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.75, 0.25, 0.25, 0.25);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane1";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.5, 0.25, 0.25, 0.25);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane2";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.5, 0, 0.25, 0.25);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane3";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.75, 0, 0.25, 0.25);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane4";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
offsetUVs(geometry, 0, 0, 0.5, 0.5);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane5";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-256, 0, 256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.0, 0.5, 0.25, 0.25);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane6";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.25, 0.5, 0.25, 0.25);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane7";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.25, 0.75, 0.25, 0.25);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane8";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.0, 0.75, 0.25, 0.25);
plane = new THREE.Mesh(geometry, simple);
plane.name = "plane9";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -384)
scene.add(plane);
window.addEventListener( "resize", onWindowResize, false );
animate();
}
function offsetUVs(geometry, offU, offV, scaleU, scaleV) {
const off = new THREE.Vector2(offU, offV);
const scale = new THREE.Vector2(scaleU, scaleV);
for(const uvs of geometry.faceVertexUvs[0]) {
for (const uv of uvs) {
uv.multiply(scale);
uv.add(off);
}
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
ctx.imageSmoothingEnabled = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FFFF00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(1024, 1024, 940, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF00FF";
ctx.lineWidth = 16.0;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1024, 1024);
ctx.arc(1024, 1024, 940, t - Math.PI / 8, t + Math.PI / 8, false);
ctx.lineTo(1024, 1024);
ctx.fillStyle = "#FF00FF";
ctx.fill();
markupTexture.needsUpdate = true;
controls.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
t += 0.05;
}body { margin: 0px; }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
</body>
</html>Ps: I made the circle bigger so it touched all the planes otherwise 2 corners were solid yellow so it was hard to see if they were correct.
See this article as a reference for the structure of geometry
The same solution will work just fine with your custom shader as well
var renderer, scene, camera, controls, glslMaterial, uniforms, canvas, ctx, markupTexture, t = 0.0;
inits();
function inits(){
canvas = document.createElement("canvas")
canvas.width = 1024 * 2;
canvas.height = 1024 * 2;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00FFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
markupTexture = new THREE.CanvasTexture(canvas);
//markupTexture.flipX = false;
//markupTexture.flipY = false;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
var light = new THREE.HemisphereLight( 0xFFFFFF, 0x080820, 2.0 );
scene.add( light );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5120 );
camera.position.set(-200, 400, 400);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var markupGeometry = new THREE.PlaneGeometry(1024, 1024, 64, 64);
var markupPlane = new THREE.Mesh(markupGeometry, new THREE.MeshBasicMaterial({ color: 0xFFFFFF, map: markupTexture, side: THREE.DoubleSide }));
markupPlane.rotation.set(-Math.PI / 2, 0, 0);
markupPlane.position.set(0, 1, 0);
//scene.add(markupPlane);
var uniforms = {
markup: { type: 't', value: markupTexture }
};
glslMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
//side: new THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
offsetUVs(geometry, 0.5, 0.5, 0.5, 0.5);
var plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane0";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(256, 0, -256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.75, 0.25, 0.25, 0.25);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane1";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.5, 0.25, 0.25, 0.25);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane2";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.5, 0, 0.25, 0.25);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane3";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.75, 0, 0.25, 0.25);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane4";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
offsetUVs(geometry, 0, 0, 0.5, 0.5);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane5";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-256, 0, 256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.0, 0.5, 0.25, 0.25);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane6";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.25, 0.5, 0.25, 0.25);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane7";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.25, 0.75, 0.25, 0.25);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane8";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
offsetUVs(geometry, 0.0, 0.75, 0.25, 0.25);
plane = new THREE.Mesh(geometry, glslMaterial);
plane.name = "plane9";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -384)
scene.add(plane);
window.addEventListener( "resize", onWindowResize, false );
animate();
}
function offsetUVs(geometry, offU, offV, scaleU, scaleV) {
const off = new THREE.Vector2(offU, offV);
const scale = new THREE.Vector2(scaleU, scaleV);
for(const uvs of geometry.faceVertexUvs[0]) {
for (const uv of uvs) {
uv.multiply(scale);
uv.add(off);
}
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
ctx.imageSmoothingEnabled = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FFFF00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(1024, 1024, 940, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF00FF";
ctx.lineWidth = 16.0;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1024, 1024);
ctx.arc(1024, 1024, 940, t - Math.PI / 8, t + Math.PI / 8, false);
ctx.lineTo(1024, 1024);
ctx.fillStyle = "#FF00FF";
ctx.fill();
markupTexture.needsUpdate = true;
controls.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
t += 0.05;
}body { margin: 0px; }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D markup;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(markup, vUv);
}
</script>
</head>
<body>
</body>
</html>you can also do the same uv manipulation in the shader but you'll need to create a new material for each plane so you can pass in a different offset and scale for each one.
var renderer, scene, camera, controls, glslMaterial, uniforms, canvas, ctx, markupTexture, t = 0.0;
inits();
function inits(){
canvas = document.createElement("canvas")
canvas.width = 1024 * 2;
canvas.height = 1024 * 2;
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00FFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
markupTexture = new THREE.CanvasTexture(canvas);
//markupTexture.flipX = false;
//markupTexture.flipY = false;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
var light = new THREE.HemisphereLight( 0xFFFFFF, 0x080820, 2.0 );
scene.add( light );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5120 );
camera.position.set(-200, 400, 400);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var markupGeometry = new THREE.PlaneGeometry(1024, 1024, 64, 64);
var markupPlane = new THREE.Mesh(markupGeometry, new THREE.MeshBasicMaterial({ color: 0xFFFFFF, map: markupTexture, side: THREE.DoubleSide }));
markupPlane.rotation.set(-Math.PI / 2, 0, 0);
markupPlane.position.set(0, 1, 0);
//scene.add(markupPlane);
function createMaterial(offX, offY, scaleX, scaleY) {
var uniforms = {
uvOffset: { value: new THREE.Vector2(offX, offY) },
uvScale: { value: new THREE.Vector2(scaleX, scaleY) },
markup: { type: 't', value: markupTexture }
};
return new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
//side: new THREE.DoubleSide
});
}
var geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
var plane = new THREE.Mesh(geometry, createMaterial(0.5, 0.5, 0.5, 0.5));
plane.name = "plane0";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(256, 0, -256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, createMaterial(0.75, 0.25, 0.25, 0.25));
plane.name = "plane1";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, createMaterial(0.5, 0.25, 0.25, 0.25));
plane.name = "plane2";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, createMaterial(0.5, 0, 0.25, 0.25));
plane.name = "plane3";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(128, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, createMaterial(0.75, 0, 0.25, 0.25));
plane.name = "plane4";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(384, 0, 384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(512, 512, 64, 64);
plane = new THREE.Mesh(geometry, createMaterial(0, 0, 0.5, 0.5));
plane.name = "plane5";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-256, 0, 256)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, createMaterial(0.0, 0.5, 0.25, 0.25));
plane.name = "plane6";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, createMaterial(0.25, 0.5, 0.25, 0.25));
plane.name = "plane7";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -128)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, createMaterial(0.25, 0.75, 0.25, 0.25));
plane.name = "plane8";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-128, 0, -384)
scene.add(plane);
geometry = new THREE.PlaneGeometry(256, 256, 32, 32);
plane = new THREE.Mesh(geometry, createMaterial(0.0, 0.75, 0.25, 0.25));
plane.name = "plane9";
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(-384, 0, -384)
scene.add(plane);
window.addEventListener( "resize", onWindowResize, false );
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
ctx.imageSmoothingEnabled = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FFFF00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(1024, 1024, 940, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF00FF";
ctx.lineWidth = 16.0;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(1024, 1024);
ctx.arc(1024, 1024, 940, t - Math.PI / 8, t + Math.PI / 8, false);
ctx.lineTo(1024, 1024);
ctx.fillStyle = "#FF00FF";
ctx.fill();
controls.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
markupTexture.needsUpdate = true;
t += 0.05;
}body { margin: 0px; }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D markup;
uniform vec2 uvOffset;
uniform vec2 uvScale;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(markup, vUv * uvScale + uvOffset);
}
</script>
</body>
</html>- THREE.BufferGeometry - How do I manually set face colors?
- Threejs Phone rotate on scroll with react-three/fiber
- Debug GLSL code in webgl
- How to write right repeat texture with three.js
- What’s the difference between linear depth, perspective depth, and orthographic depth?
- How to project a rectangle onto a Mesh/Terrain object, for use as a select marquee? (in three.js)
- OrbitControls in ThreeJS not working with import map
- Error compiling fragment shader in Three.js: 'texture' not found
- OrbitControls of THREE.js displaying error
- Angular2 using threejs Orbitcontrols
- Get euler rotation from Quaternion?
- Three.js breaks when trying to import OrbitControls.js
- How to get Orientation of Camera in THREE.js
- THREE.SpriteAlignment showing up as undefined
- Get he mesh from the DracoLoader of ThreeJS
- InstancedMesh with unique texture per instance
- What is the URL for three.js to include it online?
- Glossy materials in THREE.js
- How To Animate Camera.lookAt using Three JS
- Can't clone() Texture
- How to center a THREE.Group based on the width of its children?
- Meshes overlapping with sin() and cos() animation
- ThreeJS predefined shader attributes / uniforms
- How can I use ThreeJS in my Android app , or is there any library similar and powerful like three js
- Error: R3F: AndroidProgressBar is not part of the THREE namespace! Did you forget to extend?
- Three.js - How can I calculate the distance between two 3D positions?
- Three.js | OrbitControls | How to change center?
- Rendering a large number of colored particles using three.js and the canvas renderer
- Add custom event to Object3D
- built dose not shoot straight in three.js