Develop Reference

three.js reflector (mirror) clipping object when HDRi background is set

I have scene with elements size over 500 units and i want to create mirror effect for them. to Reach descripted effect i used Reflector library from three.js webgl_mirror example.
I placed mirror on ground and most of meshes disappears or showing only small parts of surface when i set background hdri without its displayes normally. I builded other scene for tests and it looks like this unexpected effect begins when distance between mirror and obiect is over around 75 units (sometimes its less i dont know what its depends).
Image to preview on that effect
Is there any possibility that i could increase range of this clipping box size for that mirror? (i really want to avoid of scaling my actual created scene)
What i already tryed:
-changing my perspective camera far and near distances. - no effect
-manipulate paramets for clipBias and recursion or even increasing texture size. -no effect
-adding multiple lights around elements. -no effect
code that i used for experiment:
sceneSetup = () => {
//initialize
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
this.scene = new THREE.Scene();
let helperScene = this.scene;
this.camera = new THREE.PerspectiveCamera(60, width / height, 1, 500);
this.camera.position.z = 200;
this.controls = new OrbitControls(this.camera, document.body);
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(width, height);
this.mount.appendChild(this.renderer.domElement); //render to container (React staff)
///Load HDR map
new RGBELoader()
.setDataType(THREE.UnsignedByteType)
.load(HdrFile, function(texture) {
var envMap = pmremGenerator.fromEquirectangular(texture).texture;
helperScene.background = envMap; // comment to see issue
helperScene.environment = envMap;
texture.dispose();
pmremGenerator.dispose();
});
var pmremGenerator = new THREE.PMREMGenerator(this.renderer);
pmremGenerator.compileEquirectangularShader();
//create ground mirror
let geometry = new THREE.PlaneBufferGeometry(200, 200);
let groundMirror = new Reflector(geometry, {
clipBias: 0,
textureWidth: 1024,
textureHeight: 1024,
color: 0x889999,
recursion: 1
});
groundMirror .position.z = -20;
groundMirror .rotation.x = Math.PI * -0.5;
//change groundMirror .position.y to -104 and evrything looks fine;
groundMirror .position.y = -105;
this.scene.add(groundMirror );
};
addCustomSceneObjects = () => {
//create cube for reflect
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshPhongMaterial({
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
depthTest: true,
depthWrite: true
});
this.cube = new THREE.Mesh(geometry, material);
this.cube.position.y = 0;
this.scene.add(this.cube);
//radding lights
const lights = [];
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(-100, -200, -100);
this.scene.add(lights[0]);
this.scene.add(lights[1]);
this.scene.add(lights[2]);
};
startAnimationLoop = () => {
//rotate cube
this.cube.rotation.x += 0.01;
this.cube.rotation.y += 0.01;
this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
this.renderer.render(this.scene, this.camera);
};

Three.js - Map multiple images to a sphere and control each one

I have a 3D sphere that I want to map an array of images onto, and I want to be able to control each individual image i.e. fading out/in each image independently. I'll provide an example image of what I'm trying to achieve as I feel like that's the best way to explain it.
So as you can see above, 8 images per column and 16(?) per row.
I have been able to recreate the above image by simply mapping that image to a SphereGeometry, however I would like to be able to dynamically swap out images, and fade them in at different times.
What I've tried so far / My ideas:
I tried pushing 8 test images to an array and using that as the material map, and then looping through each face of the SphereGeometry and assigning a material index of 1 through 8 and then resetting after every 8 using modulo, but that didn't work:
function createGlobe() {
var geomGlobe = new THREE.SphereGeometry(40, 32, 16);
var l = geomGlobe.faces.length;
imageArray.push(new THREE.MeshBasicMaterial({map: texture1}));
imageArray.push(new THREE.MeshBasicMaterial({map: texture2}));
imageArray.push(new THREE.MeshBasicMaterial({map: texture3}));
imageArray.push(new THREE.MeshBasicMaterial({map: texture4}));
imageArray.push(new THREE.MeshBasicMaterial({map: texture5}));
imageArray.push(new THREE.MeshBasicMaterial({map: texture6}));
imageArray.push(new THREE.MeshBasicMaterial({map: texture7}));
imageArray.push(new THREE.MeshBasicMaterial({map: texture8}));
for (var i = 0; i < l; i++) {
geomGlobe.faces[i].materialIndex = i % 8;
}
Globe = new THREE.Mesh(geomGlobe, imageArray);
scene.add(Globe);
}
I think I need to count every 4 or 8 faces and then set the material
index for each one of those faces to be the same so that they all use
the same image, but I'm not sure if the faces line up correctly in
that way.
So essentially what I need:
A way to dynamically add images to a sphere in an 8 per column, 16 per row fashion, and the ability to manipulate each one of those images individually.
Any help is very appreciated because I'm very stuck!

I recommend making a large canvas and using that as your texture, then animating your transitions into the canvas, followed by setting texture.needsUpdate = true to update it on the GPU.
You may find that the texture updating takes too much time.. in which case, you could try making 2 canvasses+spheres.. and crossfade between them by changing the frontmost ones opacity.
Below is a snippet showing one way to fade one sphere into another with some randomly filled canvasses..
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45, // Field of view
w / h, // Aspect ratio
0.1, // Near
10000 // Far
);
camera.position.set(15, 10, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight(0xFFFF00);
light.position.set(20, 20, 20);
scene.add(light);
var light1 = new THREE.AmbientLight(0x808080);
light1.position.set(20, 20, 20);
scene.add(light1);
var light2 = new THREE.PointLight(0x00FFFF);
light2.position.set(-20, 20, -20);
scene.add(light2);
var light3 = new THREE.PointLight(0xFF00FF);
light3.position.set(-20, -20, -20);
scene.add(light3);
var sphereGeom = new THREE.SphereGeometry(5, 16, 16);
function rnd(rng) {
return (Math.random() * rng)
}
function irnd(rng) {
return rnd(rng) | 0
}
function randomCanvasTexture(sz) {
var canv = document.createElement('canvas');
canv.width = canv.height = sz;
var ctx = canv.getContext('2d')
for (var i = 0; i < 100; i++) {
ctx.fillStyle = `rgb(${irnd(256)},${irnd(256)},${irnd(256)})`
ctx.fillRect(irnd(sz), irnd(sz), 32, 32)
}
var tex = new THREE.Texture(canv);
tex.needsUpdate = true;
return tex;
}
var material = new THREE.MeshLambertMaterial({
color: 0x808080,
map: randomCanvasTexture(256)
});
var mesh = new THREE.Mesh(sphereGeom, material);
var mesh1 = mesh.clone()
mesh1.material = mesh.material.clone()
mesh1.material.transparent = true;
mesh1.material.opacity = 0.5;
mesh1.material.map = randomCanvasTexture(256)
scene.add(mesh);
scene.add(mesh1);
renderer.setClearColor(0xdddddd, 1);
(function animate() {
mesh1.material.opacity = (Math.sin(performance.now() * 0.001) + 1) * 0.5
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Without gunning for any optimizations, one could try something like this:
textures.forEach( tex=>{
const s = mySphere.clone()
s.material = s.material.clone()
tex.offset.copy(someOffset)
tex.repeat.copy(someRepeat)
tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping // or something like that
s.material.map = tex
s.material.transparent = true
scene.add(s)
})
The idea is to just draw the same sphere over and over, but masked with different offsets. It might not work with just the .map but it might work with alphaMap which is either all black or all white.

How to use a number of pictures to form a graphic in three.js

I want to use three.js to generate a shape(maybe some word) composed of some pictures like that:
I think what i have to do is get some points which form a shape, then put the picture to these points. I have searched for something information , but i still have no idea how can i get these points because the shape maybe irregular. Is there any solutions?

The way I see it, you have two ways to proceed here:
You can use a modeling software like Blender to first generate the shape along with the pictures, and then export the JSON (refer this for how to setup the threejs json exporter in blender ) and then use the JSON loader to load that JSON.
The other way is that you create simple geometries of your requried shape using the ones threejs provides like box, circle, etc ( refer docs ) and then add textures to it as shown here .
Hope one of these solutions is what you're looking for.

I would use the canvas to plot the 3d positions of each photo.
I created a fiddle here with text:
https://jsfiddle.net/2qu6m4h3/
And one with random shapes:
https://jsfiddle.net/d2th9ekb/
It creates a canvas element to draw text to. It interrogates the canvas for pixel positions. Those positions are then sent to a function which places cubes in 3d. Rather than place cubes you could place sprite objects which display each one of your photos. Use the scale property to give yourself more room between positions.
Here's the code:
/*
Start Setup text canvas and tools
*/
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 400;
ctx.canvas.height = 200;
function createTextSourceCanvas(text,src) {
src.font = '50pt Times';
src.fillStyle = '#00ff00';
src.fillRect(0, 0, canvas.width, canvas.height);
src.fillStyle = '#FFFFFF';
src.textAlign = "center";
src.textBaseline = "middle";
src.fillText(text, canvas.width /2, canvas.height /2);
}
function examineText(src, fi){
var positiveResults = [];
var width = src.canvas.width;
var height = src.canvas.height;
var imgData = src.getImageData(0, 0,width, height);
for(var x = 0; x < width; x+=fi){
for(var y = 0; y < height; y+=fi ){
var pixel = getPixelXY(imgData, x, y)
if(pixel[0] == 0 && pixel[1] == 255 && pixel[2] == 0){
continue;
}
positiveResults.push([x,y]);
}
}
return positiveResults;
}
function getPixel(imgData, index) {
var i = index*4, d = imgData.data;
return [d[i],d[i+1],d[i+2],d[i+3]]
}
function getPixelXY(imgData, x, y) {
return getPixel(imgData, y*imgData.width+x);
}
/*
End Setup text canvas and tools
*/
/*
Start Setup Threejs canvas and tools
*/
var scene;
var renderer;
var camera;
var cube;
var controls;
function init3d(){
renderer = new THREE.WebGLRenderer( {antialias:true} );
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize (width, height);
document.body.appendChild (renderer.domElement);
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
camera.position.y = 160;
camera.position.z = 400;
camera.lookAt (new THREE.Vector3(0,0,0));
controls = new THREE.OrbitControls (camera, renderer.domElement);
var gridXZ = new THREE.GridHelper(100, 10);
scene.add(gridXZ);
var pointLight = new THREE.PointLight (0xffffff);
pointLight.position.set (0,300,200);
scene.add (pointLight);
window.addEventListener ('resize', onWindowResize, false);
}
function onWindowResize (){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize (window.innerWidth, window.innerHeight);
}
function animate(){
controls.update();
requestAnimationFrame ( animate );
renderer.render (scene, camera);
}
/*
End Setup Threejs canvas and tools
*/
/*
Start create 3d from text examination
*/
function create3dProjectionText(scene, positions, wExtent, hExtent, scale){
if(scale == undefined){
scale = 1;
}
var group = new THREE.Object3D();
var cubeGeometry = new THREE.BoxGeometry (2,2,2);
var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0xFFFFFF});
for(var i in positions){
cube = new THREE.Mesh (cubeGeometry, cubeMaterial);
cube.position.set (positions[i][0]*scale - (wExtent*scale/2), positions[i][1]*scale -(hExtent*scale/2), 0);
group.add (cube);
}
group.rotateX( -Math.PI );
scene.add(group);
}
/*
End create 3d from text examination
*/
//initialize the 3d space
init3d();
//initialize the text canvas
createTextSourceCanvas("Hello World", ctx);
//
create3dProjectionText(scene, examineText(ctx ,4), ctx.canvas.width, ctx.canvas.height, 1.5);
animate();

Babylonjs load two images on top of eachother with the second image being transparent

I am using babylonjs to load up two images. One is a standard jpg image and teh second is a png image with transparent background When i load both the image loads on top of each other but the jpg image doesnt show through the area that should be transparent. Anyone know how i can do this.
var createScene = function() {
var scene = new BABYLON.Scene(engine);
//Create a light
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);
//Create an Arc Rotate Camera - aimed negative z this time
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 210, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
//Creation of a repeated textured material
var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
materialPlane.diffuseTexture = new BABYLON.Texture("images/art.jpg", scene);
//materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene);
//materialPlane.useAlphaFromDiffuseTexture
materialPlane.specularColor = new BABYLON.Color3(0, 0, 0);
materialPlane.backFaceCulling = false; //Allways show the front and the back of an element
var spotPlain = new BABYLON.StandardMaterial("texture", scene, true);
spotPlain.emissiveTexture = new BABYLON.Texture("images/scodix1.png", scene);
spotPlain.anisotropicFilteringLevel = 50;
//materialPlane.emissiveTexture = new BABYLON.Texture('images/transparent.png', scene);
//materialPlane.useAlphaFromDiffuseTexture
spotPlain.specularColor = new BABYLON.Color3(0, 0, 0);
spotPlain.backFaceCulling = false; //Allways show the front and the back of an element
//Creation of a plane
//var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
var plane = BABYLON.MeshBuilder.CreatePlane("plane", {
width: 261,
height: 153
}, scene);
plane.rotation.x = Math.PI / 2;
plane.material = materialPlane;
plane.material = spotPlain;
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});

you are overwriting the material here:
plane.material = materialPlane;
plane.material = spotPlain;
I suggest creating two planes

Three.js - How to make my text sprite clearer?

i need my text sprite to look more clear/strong (easiest to read), here is the code where i create it:
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 8px Arial";
context1.fillStyle = "rgba(255,0,0,0.95)";
context1.fillText(text, 170, 60);
var texture1 = new THREE.Texture(canvas1);
texture1.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial( { map: texture1, color: 0xffffff, fog: true } );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(window.innerWidth/5, window.innerHeight/5, 1);
var positionsT = positions.split(",");
sprite.position.set(positionsT[0]-20, positionsT[1]-80, positionsT[2]-40);
scene.add(sprite);
Could anybody give me some advice? this is how it looks at this moment: http://postimg.org/image/uqke1k35h/

One thing you can do is to turn off mip-mapping so that no texture filtering is applied texture1.generateMipmaps = false;
The other thing you can do is not scale the texture to an aspect ratio too much different from your canvas aspect ratio which of course depends on the size of your text.