Can I add more than one Mesh to the Scene in three.js? Code below shows my attempt to add a second Mesh to the Scene, however, it is not visible.
function setScene() {
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
materials = new THREE.ShaderMaterial({
fragmentShader: Cam.fragmentShader,
vertexShader: Cam.vertexShader,
uniforms: Cam.uniforms,
side: THREE.BackSide,
transparent: true
});
var skyBox = new THREE.Mesh( geometry, materials );
Cam.scene.add( skyBox );
// Add second SkyBox to the Scene
THREE.ImageUtils.crossOrigin = '';
var loader = new THREE.TextureLoader();
loader.load('img/test-circle-sample.png', function ( texture ) {
var geometry = new THREE.PlaneGeometry( 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map:texture,
opacity : 1,
side : THREE.DoubleSide,
transparent : false
} );
var sprite = new THREE.Mesh( geometry, material );
sprite.position.set(0,-3,7);
var rotation = new THREE.Matrix4()
.makeRotationAxis(new THREE.Vector3(1,0,0), 1.57);
sprite.rotation.setFromRotationMatrix(rotation);
Cam.scene.add(sprite);
});
}
Above code adds a panoramic image successfully, which I can see. I then attempt to add an overlay image to the scene that should stay on top of the panoramic image, but it remains hidden.
Note, if I do not add the first object (panoramic image) to the scene (i.e. remove Cam.scene.add( skyBox )) then the second overlay image appears fine.
Related
// Make a cube with Lambert material
// ---------------------------------
// Lower fragments can increase performance
var cubeWidth = cubeSize,
cubeHeight = cubeSize,
cubeDepth = 10,
cubeQuality = 1;
// create the cube's material
var cubeMaterial = new THREE.MeshLambertMaterial(
{
color: 0xb22222
}
);
// create a cube with sphere geometry and the meterial
cube = new THREE.Mesh(
new THREE.BoxGeometry(
cubeWidth,
cubeHeight,
cubeDepth,
cubeQuality,
cubeQuality,
cubeQuality
),
cubeMaterial);
lift the cube to half of the playing space height
cube.position.z = fieldDepth/2;
set the cube x position in the left of the play field
cube.position.x = -fieldWidth/3;
----------add the cube to the scene-------------------------
scene.add(cube);
I have tried ;
var texture = new THREE.TextureLoader();
var texture1 = texture.load('scripts/kan.png');
cube = new THREE.Mesh(
new THREE.BoxGeometry(
cubeWidth,
cubeHeight,
cubeDepth,
cubeQuality,
cubeQuality,
cubeQuality
));
var cubeMaterial = new THREE.MeshBasicMaterial(
{
map: texture1
//color: 0xb22222
}
);
// create a cube with sphere geometry and the meterial
mesh = new THREE.Mesh( cube, cubeMaterial );
And this, but it didn't work
const texture = new THREE.TextureLoader().load( 'kan.png' );
var cubeMaterial = new THREE.MeshLambertMaterial(
{
//color: 0xb22222
map: texture
}
);
I am also getting the following error : THREE.Material: 'map' parameter is undefined
I'm Working with Threejs in which I'm Facing Problems with Textures, so I would like to ask A question that is, how to load the textures without starting the animation, it shows blank image without starting the animation. Can anyone tell me how to do that..
var geometry = new THREE.PlaneGeometry( 15, 5.3, 2 );
var te = new THREE.ImageUtils.loadTexture("b4.jpg") ;
var material = new THREE.MeshBasicMaterial( {color: "",map:te} );
plane = new THREE.Mesh( geometry, material);
plane.position.set(-12.89,-7.2,19);
plane.visible=false;
scene.add( plane );
Did you try having a callback function to trigger after the texture is successfully loaded? Like how it is done in the documentation: TextureLoader
So something like:
var geometry = new THREE.PlaneGeometry( 15, 5.3, 2 );
var loader = new THREE.TextureLoader();
// load a resource
loader.load(
// resource URL
'b4.jpg',
// Function when resource is loaded
function ( texture ) {
// do something with the texture
var material = new THREE.MeshBasicMaterial( {color: "",map:te} );
plane = new THREE.Mesh( geometry, material);
plane.position.set(-12.89,-7.2,19);
plane.visible=false;
scene.add( plane );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
It's possible add an image to a cube face without change the base color of this?
I've trying this way but the base color turns black.
var loader = new THREE.TextureLoader();
loader.load( './img/arona.png', function ( texture ) {
var geometry = new THREE.BoxGeometry( 8 , 8 , 8 );
var material = new THREE.MeshBasicMaterial( { map: texture, color: 0xBC997A } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
And this is the result:
Thanks in advance.
I am attempting to have my skybox not be affected by the camera.far parameter. I would like to cull all other scene objects with this just not the skybox.
When I set skyBox.frustumCulled = false; it makes no difference. skyBox being the mesh of course.
Is this done by adding another render pass? If so I would need 2 different cameras one with a really high far value to allow viewing of the skybox right? How can this be done efficiently?
For clarity here is the snippet from my terrain object code used for drawing the skybox:
shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = this.cubetexture;
mat = new THREE.ShaderMaterial({
uniforms: shader.uniforms,
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
depthWrite: false,
side: THREE.BackSide
});
geo = new THREE.BufferGeometry().fromGeometry(new THREE.BoxGeometry(1024, 1024, 1024));
mesh = new THREE.Mesh(geo, mat);
mesh.rotation.y += 90;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 50;
mesh.frustumCulled = false;
mesh.matrixAutoUpdate = false;
mesh.rotationAutoUpdate = false;
mesh.updateMatrix();
this.skybox = mesh;
scene.add(this.skybox);
You're adding a skybox in the 'main' scene. A better way to accomplish a skydome would be to create a new scene. this will be the 'background' to your 'main' scene. There's also a discussion about skydomes v.s. skyboxes, simply put, a box saves polys, a dome looks better. in this example i'll be using a dome/sphere.
var renderer = new THREE.WebGLRenderer( {alpha: true, antialias: true} );
var mainScene = new THREE.Scene();
var mainCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000 );
var skydome = {
scene: new THREE.Scene(),
camera: new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000 );
};
skydome.material = new THREE.MeshBasicMaterial({color: 0x0F0F0F}) //the material for the skydome, for sake of lazyness i took a MeshBasicMaterial.
skydome.mesh = new THREE.Mesh(new THREE.SphereGeometry(100, 20, 20), skydome.material);
skydome.scene.add(skydome.mesh);
now, during the render function you adjust only the rotation of the skydome camera, not the position.
var render = function(){
requestAnimationFrame( render );
skydome.camera.quaternion = mainCamera.quaternion;
renderer.render(skydome.scene, skydome.camera); //first render the skydome
renderer.render(mainScene, mainCamera);//then render the rest over the skydome
};
renderer.autoclear = false; //otherwise only the main scene will be rendered.
How to add reflectionMaterial with environment map, am using two cameras and two scene in order to achieve it, based on the webgl_materials_cubemap
and am using Object that is loaded using OBJMTLLoder, i can see the both Environment map, and Object on my scene, but the reflection of environment is not working on the object..
find my code below :
var urls = [
'textures/cube/canary/pos-x.png',
'textures/cube/canary/neg-x.png',
'textures/cube/canary/pos-y.png',
'textures/cube/canary/neg-y.png',
'textures/cube/canary/pos-z.png',
'textures/cube/canary/neg-z.png'
];
var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
cubemap.format = THREE.RGBFormat;
var shader = THREE.ShaderLib['cube']; // init cube shader from built-in lib
shader.uniforms['tCube'].value = cubemap; // apply textures to shader
// create shader material
var skyBoxMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
});
skybox = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
scene.add( skybox );
var object = scene.getObjectByName ("myname", true);
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
{
//child.geometry.computeFaceNormals();
var geometry = child.geometry;
var reflectionMaterial = new THREE.MeshBasicMaterial({
color: 0xcccccc,
envMap: cubemap
});
mesh = new THREE.Mesh(geometry, reflectionMaterial);
sceneCube.add(mesh);
}
});
Here am just changing the scene.add(mesh); to sceneCube.add(mesh); the reflection worked but the camera doesn't ..
you can see the differences here
Example 1
Example 2
In the first demo you can see that the scene working fine with the environment and without Object reflection
In the second you can see that the Reflection working fine but the camera behavior gets wired
i fixed it myself by adding following line inside the Object traverse
child.material.map = reflectionMaterial;
child.material.needsUpdate = true;
However i don't know am doing is correct or not but it is worked as like expected,