Three.js is awesome! I'm having trouble adding a static background scene to earth.html demo. I've tried using CSS, this code
var texture = new THREE.ImageUtils.loadTexture( 'rainier.jpg' );
var backgroundMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({ map: texture
}));
backgroundMesh .material.depthTest - false;
backgroundMesh .material.depthWrite - false;
//Background Scene
var backgroundScene - new THREE.Scene();
var backgroundCamera - new THREE.Camera();
backgroundScene .add(backgroundCamera );
backgroundScene .add(backgroundMesh );
to no avail! So far I've changed the texture of the sphere successfully. When I add the code above it displays the background and no sphere? This is my first experience with THREE.js. I started with modifying a demo to get the feel for the syntax and operations. Any help would be greatly appreciated!
Related
I am new to three js. i want to display a video on plane Geometry . i tried with the following code but it is showing a blank web page with out any errors
var video = document.getElementById('video');
video.src = "***VIDEO URL***";
video.load();
video.play();
var texture = new THREE.VideoTexture(videoImage);
texture.needsUpdate;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.crossOrigin = 'anonymous';
var meshPlace = new THREE.Mesh(
new THREE.PlaneGeometry(USE_WIDTH, USE_HEIGHT , 40),
new THREE.MeshBasicMaterial({ map: texture }),);
scene.add( meshPlace );
Think of video as a sequence of images. So to "play" this video on your 3D object - you'll have to pass every single frame of that sequence to your material and then update that material.
Good place to start is here: https://github.com/mrdoob/three.js/wiki/Updates
And here: http://stemkoski.github.io/Three.js/Video.html
I fount this on Using Video as texture with Three.js
Hope this helps :)
I would like to use the rendering result of the scene as a texture in ThreeJS.
Does ThreeJS have such a function?
Do I need to modify ThreeJS?
Thanks.
You can render a scene to a texture by passing a THREE.WebGLRenderTarget to THREE.WebGLRenderer.render().
First, create a render target of the desired size (this is your texture) :
var renderer = new THREE.WebGLRenderer();
var renderTarget = new THREE.WebGLRenderTarget(512, 512);
You can then use THREE.WebGLRenderTarget.texture on a material :
var geometry = new THREE.PlaneGeometry(1.0, 1.0);
var material = new THREE.MeshBasicMaterial({
map: renderTarget.texture
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Finally render the scene in 2 passes :
renderer.render(fakeScene, fakeCamera, renderTarget);
renderer.render(scene, camera);
You may want to create a new scene and a new camera to render on the renderTarget. It depends on what you want to do.
Take a look at this fiddle and this example.
I am struggling with texture..
see http://jsfiddle.net/henros/e6zs9mcj/3/
Can someone tell me why the color for the cube is not added..
See line 105 - 109
var geometry2 = new THREE.BoxGeometry(50,50,50);
var material2 = new THREE.MeshBasicMaterial({color: 0x000000});
var cube2 = new THREE.Mesh(geometry2, material2);
cube2.position.set(-300,0,25)
scene.add(cube2);
The code defines a fog that seems to interact with the geometry. Disabling the fog or setting the I-don't-care-about-fog flag resolves the issue.
var material2 = new THREE.MeshBasicMaterial({color: 0x000000, fog: false});
Check your scene setup.
I´m new in Three.js and I need advice. After exporting model from Blender (version 2.71) and loading to scene I see one side textured on my three.....but second side is without texture..... I must enable double side texture, however I don´t know how. I try some examples, but nothing works. I using .PNG texture format with alpha-chanel.. I also try in Blender activated double side, but nothing happends.
Here is my loading code:
var three1;
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('3D/three1.js', addthree1ToScene);
function addthree1ToScene( geometry, materials )
{
var materiall = new THREE.MeshFaceMaterial( materials );
three1 = new THREE.Mesh( geometry, materiall );
three1.scale.set( 0.8, 0.8, 0.8 );
three1.position.set(50,15.5,0);
scene.add( three1 );
}
Thanks for any advice! (Sorry for my english :) )
UPDATE:
..Something like this?..
var three1;
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('3D/three1.js', addthree1ToScene);
function addthree1ToScene( geometry, materials )
{
var materiall = new THREE.MeshFaceMaterial( materials );
for ( var i = 0; i < materials.length; i ++ )
{
var material = materials[i];
material.side = THREE.DoubleSide;
}
three1 = new THREE.Mesh( geometry, materiall );
three1.scale.set( 0.8, 0.8, 0.8 );
three1.position.set(50,15.5,0);
scene.add( three1 );
}
It´s working, BTW :)
For each material in your materials array, set
material.side = THREE.DoubleSide;
three.js r.68
I am new to three.js and what I done so far is: model a geometry in Blender, export it to JSON, and put it into my three.js scene.
It works fine with the basic three.js materials. Now I want to load a color, specular and normal map to my geometry. But everytime I try to add just a single texture, the geometry disappears in the browser.
Here is my code:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/schuh.js", addModelToScene );
var texture = new THREE.ImageUtils.loadTexture("images/test_COL.jpg");
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshBasicMaterial(map:texture});
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50,50,50);
scene.add( mesh );
}
what did I do wrong?
It looks like you are loading the texture after calling the addModelToScene function.
Try to change your code like this:
function someFunction() {
var texture = new THREE.ImageUtils.loadTexture("images/test_COL.jpg");
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/schuh.js', addModelToScene);
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshBasicMaterial({map:texture});
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50,50,50);
scene.add( mesh );
}