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 );
}
Related
I am working on a three.js prototype in which a 3d model of the train is added to the scene. My requirement is to move the camera either left / right side of the scene to view the complete train.
I tried using below code -
function onKeyDown(){
var zdelta = 20;
switch( event.keyCode ) {
case 65: // look left
camera.position.z = camera.position.z + zdelta;
}
}
But the scene was rotating rather than panning in the left side.
So it will be great help, if anyone shares their idea on this :)
Thanks,
Satheesh K
Using a keydown event listener is definitely the right approach. Try it with this code:
var scene, camera, renderer, cubeObj;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
camera.position.y = - 10;
camera.position.x = 10;
var cubeGeo = new THREE.BoxGeometry( 200, 150, 100 );
var cubeGeoMaterial = new THREE.MeshPhongMaterial( { color: 0x808080 } );
cubeObj = new THREE.Mesh( cubeGeo, cubeGeoMaterial );
cubeObj.position.x = - 70;
cubeObj.position.y = - 50;
cubeObj.position.z = 0;
cubeObj.rotation.x = 0.5;
scene.add( cubeObj );
var cubeGeo2 = new THREE.BoxGeometry( 200, 150, 100 );
var cubeGeoMaterial2 = new THREE.MeshPhongMaterial( { color: 0x808080 } );
var cubeObj2 = new THREE.Mesh( cubeGeo2, cubeGeoMaterial2 );
cubeObj2.position.x = 160;
cubeObj2.position.y = - 50;
cubeObj2.position.z = - 5;
cubeObj2.rotation.x = 0.5;
scene.add( cubeObj2 );
var cubeGeo3 = new THREE.BoxGeometry( 200, 150, 100 );
var cubeGeoMaterial3 = new THREE.MeshPhongMaterial( { color: 0x808080 } );
var cubeObj3 = new THREE.Mesh( cubeGeo3, cubeGeoMaterial3 );
cubeObj3.position.x = 440;
cubeObj3.position.y = - 50;
cubeObj3.position.z = 0;
cubeObj3.rotation.x = 0.5;
scene.add( cubeObj3 );
renderer = new THREE.WebGLRenderer( {
antialias: true
} );
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;
//scene.add( spotLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
scene.add( directionalLight );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcce0ff );
document.body.appendChild( renderer.domElement );
document.addEventListener( 'keydown', onKeyDown, false );
}
function onKeyDown( event ) {
const step = 5; // world units
switch ( event.keyCode ) {
case 37:
camera.position.x -= step;
break;
case 39:
camera.position.x += step;
break;
}
}
function animate() {
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
body {
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.114/build/three.js"></script>
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 );
The g.png success loaded,but it not render.
Is it not loaded but render first?
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("g.png") });
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
Full code
https://gist.github.com/EasonWang01/410046ababc1af4f7f2db4b294b591ca
I write a sample based on your code, hope that will help you.
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"> </script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer({ alpha: false });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry1 = new THREE.BoxGeometry( 12, 1, 1 );
var material1 = new THREE.MeshBasicMaterial( { color: 0x00FFCC } );
var cube1 = new THREE.Mesh( geometry1, material1 );
scene.add( cube1 );
var geometry2 = new THREE.BoxGeometry( 10, 1, 1 );
var material2 = new THREE.MeshBasicMaterial( { color: 0xCCFF33 } );
var cube2 = new THREE.Mesh( geometry2, material2 );
scene.add( cube2 );
var geometry3 = new THREE.CircleBufferGeometry( 3, 32 );
var material3 = new THREE.MeshBasicMaterial( { color: 0xCCFFCC } );
var circle3 = new THREE.Mesh( geometry3, material3 );
scene.add( circle3 );
var geometry4 = new THREE.BoxBufferGeometry( 10, 1, 1 );
material4 = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("img/g.png") });
var cube4 = new THREE.Mesh( geometry4, material4 );
scene.add( cube4 );
var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
var materials = [];
cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
cube.position.y = 150;
scene.add(cube);
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
camera.position.z = 5;
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("img/g.png") });
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube1.rotation.x += 0.02;
cube1.rotation.y += 0.02;
cube2.rotation.x += 0.03;
cube2.rotation.y += 0.03;
renderer.render(scene, camera);
};
setTimeout(() => {render();},500)
</script>
</body>
</html>
I am the shader in this example https://threejsdoc.appspot.com/doc/three.js/examples/webgl_postprocessing_dof.html to add the bokeh effect to my scene. But I am unable to get it work. However there seems to be no errors when I checked in the console. Here is my code (main.js). I have included the ShaderExtras.js from the example and added it in the index.html
$(document).ready(function(){
pposx = window.innerWidth/2;
pposy = window.innerHeight/2;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 0.1, 10000 );
camera.lookAt(scene.position);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff );
$("body").append(renderer.domElement);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
directionalLight.position.set( 0, 0, -4 );
directionalLight.rotation.x = (Math.PI/180)*180;
directionalLight.rotation.y = (Math.PI/180)*180;
var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.7 );
directionalLight1.position.set( 0, 0, 4 );
var directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.7 );
directionalLight2.position.set( -3, 0, 0 );
var directionalLight3 = new THREE.DirectionalLight( 0xffffff, 0.7 );
directionalLight3.position.set( 3, 0, 0 );
scene.add( directionalLight, directionalLight1, directionalLight2, directionalLight3 );
material1 = new THREE.MeshPhongMaterial( { color: 0xff00ff, specular: 0xff00ff, shininess: -3, shading: THREE.FlatShading, side: THREE.FrontSide } );
ge = [];
for(j=0;j<100;j++){
ge[j] = new THREE.BoxGeometry( 1, 1, 1 );
ge[j] = new THREE.Mesh( ge[j], material1 );
ge[j].position.z = -50 + j*2;
scene.add( ge[j] );
}
$(document).mousemove(function(e){
pposx = e.clientX;
pposy = e.clientY;
});
function initPostprocessing() {
postprocessing.scene = new THREE.Scene();
postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -100, 100 );
postprocessing.camera.position.z = 5;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
var bokeh_shader = THREE.ShaderExtras[ "bokeh" ];
postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
postprocessing.bokeh_uniforms[ "focus" ].value = 1;
postprocessing.bokeh_uniforms[ "aperture" ].value = 0.2;
postprocessing.bokeh_uniforms[ "maxblur" ].value = 3;
postprocessing.bokeh_uniforms[ "tColor" ].texture = postprocessing.rtTextureColor;
postprocessing.bokeh_uniforms[ "tDepth" ].texture = postprocessing.rtTextureDepth;
postprocessing.bokeh_uniforms[ "focus" ].value = 0.1;
postprocessing.bokeh_uniforms[ "aspect" ].value = window.innerWidth / window.innerHeight;
postprocessing.materialBokeh = new THREE.ShaderMaterial( {
uniforms: postprocessing.bokeh_uniforms,
vertexShader: bokeh_shader.vertexShader,
fragmentShader: bokeh_shader.fragmentShader
} );
postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
postprocessing.quad.position.z = -1;
postprocessing.scene.add( postprocessing.quad );
}
function render() {
requestAnimationFrame( render );
camera.rotation.y = (Math.PI/180)*((pposx - (window.innerWidth/2))/1000*180);
camera.position.x = (5*Math.sin((Math.PI/180)*((pposx - (window.innerWidth/2))/1000*180)));
camera.position.y = (pposy - (window.innerHeight/2))/100;
camera.position.z = (5*Math.cos((Math.PI/180)*((pposx - (window.innerWidth/2))/1000*180)));
renderer.render(scene, camera);
};
var postprocessing = { enabled : true };
initPostprocessing();
render();
});
Please, Any help to make the cubes appear blured will be helpful.
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."