Im working on creating a cube that reflects of an video-envmap but I cant seam to find any solution or examples on how to do this just googeling.
I have a working example of the cube with an envmap consisting of jpgs here
I have tried to simply replace the jpgs with webm & mov video files, but it does not seam to work.
Can this even be done?
Here is a relevant snippet of my code:
var env_url = [
'textures/dawnmountain-xneg.png',
'textures/dawnmountain-xneg.png',
'textures/dawnmountain-xneg.png',
'textures/dawnmountain-xneg.png',
'textures/dawnmountain-xneg.png',
'textures/dawnmountain-xneg.png'
];
var enviro = new THREE.ImageUtils.loadTextureCube(env_url);
var cubeMaterial = new THREE.MeshPhongMaterial({
envMap: enviro,
shading: THREE.SmoothShading,
metal: true,
combine: THREE.MixOperation,
reflectivity: 0.70,
specular: 0x7a7a7a,
bumpMap: mapHeight,
bumpScale: 0.03,
});
Yes it can be done but not so automatically, and not without modifying three.js rendering code I think.
You need to update the three.js texture from the video. Video files don't work directly as textures on 3D objects, you can only use images directly like that.
For a normal texture, it is quite simple though and jetienne provides a nice simple utility for it at https://github.com/jeromeetienne/threex.videotexture -- there are demos too.
That is not supported out of the box for envMaps though.
Related
If I set the renderTarget mapping for my cube camera to THREE.CubeRefractionMapping, it renders upside down.
_myCubeCamera.renderTarget.mapping = THREE.CubeRefractionMapping;
It seems related to the issue discussed in this post where the default orientation of the CubeCamera's component cameras are upside down. I tried tinkering around with these orientations in the THREE.js source code but only made things worse.
So, is there a correct way to use CubeRefractionMapping with CubeCamera? or a workaround?
r73
I found a workaround: When assigning the envMap to the material, use THREE.BackSide.
var sphereMaterial = new THREE.MeshBasicMaterial(
{
envMap: myCubeCamera.renderTarget,
side: THREE.BackSide,
refractionRatio: .09
} );
A complete example is here.
Not sure why this works, but it does, and that's what the original poster (me!) wanted.
In my current project, I need a way to outline a mesh.This color outline will represent the object's current state, relevant for me.
The problem is that it is a custom mesh, loaded using JSONLoader.
I've tried different approaches, following (mainly) these 2 examples: https://stemkoski.github.io/Three.js/Outline.html and
THREEx.geometricglow. In both cases, I scale the mesh outline to a bit bigger than the original. My main problem is that scaling equally in all axis will not cover my object the way I intended to.
Here is the code I'm using:
var outlineMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.BackSide, transparent: true, opacity:0.5 } );
var outlineMesh2 = new THREE.Mesh( object.geometry, outlineMaterial2 );
outlineMesh2.position.copy(object.position);
outlineMesh2.scale.copy(object.scale);
outlineMesh2.scale.multiplyScalar(1.1)
scene.add( outlineMesh2 );
`
With a simple cube mesh, the outline will be good.
But with my custom mesh, the scale will not fit the shape correctly.
Here is a image demonstrating: http://s13.postimg.org/syujtd75z/print1.png
Also, using Stemkoski approach, the outlining mesh will also show in front of the object, not just outline (as seen in the above picture).
My question is: How should I resize the mesh? For what I know, it might have something to do with face normals.
Thanks for your time.
I'm currently working on my first three js project, and getting quite an education. But, I've hit a wall, and am seeking a generalized outline of what to do.
I have three images that I want to use as background images. I want them to crossfade at a specified interval... let's say every 5 seconds, the background crossfades to the next one. After the last background is displayed, crossfade into the first one, and so forth in a loop.
I've found a few examples where there's crossfading between two objects, like this fiddle, but that seems to depend on having two cameras. I've taken other examples I've found as far as I could, nothing worthy of posting.
I don't understand enough about three, which is why I'm seeking help. If someone could help me define my approach, that would be fantastic. Should I be altering the opacity of my meshes? Doing something with shaders? Something else?
Here, at least, is how I'm adding one background:
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 450;
scene = new THREE.Scene();
// Load the background texture
var summerTexture = THREE.ImageUtils.loadTexture( 'tree-animation/images/summer.png' );
summerMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({
map: summerTexture,
}));
summerMesh.material.depthTest = false;
summerMesh.material.depthWrite = false;
backgroundCamera = new THREE.Camera();
summerScene = new THREE.Scene();
summerScene.add(backgroundCamera);
summerScene.add(summerMesh);
Any direction would be most appreciated!
This can be achieved by writing a custom shader and using the mix() or smooth-step() function between the images and add a clock to your render loop to update the shader uniforms to manipulate the transition in your shader over time.
Here is an example of a static blend of textures but can easily intergrated into your own project:
http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html
check the frag shader
Can you help me? I try to make music visualization http://webmaster9.ru/freelance/mysicusa/ it based on http://iacopoapps.appspot.com/hopalongwebgl/
I have signal (level of music) but cant change visual effects according music. It use
var materials = new THREE.ParticleBasicMaterial( { size: (3 ), map: sprite1, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
materials.color.setHSV(hueValues[s], DEF_SATURATION, DEF_BRIGHTNESS);
var particles = new THREE.ParticleSystem( geometry, materials );
particles.myMaterial = materials;
1 Can I change opacity or brightness according music? Probably using controls? can you show me examples?
2 Can I change texture according music?
2 Can I add light and change light according music?
Thank you
For sure you can get the generated audio data from DOM and use in WebGL javascript part to handle values or even use THREE.js to handle those values.
Just take a look how web-audio works
I found some of the examples enable this property, but there're not enough comments to make me understand what it matters.
Could you please tell me what's the best practice of this property?
EDIT: PointCloud is now Points, and the .sortParticles property has been removed. That means the points are rendererd in the order they exist in the buffer. The answer below is outdated. three.js r.73
This is a perfect example of why it is important to understand at least the basic concepts of webGL if you are using three.js. (See this SO post.)
You need to set PointCloud.sortParticles = true if the rendering order matters.
Here is an example where the rendering order matters:
var material = new THREE.PointCloudMaterial( {
map: texture, // has transparent areas
transparent: true
} );
var pointCloud = new THREE.PointCloud( geometry, material );
pointCloud.sortParticles = true; // the default is false
In this case, the renderer will sort the points by depth, so points further from the camera are rendered first, and show through the transparent areas of the closer ones.
Here is an example where rendering order does not matter:
var material = new THREE.PointCloudMaterial( {
map: texture,
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true
} );
// point cloud
var pointCloud = new THREE.PointCloud( geometry, material );
Since sorting occurs on the CPU-side, it is best to choose your material settings wisely, so you can avoid the overhead -- especially for large systems.
I suggest you build a testbed and experiment. There are many, many possible cases to consider.
three.js r.69