Lathe Geometry won't cast shadows but spheres and cubes do. Why is that ?
Image
My renderer:
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(0xAAAAAA, 1.0);
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
Lathe:
var latheGeometry = new THREE.LatheGeometry(array, Math.ceil(segments), 0, 2 * Math.PI);
//var meshMaterial = new THREE.MeshBasicMaterial({color:0x00ff00, transparent:true, opacity:0.6});
var meshMaterial = new THREE.MeshLambertMaterial({color: 0xFFFFFF});
meshMaterial.side = THREE.DoubleSide;
var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.wireframe = false;
latheMesh = THREE.SceneUtils.createMultiMaterialObject(latheGeometry,[meshMaterial, wireFrameMat]);
latheMesh.rotation.x = Math.PI * -0.5;
latheMesh.position.z = 0;
latheMesh.castShadow = true;
scene.add(latheMesh);
My lighting:
var pointColor = "#ffffff";
directionalLight = new THREE.DirectionalLight(pointColor);
directionalLight.position.set(-50,50,50);
directionalLight.castShadow = true;
directionalLight.receiveShadow = false;
directionalLight.shadowCameraVisible = true;
directionalLight.intensity = 1;
directionalLight.shadowCameraNear = 50;
directionalLight.shadowCameraFar = 200;
directionalLight.shadowCameraLeft = -50;
directionalLight.shadowCameraRight = 40;
directionalLight.shadowCameraTop = 50;
directionalLight.shadowCameraBottom = -50;
directionalLight.distance = 0;
directionalLight.shadowMapHeight = 1024;
directionalLight.shadowMapWidth = 1024;
//scene.add( new THREE.DirectionalLightHelper(directionalLight, 0.5) );
scene.add(directionalLight);
As you can see, only sphere can cast shadow and not latheGeometry.
THREE.SceneUtils.createMultiMaterialObject() creates a THREE.Group with a child Mesh for each material.
You need to specify the castShadow property not for the group, but for the child mesh you want to cast the shadow.
three.js r.76
Related
Working on some kind of fictional treasure map. I'm cutting a large displacement map intosmaller tiles as I don't yet how wide the final terrain is going to be -- right now it's 5*5, but it could be wider in the future
For some reasons, I am having issues projecting shadows on the displaced planes.
I don't know where the problem is coming from. Maybe it's the way I push meshes into an array through a function, i'm afraid i'm not doing this the right way.
I'd like to achieve the result using a directional light
Here is a c4d draft of what i'm trying to achieve
and here is what i'm able to do in the browser (didnt manage to tile them properly yet :^)
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var material = [];
var texture = [];
var tile = [];
var planeRes = 128;
var planesize = 1;
var dim = 5;
var size = dim * dim;
var DispScale = 2;
var geometry = new THREE.PlaneBufferGeometry(planesize,planesize,planeRes, planeRes);
function tileGenerator(inc) {
if (inc < 10) {
texture[inc] = new THREE.TextureLoader().load('cut25lowres/image_part_00' + inc + '.jpg');
} else {
texture[inc] = new THREE.TextureLoader().load('cut25lowres/image_part_0' + inc + '.jpg');
}
material[inc] = new THREE.MeshPhongMaterial({
color: 0xffffff,
displacementMap: texture[inc],
side: THREE.DoubleSide,
receiveShadow : true,
castShadow : true
});
tile[inc] = new THREE.Mesh(geometry, material[inc]);
}
for (var i = 1; i < size + 1; i++) {
tileGenerator(i);
}
for (var i = 1; i < size + 1; i++) {
tile[i].position.set(-planesize * (i % dim)+1, 0, -planesize * Math.ceil(i / dim)+1 );
tile[i].rotation.x = Math.PI / 2 + Math.PI;
tile[i].rotation.z = Math.PI / 2;
scene.add(tile[i]);
}
var dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.castShadow = true;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 6;
dirLight.shadow.mapSize.set( 1024, 1024 );
var targetObject = new THREE.Object3D();
targetObject.position.x = -10;
targetObject.position.z = -10;
dirLight.position.y = 3;
scene.add(targetObject);
dirLight.target = targetObject;
scene.add( dirLight );
Edit : Here is a cleaner version without the array as it's not part of the problem
jsfiddle.net/clemtre/3y9tqc6j/34
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();
var heightmap = new THREE.TextureLoader().load('https://i.imgur.com/MVYhfd7.jpeg');
var geometry = new THREE.PlaneGeometry(20, 20, 100, 100);
var material = new THREE.MeshPhongMaterial({
color: 0xffffff,
displacementMap: heightmap,
displacementScale: 10
});
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 1, 1).normalize();
light.castShadow = true;
scene.add(light);
var plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI/2;
scene.add(plane);
camera.position.z = -20;
camera.position.y = 5;
controls.update();
var animate = function() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
Many thanks!
I have the following code to render a simple cube. It has dat.GUI controls to change rotation, and I want to add a color changer also. Eventually, I want to have a more complex geometry and want to be able to change the color of more than one element.
$(function(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
var axis = new THREE.AxisHelper(10);
scene.add (axis);
var grid = new THREE.GridHelper(50, 5);
var color = new THREE.Color("rgb(255,0,0)");
grid.setColors(color, 0x000000);
scene.add(grid);
var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial = new THREE.MeshLambertMaterial({color:0x80ff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
var planeGeometry = new THREE.PlaneGeometry(30,30,30);
var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -.5*Math.PI;
plane.receiveShadow = true;
scene.add(plane);
cube.position.x += 0.001;
cube.position.y = 2.5;
cube.position.z = 2.5;
scene.add(cube);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.castShadow = true;
spotLight.position.set (15,30,50);
scene.add(spotLight);
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
var guiControls = new function(){
this.rotationX = 0.001;
this.rotationY = 0.001;
this.rotationZ = 0.001;
}
var datGUI = new dat.GUI();
datGUI .add(guiControls, 'rotationX', -30*Math.PI/180, 30*Math.PI/180);
datGUI .add(guiControls, 'rotationY', -30*Math.PI/180, 30*Math.PI/180);
datGUI .add(guiControls, 'rotationZ', -30*Math.PI/180, 30*Math.PI/180);
render();
function render() {
cube.rotation.x = guiControls.rotationX;
cube.rotation.y = guiControls.rotationY;
cube.rotation.z = guiControls.rotationZ;
requestAnimationFrame(render);
renderer.render(scene,camera);
}
$("#webGL-container").append(renderer.domElement);
renderer.render(scene,camera);
});
I have been able to add a gui to change color, but I cannot figure out how to bind the gui to the cube color.
var gui = new dat.GUI();
var folder = gui.addFolder('folder');
var params = {};
params.color = [255, 0, 255];
folder.addColor(params, 'color');
You can use dat.GUI to change the color of your cube by using a pattern like this one:
var params = {
color: 0xff00ff
};
var gui = new dat.GUI();
var folder = gui.addFolder( 'MATERIAL' );
folder.addColor( params, 'color' )
.onChange( function() { cube.material.color.set( params.color ); } );
folder.open();
three.js r.92
The following light is added to my scene:
var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
light.position.set( 1000, 1000, 1000 );
light.castShadow = true;
light.shadow = new THREE.DirectionalLightShadow(
new THREE.OrthographicCamera(
-100, 100,
100, -100, -500, 500 ) );
light.shadow.bias = - 0.00022;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
The plane is as follows:
var planeGeometry = new THREE.PlaneGeometry( 200, 200 );
planeGeometry.rotateX( - Math.PI / 2 );
var planeMaterial = new THREE.ShadowMaterial();
planeMaterial.opacity = 1;
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.y = 0;
plane.receiveShadow = true;
scene.add( plane );
The boxes are:
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
for ( var i = 0; i < 20; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.scale.x = Math.random() * 5 + 1;
object.scale.y = Math.random() * 5 + 1;
object.scale.z = Math.random() * 5 + 1;
object.position.x = Math.random() * 30;
object.position.y = object.scale.y / 2.0;
object.position.z = Math.random() * 60;
object.castShadow = true;
object.receiveShadow = true;
scene.add( object );
}
Directional light shadow of boxes is not rendered on plane mesh. Could you pls help what do I wrong? Please refer to the following screenshot.
Some of the shadow map properties have been renamed in the recent versions.
Setting up the renderer for shadow maps (and choosing the more computational expensive shadow map type):
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
Setting up the light (notice how it also works with THREE.PointLight):
var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 12, 0 );
light.castShadow = true; // default false
light.shadow.mapSize.width = 1024; // default 512
light.shadow.mapSize.height = 1024; // default 512
light.shadow.camera.near = 2; // default 0.5
light.shadow.camera.far = 100; // default 500
scene.add( light );
For plane material use var planeMaterial = new THREE.MeshLambertMaterial();
( ShadowMaterial works from r77 https://github.com/mrdoob/three.js/issues/1791)
var renderer = new THREE.WebGLRenderer( {antialias:true, alpha: true } );
renderer.shadowMap.enabled = true; // enable shadows rendering
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // to antialias the shadow
var light_target = new THREE.Object3D(); // believe me
light_target.position.set(0,0,0); // not necessary, but to be clear
var light = new THREE.DirectionalLight( 0xffffff,1.5,1000) );
light.position.set(1000, 1000, 1000);
light.target = light_target;
light.castShadow = true;
light.shadowMapWidth = 2048*2; // px of the rendered shadow texture
light.shadowMapHeight = 2048*2; // px of the rendered shadow texture
var d = 100; /// your plane is 200x200 and we targeted its center
var distance = light.position.distanceTo(light_target.position);
light.shadowCameraLeft = -d;
light.shadowCameraRight = d; light.shadowCameraTop = d; light.shadowCameraBottom = -d; light.shadowCameraNear = distance-d; light.shadowCameraFar = distance+d; light.shadowBias = -0.001;
light.shadowDarkness = 0.5;
scene.add( light ); // you missed this!
I can't cast shadow to a plane with directional light in three.js r79.
I have tried every thing, but never worked.
I added a CameraHelper to scene, and all things were inside the area by yellow lines around.But it just doesn't work...
Here's the screen shot:
code:
function init(canvas) {
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas,
//alpha: true
});
//renderer.setClearColor(0x777777);
renderer.shadowMap.enabled = true;
renderer.shadowMap.soft = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.needsUpdate = true;
renderer.setSize(innerWidth, innerHeight);
renderer.autoClear = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
const scene = new THREE.Scene();
const pCamera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 2000);
pCamera.position.x = 300;
pCamera.position.y = -200;
pCamera.position.z = 50;
pCamera.lookAt({x: 0, y: 0, z: -200});
scene.add(pCamera);
//const controls = new THREE.OrbitControls(pCamera, canvas);
//controls.maxPolarAngle = Math.PI * 0.5;
//controls.minDistance = 1000;
//controls.maxDistance = 7500;
const directLight = new THREE.DirectionalLight(0xffffff, 1);
directLight.position.x = 400;
directLight.position.y = 2000;
directLight.position.z = 500;
directLight.castShadow = true;
directLight.shadow.camera.far = 300;
directLight.shadow.camera.near = 100;
directLight.shadow.mapSize.width = 1024;
directLight.shadow.mapSize.height = 1024;
directLight.shadow.bias = 0.0039;
const d = 100;
directLight.shadow.camera.left = -d;
directLight.shadow.camera.right = d;
directLight.shadow.camera.top = -d;
directLight.shadow.camera.bottom = d;
scene.add(directLight);
const cameraHelper = new THREE.CameraHelper(directLight.shadow.camera);
scene.add(cameraHelper);
const cube = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50), new THREE.MeshLambertMaterial({color: 0xcc0000}));
cube.position.z = -200;
cube.castShadow = true;
scene.add(cube);
const plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshLambertMaterial({color: 0x22ff11}));
plane.receiveShadow = true;
plane.position.z = -215;
scene.add(plane);
scene.add(new THREE.AmbientLight(0x212223, 0.1));
return function () {
renderer.render(scene, pCamera);
};
}
I am trying to get the shadow from the ball appear on the floor, but it doesn't seem to work. Here is my code that declares the renderer, camera, lights, and objects:
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
document.body.appendChild( renderer.domElement );
var planegeo = new THREE.PlaneGeometry(100,100);
var geomaterial = new THREE.MeshLambertMaterial({color: "#EA8E12", side: THREE.DoubleSide});
var plane = new THREE.Mesh(planegeo, geomaterial);
plane.rotation.x += 90;
plane.position.z = -2;
scene.add(plane);
var light = new THREE.AmbientLight( "#EA8E12", 101);
var light2 = new THREE.DirectionalLight("yellow", 100);
light.position.set(0, 100, 0);
light2.position.set(0, 100, 0);
scene.add(light);
scene.add(light2);
var sphereParent = new THREE.Object3D();
var geometry = new THREE.SphereGeometry(1, 100, 100);
var material = new THREE.MeshPhongMaterial( {color: "yellow", shininess: 100});
var circle = new THREE.Mesh(geometry, material);
sphereParent.add(circle);
sphereParent.position.set(0,3,0);
scene.add(sphereParent);
light2.castShadow = true;
circle.castShadow = true;
sphereParent.castShadow = true;
plane.receiveShadow = true;
Does anyone can tell me what I am missing? Thanks
This should get you started. Modify the parameters as needed:
light2.castShadow = true;
light2.shadowMapWidth = 1024;
light2.shadowMapHeight = 1024;
light2.shadowMapDarkness = 0.75;
light2.shadowCameraNear = 1;
light2.shadowCameraFar = 1000;
light2.shadowDarkness = 0.75;
/* since you have a directional light */
light2.shadowCameraLeft = -500;
light2.shadowCameraRight = 500;
light2.shadowCameraTop = 500;
light2.shadowCameraBottom = -500;
light2.shadowCameraVisible = true; /* debugging */
on the renderer side this might help:
renderer.shadowMapDebug = true;