Hello every one.
I need to change the wall background image.
I am working in three js scripting language, I need to change wall background images as dynamic and if scene rotate then wall also be rotate.
=> I have make the scene wall transparent and apply the background image under the scene, currently scene move but background image does not move.
Please give me suggestion different wall apply different image texture.
thanks.
Does this mean you are using scene.background? Can you please show some code that illustrates how you create your “background image”?
I am using this code.
three.js webgl - loaders - OBJ loader</head>
<body>
<div id="info">
</div>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script>
var container;
var globalObject;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var isMoving = false;
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 180, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.target = new THREE.Vector3(0, 0, 0);
// scene
var scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor( 0x39CBB9 ); // the default
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0x00ff00, 1.2);
scene.add( ambientLight );
// texture object
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var textureLoader = new THREE.TextureLoader( manager );
var materia = new THREE.MeshBasicMaterial({
map: textureLoader.load('images/Living-Room-02.png'),
alphaTest: 0.5,
transparent : true
});
var mesh = new THREE.Mesh(
new THREE.SphereBufferGeometry(500, 60, 40).scale(-1, 1, 1),
materia
);
scene.add(mesh);
var aluminium_texture = THREE.ImageUtils.loadTexture('img/aluminium.jpg');
var texture = textureLoader.load( 'img/texture11.png' );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(10, 10);
texture.anisotropy = 16;
// model
scene.background=texture;
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {};
var loader = new THREE.OBJLoader( manager );
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('wheel', onDocumentMouseWheel, false);
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
if (isMoving) {
lon += 0.2;
}
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.target.x = 500 * Math.sin(phi) * Math.cos(theta);
camera.target.y = 500 * Math.cos(phi);
camera.target.z = 500 * Math.sin(phi) * Math.sin(theta);
camera.lookAt(camera.target);
//camera.lookAt( scene.position );
renderer.render( scene, camera );
}
function onDocumentMouseDown(event) {
event.preventDefault();
isUserInteracting = true;
onMouseDownMouseX = event.clientX;
onMouseDownMouseY = event.clientY;
onMouseDownLon = lon;
onMouseDownLat = lat;
}
function onDocumentMouseMove(event) {
if (isUserInteracting === true) {
lon = (onMouseDownMouseX - event.clientX) * 0.1 + onMouseDownLon;
lat = (event.clientY - onMouseDownMouseY) * 0.1 + onMouseDownLat;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
}
function onDocumentMouseWheel(event) {
var fov = camera.fov + event.deltaY * 0.25;
camera.fov = THREE.Math.clamp(fov, 10, 75);
camera.updateProjectionMatrix();
}
function movingPlay() {
if (isMoving === true) {
isMoving = false;
// $('#play').text('Play ').removeClass('btn-danger').addClass('btn-success');
} else {
isMoving = true;
//$('#play').text('Pause').addClass('btn-danger').removeClass('btn-success');
}
}
function updateTextureImg(texture_img,intensity) {
texture=THREE.ImageUtils.loadTexture(texture_img);
globalObject.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = THREE.ImageUtils.loadTexture(texture_img);
//child.alphaTest= 0.5;
child.material.needsUpdate = true;
}
} );
//ambientLight.intensity=intensity;
}
function rollType(type){
if(type==1){
globalObject=inside_object;
outside_object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.visible = false;
}
} );
}if(type==2){
globalObject=outside_object;
inside_object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.visible = false;
}
});
}
globalObject.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture
child.visible = true;
}
});
}
animate();
</script>
</body>
Yes, I have used
scene.background=texture;
I think this is not right way?
can U send full source code for me? please!