THREE.js ішіндегі көлеңкелердің үрейлі әрекеті

Мен үшөлшемді кеңістікте орналасып, бір-біріне көлеңке түсіретін фотосуреттер жиынтығын жасауға тырысамын. Мен екі тіктөртбұрышпен бастадым, міне менің кодым

function loadScene() {
    var WIDTH = 1200,
        HEIGHT = 500,
        VIEW_ANGLE = 45,
        ASPECT = WIDTH/HEIGHT,
        NEAR = 0.1,
        FAR = 10000,

        world = document.getElementById('world'),
        renderer = new THREE.WebGLRenderer(),
        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR),
        scene = new THREE.Scene(),
        texture = THREE.ImageUtils.loadTexture('image.jpg', {}, function() {
            renderer.render(scene, camera);
        }),
        material = new THREE.MeshLambertMaterial({map: texture}),
        solidMaterial = new THREE.MeshPhongMaterial({color: 0xCC0000}),
        rectangle = new THREE.PlaneGeometry(200, 120),
        mesh = new THREE.Mesh(rectangle, material),
        mesh1 = new THREE.Mesh(rectangle, material),
        spotLight = new THREE.SpotLight(0xFFFFFF, 1.3);

    camera.position.set(0, 0, 200);
    mesh.translateX(140);
    mesh.translateZ(-70);
    mesh.receiveShadow = true;
    mesh1.castShadow = true;
    spotLight.position.x = -100;
    spotLight.position.y = 230;
    spotLight.position.z = 230;
    spotLight.castShadow = true;

    scene.add(spotLight);
    scene.add(mesh);
    scene.add(mesh1);
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMapEnabled = true;
    renderer.render(scene, camera);
    world.appendChild(renderer.domElement);
}

Мұнда solidMaterial - қатты қызыл, ал материал - текстуралық материал. Мен алдым:

  • Металдар үшін материал пайдалансам, төртбұрыштар күткендей көрінеді, бірақ көлеңкелер жоқ. solidMaterial екеуі үшін де қолданамын.
  • mesh1 үшін mesh (біреуінен алшақ) және solidMaterial үшін материал пайдалансам, жасыл тіктөртбұрыш, ол көлеңкеден текстурасына түседі. Бұл тек күткендей жұмыс істейтін жалғыз оқиға.
  • mesh1 үшін mesh (біреуінен алшақ) және материал үшін solidMaterial көлеңкеден жасалынған қызыл тіктөртбұрыш, бірақ алдымен текстуралы төртбұрыш жоқ.

көлеңкелерді дұрыс пайдалану дегеніміз не?

2

1 жауаптар

Бұл екі тіктөртбұрышта бірдей материал болған кезде көлеңке пайда болмайды. Міне, бұл THREE.js-те қате.

Екінші жағынан, егер екі түрлі материалды қолдансам, көлеңке бірдей текстурасы болса да, күтілгендей көрінеді.

2
қосылды
Мен үш.js ішінің ішкі элементтерін білмеймін, бірақ бір қоңырауда материалмен бөлісетін барлық геометрияны суреттейді деп ойлаймын. Бұл көлеңкеден өте қиын, өкінішке орай, бірақ бұл, әрине, барлық жерде жақсы жұмыс істеу үшін ақылға сыйымды айырмашылық. Сондай-ақ, сіз өзіңіздің ісіңізге осындай қарапайым шешімді тапқаныңыздан кейін, мен бұл әрекетті «түзету» қажет екеніне күмәнданбеймін.
қосылды автор Toji, көзі