I'm trying to create a pure white scene where the only hint of depth is by moving a spotLight around with your mouse. I like the effect I have now but I was wondering how I could get the entire field (now gray) to be pure white, while keeping the shadow.
If I turn ambient light up I lose the shadow.
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 50, 0 );
var controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.minDistance = 20;
controls.maxDistance = 500;
controls.enablePan = false;
var ambient = new THREE.AmbientLight( 0xffffff, .7 );
scene.add( ambient );
spotLight = new THREE.SpotLight( 0xffffff, 1 );
spotLight.position.set( 0, 10, 0 );
spotLight.target.position.set( 0, 0, 0 );
spotLight.angle = 1.05;
spotLight.penumbra = 0.05;
spotLight.decay = 1;
spotLight.distance = 200;
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 10;
spotLight.shadow.camera.far = 200;
scene.add( spotLight );
lightHelper = new THREE.SpotLightHelper( spotLight );
// scene.add( lightHelper );
shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera );
// scene.add( shadowCameraHelper );
// scene.add( new THREE.AxisHelper( 10 ) );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, dithering: true } );
var geometry = new THREE.BoxGeometry( 2000, 1, 2000 );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, - 1, 0 );
mesh.receiveShadow = true;
scene.add( mesh );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, dithering: true } );
geometry = new THREE.BoxGeometry( 3, 1, 2 );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, 0 );
mesh.castShadow = true;
scene.add( mesh );
Related
I am trying to make a hole in a solid object(box) using stencil method in ThreeJS. I found few web pages and similar questions on the net in this regard but couldn't work them out. Specifically This link is what I want to achieve(even one hole is enough). However the code in the link is using Babylon and I need it to be in ThreeJS. Any idea how I can use ThreeJS to achieve this(or to translate it to ThreeJS)?
Update 1:
There is a sample in ThreeJS examples "misc_exporter_ply.html"(it's got nothing to do with stencil buffer though) and so I tried to use it as it has a simple scene with only one box. I added another cylinder inside the box to represent the hole.
I could get it to work so that there is a visible hole. Yet it's not perfect as the stencil buffer is not working as expected:
Image 1
Image 2
And here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - exporter - ply</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
three.js webgl - exporter - ply<br/><br/>
<button id="exportASCII">export ASCII</button> <button id="exportBinaryBigEndian">export binary (Big Endian)</button> <button id="exportBinaryLittleEndian">export binary (Little Endian)</button>
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { PLYExporter } from './jsm/exporters/PLYExporter.js';
let scene, camera, renderer, exporter, mesh, meshHole, mesh0, mesh1;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 100, 200 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa1caf1 );
//scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
//exporter = new PLYExporter();
//
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 200, 100 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 180;
directionalLight.shadow.camera.bottom = - 100;
directionalLight.shadow.camera.left = - 120;
directionalLight.shadow.camera.right = 120;
scene.add( directionalLight );
// ground
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xaaaaaa, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// mesh
const boxHole = new THREE.CylinderGeometry( 15, 15, 65, 32, 32 );//BoxGeometry( 20, 20, 51 );
let matHole = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
matHole.colorWrite = false;
meshHole = new THREE.Mesh( boxHole, matHole );
meshHole.castShadow = true;
meshHole.position.y = 50;
meshHole.rotation.x = Math.PI / 2;
scene.add( meshHole );
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ color: 0xaaaaaa }) );
mesh.castShadow = true;
mesh.position.y = 50;
scene.add( mesh );
// back faces
const mat0 = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
mat0.side = THREE.FrontSide;
mat0.depthWrite = false;
mat0.depthTest = false;
mat0.colorWrite = false;
//mat0.stencilWrite = true;
mat0.stencilFunc = THREE.AlwaysStencilFunc;
mat0.stencilFail = THREE.KeepStencilOp;
//mat0.stencilZFail = THREE.IncrementWrapStencilOp;
//mat0.stencilZPass = THREE.ReplaceStencilOp;
mat0.stencilRef = 1;
const boxHole0 = new THREE.CylinderGeometry( 15, 15, 65, 32, 32 );
mesh0 = new THREE.Mesh( boxHole0, mat0 );
mesh0.rotation.x = Math.PI / 2;
mesh0.castShadow = true;
mesh0.position.y = 50;
scene.add( mesh0 );
// front faces
const mat1 = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
mat1.side = THREE.DoubleSide;
//mat1.depthWrite = false;
//mat1.depthTest = true;
//mat1.colorWrite = false;
//mat1.stencilWrite = true;
mat1.depthFunc=THREE.AlwaysDepth;
mat1.stencilFunc = THREE.EqualStencilFunc;
mat1.stencilFail = THREE.IncrementStencilOp;
//mat1.stencilZFail = THREE.DecrementWrapStencilOp;
//mat1.stencilZPass = THREE.DecrementWrapStencilOp;
mat1.stencilRef = 1;
const boxHole1 = new THREE.CylinderGeometry( 15, 15, 65, 32, 32, true );
mesh1 = new THREE.Mesh( boxHole1, mat1 );
mesh1.rotation.x = Math.PI / 2;
mesh1.castShadow = true;
mesh1.position.z = 0;
mesh1.position.y = 50;
scene.add( mesh1 );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.localClippingEnabled = true;
document.body.appendChild( renderer.domElement );
//
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 25, 0 );
controls.update();
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
const link = document.createElement( 'a' );
link.style.display = 'none';
document.body.appendChild( link );
</script>
</body>
</html>
Got it working at the end:
Box with cylinder hole
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { PLYExporter } from './jsm/exporters/PLYExporter.js';
let scene, camera, renderer, exporter, mesh, meshHole, mesh0, mesh1;
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 100, 200 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa1caf1 );
//scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
//exporter = new PLYExporter();
//
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 200, 100 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 180;
directionalLight.shadow.camera.bottom = - 100;
directionalLight.shadow.camera.left = - 120;
directionalLight.shadow.camera.right = 120;
scene.add( directionalLight );
// ground
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xaaaaaa, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// mesh
const boxHole = new THREE.CylinderGeometry( 15, 15, 51, 32, 32 );//BoxGeometry( 20, 20, 51 );
let matHole = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
matHole.colorWrite = false;
meshHole = new THREE.Mesh( boxHole, matHole );
meshHole.castShadow = true;
meshHole.position.y = 50;
meshHole.rotation.x = Math.PI / 2;
scene.add( meshHole );
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ color: 0xaaaaaa }) );
mesh.castShadow = true;
mesh.position.y = 50;
scene.add( mesh );
// front faces
const mat0 = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
mat0.side = THREE.FrontSide;
//mat0.depthWrite = false;
//mat0.depthTest = false;
mat0.colorWrite = false;
const boxHole0 = new THREE.CylinderGeometry( 15, 15, 51, 32, 32 );
mesh0 = new THREE.Mesh( boxHole0, mat0 );
mesh0.rotation.x = Math.PI / 2;
mesh0.castShadow = true;
mesh0.position.y = 50;
scene.add( mesh0 );
mat0.stencilWrite = true;
mat0.stencilFunc = THREE.AlwaysStencilFunc;
mat0.stencilFail = THREE.KeepStencilOp;
mat0.stencilZFail = THREE.KeepStencilOp;
mat0.stencilZPass = THREE.ReplaceStencilOp;
mat0.stencilRef = 1;
// back faces
const mat1 = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
mat1.side = THREE.BackSide;
mat1.depthWrite = false;
mat1.depthTest = true;
//mat1.colorWrite = false;
const boxHole1 = new THREE.CylinderGeometry( 15, 15, 51, 32, 32, true );
mesh1 = new THREE.Mesh( boxHole1, mat1 );
mesh1.rotation.x = Math.PI / 2;
mesh1.castShadow = true;
mesh1.position.z = 0;
mesh1.position.y = 50;
scene.add( mesh1 );
mat1.depthFunc=THREE.AlwaysDepth;
mat1.stencilWrite = true;
mat1.stencilFunc = THREE.EqualStencilFunc;
mat1.stencilFail = THREE.DecrementWrapStencilOp;
mat1.stencilZFail = THREE.DecrementWrapStencilOp;
mat1.stencilZPass = THREE.DecrementWrapStencilOp;
mat1.stencilRef = 1;
mesh1.onAfterRender = function ( renderer ) {
renderer.clearStencil();
};
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.localClippingEnabled = true;
document.body.appendChild( renderer.domElement );
//
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 25, 0 );
controls.update();
//
window.addEventListener( 'resize', onWindowResize );
}
How remove of hide loaded.load three.js according to the condition for example id the door condition = 0, if will load the flame.stl and reverse
function checkDoorStatus(isDoorOpen, prevIsDoorOpen){
if ( isDoorOpen == 1)
{
var loader = new THREE.STLLoader();
loader.load( 'model/panic.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xa80306, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0.145, -0.3, -0.29);
mesh.rotation.set( 0 , 0, Math.PI / 2 );
mesh.scale.set( 0.05, 0.05, 0.05);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
//console.log("Panic 1");
}
else if (isDoorOpen == 0)
{
var loader = new THREE.STLLoader();
loader.load( 'model/flame.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xa80306, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0.145, -0.3, -0.29);
mesh.rotation.set( 0 , 0, Math.PI / 2 );
mesh.scale.set( 0.05, 0.05, 0.05);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
//console.log("Panic 0");
}
}
According to my understanding, you want to show only one mesh at a time based on some condition. If that is the case, one possible solution is give a name to your mesh before adding to the scene and remove the old door based on its name before adding the new one. For example
mesh.name = "openDoor";
scene.remove(scene.getObjectByName("closedDoor"));
scene.add( mesh )
Hope it helps.
I have created a scene with a light shade, walls surrounding it, and few light sources. I want the spotlights inside the lamp shade cast shadow on the walls.I played with parameters of the spotlight, but I could not achieve having shadow on the walls. here is my code:
<html>
<head>
<title>Lightshade</title>
<script src="three.js"> </script>
<script src="TrackballControls.js"></script>
</head>
<body>
<script>
//declaring variables
var camera, scene, renderer;
var controls;
var cone, coneGeometry;
scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera( -window.innerWidth / 25, window.innerWidth / 25, window.innerHeight / 25, -window.innerHeight / 25, -10000, 1000000);
camera.position.set( 0, 2.0, 5.0);
camera.lookAt(scene.position);
//adding the renderer to the screen
renderer = new THREE.WebGLRenderer( { antialias: true} );
renderer.setClearColor( 0xeeeeee , 0); //eeeeee
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;
document.body.appendChild( renderer.domElement );
//adding the camera interactive method
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.noKeys = true;
//creating materials for lightshade
BlightshadeMaterial = new THREE.MeshBasicMaterial({color:0xffeb00,wireframe:false, side:THREE.DoubleSide, ambient: 0xffffff});
lightshadeMaterial = new THREE.MeshPhongMaterial({color:0xffeb00,transparent: true,opacity: 0.6,wireframe:false, side:THREE.DoubleSide, ambient: 0xffffff});
// adding some light to the screen
var light3 = new THREE.PointLight( 0xffffff, 1, 100);
light3.position.set( 0, 30.0, 0 );
scene.add( light3 );
var light1 = new THREE.PointLight( 0xffffff,0.7, 100 );
light1.position.set( 0, 4.0, 0 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0xffffff, 0.7, 100 );
light2.position.set( 0, -1.0, 0 );
scene.add( light2 );
var light4 = new THREE.PointLight( 0xffffff, 1, 100);
light4.position.set( 30.0, 16.0, 30.0 );
scene.add( light4 );
var light5 = new THREE.PointLight( 0xffffff, 1, 100);
light5.position.set( -30.0, 16.0, 30.0 );
scene.add( light5 );
coneGeometry = new THREE.CylinderGeometry( 5, 12.5, 15.0, 30, 20 , true);
cone = new THREE.Mesh(coneGeometry,lightshadeMaterial);
cone.castShadow = true;
scene.add(cone);
innerConeGeometry = new THREE.CylinderGeometry( 4.5, 12.0, 15.0, 30,20 , true);
innerCone = new THREE.Mesh(innerConeGeometry,lightshadeMaterial);
innerCone.castShadow = true;
scene.add(innerCone);
upGeometry = new THREE.RingGeometry( 4.5, 5.0, 30 ,3 );
upSide = new THREE.Mesh( upGeometry, BlightshadeMaterial );
scene.add( upSide );
upSide.geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI/2));
upSide.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,7.5,0));
downGeometry = new THREE.RingGeometry( 12.0, 12.5, 30 ,3 );
downSide = new THREE.Mesh( downGeometry, BlightshadeMaterial );
scene.add( downSide );
downSide.geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI/2));
downSide.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,-7.5,0));
//Creating the shadow
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial( {color: 0xffff00 } ));
point.position.set(0,2.5,-1.0);
scene.add( point );
var spotlight = new THREE.SpotLight(0xffffff ,3, 800 , Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowCameraVisible = true;
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 300;
scene.add(spotlight);
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial( {color: 0xffff00} ));
point.position.set(1.0,2.5,0);
scene.add( point );
var spotlight = new THREE.SpotLight(0xffffff ,3, 800, Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 30.0;
scene.add(spotlight);
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial( {color: 0xffff00} ));
point.position.set(-1.0,2.5,0);
scene.add( point );
var spotlight = new THREE.SpotLight(0xffffff ,3, 800, Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 30.0;
scene.add(spotlight);
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial( {color: 0xffff00} ));
point.position.set(1.0,2.5,-1.0);
scene.add( point );
var spotlight = new THREE.SpotLight(0xffffff ,3, 800, Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 300;
scene.add(spotlight);
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial( {color: 0xffff00} ));
point.position.set(-1.0,2.5,-1.0);
scene.add( point );
var spotlight = new THREE.SpotLight(0xffffff ,3, 800, Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 30.0;
scene.add(spotlight);
//create walls and floor
var floorMaterial = new THREE.MeshPhongMaterial({side: THREE.DoubleSide} );
var floorGeometry = new THREE.PlaneBufferGeometry(170, 170, 100, 100);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -70;
// Note the mesh is flagged to receive shadows
floor.castShadow= false;
floor.receiveShadow = true;
scene.add(floor);
//front wall
var frontMaterial = new THREE.MeshPhongMaterial( {side: THREE.DoubleSide } );
var frontGeometry = new THREE.PlaneBufferGeometry(170, 100, 100, 100);
var front = new THREE.Mesh(frontGeometry, frontMaterial);
front.position.z = -85;
front.position.y = -20;
//front.rotation.x = Math.PI / 2;
// Note the mesh is flagged to receive shadows
front.castShadow= false;
front.receiveShadow = true;
scene.add(front);
//right wall
var rightMaterial = new THREE.MeshPhongMaterial( {side: THREE.DoubleSide} );
var rightGeometry = new THREE.PlaneBufferGeometry(170, 100, 100, 100);
var right = new THREE.Mesh(rightGeometry, rightMaterial);
right.rotation.y = Math.PI / 2;
right.position.x = 85;
right.position.y = -20;
// Note the mesh is flagged to receive shadows
right.castShadow= false;
right.receiveShadow = true;
scene.add(right);
//left wall
var leftMaterial = new THREE.MeshPhongMaterial( {side: THREE.DoubleSide} );
var leftGeometry = new THREE.PlaneBufferGeometry(170, 100, 100, 100);
var left = new THREE.Mesh(leftGeometry, leftMaterial);
left.rotation.y = Math.PI / 2;
left.position.x = -85;
left.position.y = -20;
// Note the mesh is flagged to receive shadows
left.castShadow= false;
left.receiveShadow = true;
scene.add(left);
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
controls.update();
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
Alternatively, do you know any other better way to have the shadow of the light shade on the walls. Thank you in advance.
This seems similar to an issue I had: Three.js DoubleSided material doesn't cast shadow on both sides of planar parametric geometry
In particular, "The material.side property is not taken into consideration when casting shadows."
I'm running following code (jsfiddle: http://jsfiddle.net/sx9p7/ ) :
var scene, camera, renderer, composer;
var l1, l2, hemiLight;
var effectSSAO;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: false, alpha: false } );
renderer.shadowMapEnabled = true;
renderer.setClearColor( 0xd8e7ff );
renderer.setSize( 800,600);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, 800 / 600, 1, 10000 );
camera.position.set(-200,100,-60);
camera.lookAt(new THREE.Vector3(0,0,0));
var container = document.createElement( 'div' );
document.body.appendChild( container );
composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );
effectSSAO = new THREE.ShaderPass( THREE.SSAOShader );
effectSSAO.renderToScreen = true;
composer.addPass( effectSSAO );
hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.4 );
hemiLight.position.set( 0, 300, 0 );
scene.add( hemiLight );
l1 = new THREE.DirectionalLight( 0xffffff, 0.3);
l1.position.set( 100, 100, 0 );
l1.castShadow = true;
scene.add(l1);
l2 = new THREE.DirectionalLight( 0xffffff, 0.3);
l2.position.set( -100, 100, 0 );
l2.castShadow = true;
scene.add(l2);
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200), new THREE.MeshLambertMaterial({ }) );
plane.receiveShadow = true;
plane.castShadow = true;
plane.rotation.x = - 90 * Math.PI / 180;
plane.position.set(0,0,0);
scene.add( plane );
var cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), new THREE.MeshPhongMaterial( { color: 0xaaaaaa, ambient: 0xbbbbbb, specular: 0xcccccc, perPixel: true, vertexColors: THREE.FaceColors } ));
cube.receiveShadow = true;
cube.castShadow = true;
scene.add(cube);
}
function animate() {
requestAnimationFrame( animate );
composer.render();
}
and i have a problem with SSAO shader. I did try many parameters, codes, examples but still i can't remove that square which is in the middle of scene ( which sometime look like correct SSAO effect but in wrong position ??? )
If i will remove one directional light fragment is gone - but still no SSAO effect and shadows are still super very low resolution.
Well, 2 directional lights are strange anyway, just leave it at 1 for the moment.
Concerning the SSAO, see the shader and its numerous parameters. you would need to adjust those according to your scene. example:
effectSSAO .uniforms[ 'tDepth' ].value = depthTarget;
effectSSAO .uniforms[ 'size' ].value.set( width, height );
effectSSAO .uniforms[ 'cameraNear' ].value = 0.1;
effectSSAO .uniforms[ 'cameraFar' ].value = 1000;
As you see above, you also need more than just a few parameter tweaks.
The Three.SSAO shader expects a previously rendered depth pass to work properly.
See here for more help:
How to use the three.js SSAO shader?
I'm trying to create a shadow under the cube in this jsfiddle, (code below) but the shadow turns out too big, and I don't think the right shape either. What's causing this shadow, and how can I fix it?
Thanks
var initScene, render,
projector, renderer, scene, ground, light,
camera, box, pointLight;
projector = new THREE.Projector;
scene = new THREE.Scene;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColorHex(0x000000, 1);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
document.body.appendChild( renderer.domElement );
light = new THREE.DirectionalLight( 0xFFFFFF );
light.position.set( 20, 80, 0 );
light.target.position.copy( scene.position );
light.castShadow = true;
light.shadowCameraLeft = -60;
light.shadowCameraTop = -60;
light.shadowCameraRight = 60;
light.shadowCameraBottom = 60;
light.shadowCameraNear = 1;
light.shadowCameraFar = 2000;
light.shadowBias = 10;
light.shadowMapWidth = light.shadowMapHeight = 2040;
light.shadowDarkness = .7;
scene.add( light );
box = new THREE.Mesh(
new THREE.CubeGeometry( 5, 5, 40 ),
new THREE.MeshLambertMaterial({
color: 0xffffff,
opacity: 0.7,
transparent: true,
depthWrite: false
}));
box.position.set( 10, 10, 10 );
box.castShadow = true;
scene.add(box);
ground = new THREE.Mesh(
new THREE.CubeGeometry(1000, 1, 1000),
new THREE.MeshLambertMaterial({
color: 0xffffff,
opacity: 0.3,
transparent: true
}));
ground.receiveShadow = true;
scene.add( ground );
camera = new THREE.PerspectiveCamera(
35, window.innerWidth / window.innerHeight, 1, 1000
);
camera.position.set( 100, 100, 100 );
camera.lookAt( scene.position );
scene.add( camera );
renderer.render( scene, camera );
scene.simulate();
For some reason I cannot go to the fiddle but from what I see your cube is at (10,10,10) with size 5 and your light is at (20,80,0). My first guess is that your light is very close to the cube. Try moving the light to (200,200,0) and see what happens.