CODEWITHSUNDEEP
javascriptthree.js
Maros
Maros

Reputation: 1973

Shadows on Custom Geometry

I've created a custom geometry using vertices and faces but I can't seem to get it to cast shadows on itself. The faces all have the same color as it rotates. Here's what I've tried: http://jsfiddle.net/ZZsXP/.

How can I get this to work without resorting to multiple Plane meshes grouped together?

Code:

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    width = window.innerWidth / 2
    height = window.innerHeight / 2
    camera = new THREE.OrthographicCamera(-width, width, height, -height, -500, 1000)
    camera.position = new THREE.Vector3(1, 1, 1)
    camera.scale.set(0.4, 0.4, 0.4)

    scene = new THREE.Scene();

    geometry = new THREE.Geometry();

    sizeX = 180
    sizeY = 120
    sizeZ = 100

    geometry.vertices.push(new THREE.Vector3(sizeX / 2, 0, -sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(-sizeX / 2, 0, -sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(-sizeX / 2, 0, sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(sizeX / 2, 0, sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(sizeX / 2, sizeY / 2, -sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(-sizeX / 2, sizeY / 2, -sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(-sizeX / 2, sizeY / 2, sizeZ / 2));

    geometry.faces.push(new THREE.Face3(0, 1, 2))
    geometry.faces.push(new THREE.Face3(0, 2, 3))
    geometry.faces.push(new THREE.Face3(0, 4, 5))
    geometry.faces.push(new THREE.Face3(0, 1, 5))
    geometry.faces.push(new THREE.Face3(1, 2, 6))
    geometry.faces.push(new THREE.Face3(1, 5, 6))

    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        side: THREE.DoubleSide,
    });

    light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, 1, 0);
    scene.add(light);

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}

Upvotes: 0

Views: 117

Answers (1)

PANKAJ
PANKAJ

Reputation: 88

Change the material to THREE.MeshPhongMaterial or THREE.MeshLambertMaterial. Basic Material does not cast shadow.

Upvotes: 1

Related Questions