Добрый день! Рассчитываю на помощь тех кто знаком с THREE.js.
Суть проблемы следующая есть сцена на ней два объекта, один стандартный примитив куб, другой объект созданный по координатам вершин. На примитиве есть тени на самодельном их нет. В чем может быть проблема? Понимаю что проблема может касаться материалов, но ничего из того что пробовала не помогло.
var container;
var controls, controlsnull;
var camera, scene, renderer;
var raycaster;
var mouse;
var my_material;
var key_mouse = true;
var objects = [];
var glob_h = 700;
init();
animate();
function init() {
container = document.getElementById("model_3d");
camera = new THREE.PerspectiveCamera( 70, $(container).innerWidth() / glob_h, 1, 10000 );
camera.position.set( 0, 300, 500 );
scene = new THREE.Scene();
var vertices = [
new THREE.Vector3(15,15,15),
new THREE.Vector3(10,10,-10),
new THREE.Vector3(10,-10,10),
new THREE.Vector3(10,-10,-10),
new THREE.Vector3(-10,10,-10),
new THREE.Vector3(-10,10,10),
new THREE.Vector3(-10,-10,-10),
new THREE.Vector3(-10,-10,10)
];
var faces = [
new THREE.Face3(0,2,1),
new THREE.Face3(2,3,1),
new THREE.Face3(4,6,5),
new THREE.Face3(6,7,5),
new THREE.Face3(4,5,1),
new THREE.Face3(5,0,1),
new THREE.Face3(7,6,2),
new THREE.Face3(6,3,2),
new THREE.Face3(5,7,0),
new THREE.Face3(7,2,0),
new THREE.Face3(1,3,4),
new THREE.Face3(3,6,4),
];
var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
//geom.computeCentroids();
geom.mergeVertices();
var geom2 = new THREE.BoxGeometry( 20, 20, 20 );
for ( var i = 0; i < 2; i++ ) {
// my_material = new THREE.MeshBasicMaterial( { color: '#d5d5d5', opacity: 1 } );
// my_material = new THREE.LineBasicMaterial( { color: '#000000', opacity: 1 } );
// my_material = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true, side: THREE.DoubleSide, overdraw: 1 } );
// my_material = new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } );
my_material = new THREE.MeshLambertMaterial( { opacity:1, color: 0xD85AFF, transparent: true, overdraw: 0.5 } );
// my_material = new THREE.MeshLambertMaterial( { color: 0x00ffff, wireframe: true, overdraw: 0.5 } );
// my_material = new THREE.MeshNormalMaterial( { overdraw: 0.1 } );
if(i == 0){
var object = new THREE.Mesh(geom, my_material);
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
}
else{
var object = new THREE.Mesh(geom2, my_material);
object.position.x = 0;
object.position.y = 100;
object.position.z = 0;
}
object.castShadow = true;
object.receiveShadow = true
object.scale.x = 3;
object.scale.y = 3;
object.scale.z = 3;
object.rotation.x = 0;
object.rotation.y = 10;
object.rotation.z = 0;
scene.add( object );
objects.push( object );
}
var ambientLight = new THREE.AmbientLight( 0xF0F0F0 );
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0x00ffff );
directionalLight.position.set( 0, 50, 50 );
directionalLight.castShadow = true;
scene.add( directionalLight );
var directionalLight = new THREE.DirectionalLight( 0x00ffff );
directionalLight.position.set( 0, -50, -50 );
directionalLight.castShadow = true;
scene.add( directionalLight );
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( $(container).innerWidth(), glob_h);
renderer.shadowMapEnabled = true;
container.appendChild( renderer.domElement );
container.addEventListener( 'mousedown', onDocumentMouseDown, false );
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 5;
controls.minDistance = 100;
controls.maxDistance = 500;
controls.addEventListener( 'change', render, false );
container.addEventListener( 'mouseup', onDocumentMouseUp, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = $(container).innerWidth() / glob_h;
camera.updateProjectionMatrix();
renderer.setSize( $(container).innerWidth(), glob_h );
}
function onDocumentChange( event ){
console.log('onDocumentChange' + key_mouse);
key_mouse = true;
render();
}
function onDocumentMouseUp( event ) {
console.log('onDocumentMouseUp' + key_mouse);
if (key_mouse == false)
onDocumentMouseDown( event );
key_mouse = false;
}
function onDocumentMouseDown( event ) {
console.log('onDocumentMouseDown' + key_mouse);
event.preventDefault();
mouse.x = ( (event.clientX - $(container).offset().left) / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( (event.clientY - $(container).offset().top) / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}
}
function animate() {
requestAnimationFrame( animate );
render();
if(typeof controls !== "undefined")
controls.update();
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}