Three.js 3D models are not looking well and clean - javascript

I am working on 3D Modelling using Thrre.js , and have to display neat and clean product after reading a .DAE file but my product display is not well clean and good . Can anybody please help me , i have also given the light sources but still product shown are very dull .Actual product to be shown
My product image render screen shot , no leather is shown in product and also very dull
I am trying following Code :
<script>
var renderer, scene, camera, controls, light;
var geometry, material, mesh;
init();
animate();
function init() {
document.body.style.cssText = 'margin: 0; overflow: hidden' ;
renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 50000 );
camera.position.set( 100, 100, 100 );
//camera.position.set(-15, 10, 15);
controls = new THREE.TrackballControls( camera, renderer.domElement );
scene.add(camera);
light = new THREE.AmbientLight(0xffffff, 10);
light.position.set(100,100, 100).normalize();
scene.add(light);
light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10).normalize();
scene.add(light);
var pointlight = new THREE.PointLight(0xffffff, 1, 0);
pointlight.position.set(50, 100, 50)
camera.add(pointlight);
scene.add(pointlight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10,10,10);
scene.add(spotLight);
var pointHelper = new THREE.PointLightHelper(pointlight, 0.1);
scene.add(pointHelper);
this.renderer.render(this.scene, this.camera);
geometry = new THREE.BoxGeometry( 10, 10, 10 );
material = new THREE.MeshLambertMaterial( { ambient: 0x333333, color: 0x888888, opacity: 0.000001, transparent: true } );
// material = new THREE.MeshLambertMaterial({ color: 0xffffff, vertexColors: THREE.FaceColors });
mesh = new THREE.Mesh( geometry, material );
mesh.name = 'basic template mesh';
mesh.visible = false;
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
controls.update();
}``
Through this code , i got the very dull product.
Can Anyone Please help me to sort out this problem ?

You are using the wrong material. The MeshLambertMaterial is used for diffuse surfaces, those that do not have specular highlights (paper, raw wood, cloth). You need to use the MeshPhongMaterial which allows the specular highlights (white spots) in the chair.
In your model, you have two types of surface: leather and wood. Even though both of them have specular highlights, their shininess are different. You will have to define separate materials for both surfaces. But, since I see you have a single object, this can be difficult. You can define a single MeshPhongMaterial for both surfaces, but you will have to try several values in the parameters to get the desired effect.

Related

Three JS - make object tilt away from mouse on hover?

I’m trying to make a piece using three js where the object tilts away from the mouse on mouseover, like the locations here (mouse over the VIST tab):
https://meowwolf.com/explore
I don’t know whether this utilized three js or another library, but I don’t know how to go about it. I can’t find any examples on three js.org with the same “tilt away” technology.
So far Im just working with the basic cube example, but ultimately want to be able to "tilt" other objects/particles.
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
How can I do this, starting with just a box?
FOR CLARITY:
The meow wolf site has the objects tilt toward the corner of the object where the mouse is, and lerp back to original rotation when mouse exits

Ceiling Lights Effect Using THREE.JS

I don't find any good example to do that so any help would be very useful :)
I want achieve this type of light in ceiling of my house object in Three.js
rectLight = new THREE.RectAreaLight( 0xffffff, 500, 10, 10 );
rectLight.position.set( 5, 5, 0 );
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );
I have Tried all the light type for example pointLight , DirectionalLight , SpotLight and in last i found this ReactAreaLight but still i don't achieve this type of light in my three.js scene.
You need to apply postprocessing. Try Effect Composer and BloomPass
//For adding additional effect an the top of rendering
function postprocessing() {
renderScene = new THREE.RenderPass(scene, camera);
effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
var copyShader = new THREE.ShaderPass(THREE.CopyShader);
copyShader.renderToScreen = true;
bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.5, 0.1, 0.85); //( resolution, strenght, radius, threshold));
composer = new THREE.EffectComposer(renderer);
composer.setSize(window.innerWidth, window.innerHeight);
composer.addPass(renderScene);
composer.addPass(effectFXAA);
composer.addPass(bloomPass);
composer.addPass(copyShader);
}
// start the render loop
function render() {
renderer.clear();
composer.render();
renderer.render(scene, camera);
composer.render();
}

Change color of one face of the cube - THREE.js

I am learning OOP while using Three.js. I know, a hard way to do it. So i created a box in the scene. Now i want to change color of one face of that cube.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5, 5, 10);
var geo = new THREE.BoxGeometry(5,2,5);
var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, side:THREE.DoubleSide});
var mesh = new THREE.Mesh( geo, mat);
scene.add(mesh);
//Right there i want to chance color of the face. Its not working
mesh.geometry.faces[5].color.setHex( 0xffffff );
var edge = new THREE.WireframeHelper( mesh, 0x00ff00 );
scene.add(edge);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);
EDIT: the reason it did not work for me was the color i used 0xffffff. This program will work unless color is 0xffffff.
In your case, if you want to change the color of one face of the cube, you will need to specify vertexColors in your material.
var geo = new THREE.BoxGeometry( 5, 2, 5 );
var mat = new THREE.MeshBasicMaterial( { color:0xff0ff0, vertexColors: THREE.FaceColors } );
var mesh = new THREE.Mesh( geo, mat );
mesh.geometry.faces[ 5 ].color.setHex( 0x00ffff );
The rendered face color will be the specified face color tinted by the material color.
If you change a face color after the mesh has been rendered at least once, you will have to set:
mesh.geometry.colorsNeedUpdate = true;
three.js r.80

Cannot add to scene after rendering THREE.js

See example:
http://jsfiddle.net/pehrlich/nm1tzLLm/2/
In newer versions of THREE.js, if I call render before adding additional objects to the scene, they will never be visible, even with additional calls to render. Is this expected behavior?
See full code:
var cube, cube2, geometry, light, material, renderer;
window.scene = new THREE.Scene();
window.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
geometry = new THREE.CubeGeometry(75, 75, 16);
material = new THREE.MeshPhongMaterial({
color: 0x0000ff
});
cube = new THREE.Mesh(geometry, material);
cube.position.set(80, 0, -400);
scene.add(cube);
camera.position.fromArray([0, 160, 400]);
camera.lookAt(new THREE.Vector3(0, 0, 0));
light = new THREE.PointLight(0xffffff, 8, 1000);
// comment out this line ot bring back second cube:
renderer.render(scene, camera);
scene.add(light);
geometry = new THREE.CubeGeometry(75, 75, 16);
material = new THREE.MeshPhongMaterial({
color: 0x0000ff
});
cube2 = new THREE.Mesh(geometry, material);
cube2.position.set(-80, 0, -400);
cube2.castShadow = true;
scene.add(cube2);
renderer.render(scene, camera);
Actually, the cube is rendered black on a black background.
You are rendering the scene first with no lights, and then again after adding a light.
As stated in the Wiki article How to Update Things with WebGLRenderer, properties that can't be easily changed in runtime (once a material is rendered at least once) include the number and types of lights.
Add the light to the scene before the first render, and everything will work as expected.
If you must add the light after the first render, then you need to set
material.needsUpdate = true;
three.js r.68

Repeating a bump map

I'm trying to apply a bump map to a plane to create a vaguely felt-like surface using Three.js r55.
Here's my code:
var mapHeight = THREE.ImageUtils.loadTexture("images/felt.png");
mapHeight.repeat.set(2, 2);
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
mapHeight.format = THREE.RGBFormat;
var groundMaterial = new THREE.MeshPhongMaterial({
ambient: 0x008800, color: 0x008800, specular: 0x888888,
shininess: 25, bumpMap: mapHeight, bumpScale: 10, metal: false
} );
scene.add(new THREE.Mesh(new THREE.PlaneGeometry(0.3, 0.3), groundMaterial));
Notice how I set the texture to repeat twice along x/y axes. However what I'm seeing only applies the texture in one quadrant:
I would expect this with clamp/repeat wrapping (or whatever it's called) but I've requested RepeatWrapping here.
How can I have the bump map correctly repeat an arbitrary number of times on the plane.
EDIT - Full Code
I set about making a simple reproduction case. This is pretty minimal and reproduces the image below (from a slightly different camera angle.) The output has the identical problem.
<!DOCTYPE html>
<html>
<head>
<script src="scripts/libs/three.min.js" type="text/javascript"></script>
</head>
<body>
<div id="scene-container"></div>
<script>
init();
function init() {
var camera, scene, renderer;
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x555555 ) );
var light = new THREE.DirectionalLight( 0x555555 );
light.position.set( 0, 0, 10 );
scene.add( light );
var bumpMapTexture = THREE.ImageUtils.loadTexture( "images/felt.png", undefined, function () {
requestAnimationFrame( function () {
// render once texture has loaded
renderer.render( scene, camera );
} );
} );
bumpMapTexture.repeat.set( 2, 2 );
bumpMapTexture.wrapS = bumpMapTexture.wrapT = THREE.RepeatWrapping;
var groundMaterial = new THREE.MeshPhongMaterial( {
ambient: 0x00AA00,
color: 0x00AA00,
bumpMap: bumpMapTexture
} );
scene.add( new THREE.Mesh( new THREE.PlaneGeometry( 3, 3 ), groundMaterial ) );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 100000 );
camera.position.set( 0, 0, 3 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );// renderer.render(scene, camera);
document.getElementById( 'scene-container' ).appendChild( renderer.domElement );
}
</script>
</body>
</html>
This links to Three.js r55 (minified).
Any help appreciated.
If you want a texture to repeat, it's size in pixels in each dimension must be a power of two ( e.g., 512 x 256 ).
If you have a diffuse map and a bumpMap, they must have the same offset/repeat settings. See for example this answer.
three.js r.55

Categories

Resources