Возникли проблемы с установкой объекта glTF на другой уровень в Three. js - PullRequest
Новая
       91

Возникли проблемы с установкой объекта glTF на другой уровень в Three. js

1 голос
/ 26 мая 2020

Я пытаюсь использовать слои в Three. js.

У меня есть этот сценарий со сферой, треугольником и объектом glTF (автомобиль).

I сделал второй слой enable: camera.layers.enable (1);

Установите сферу, треугольник и объект glTF на слой 1: 

car.layers.set( 1 );
sphere.layers.set( 1 );
triangle.layers.set( 1 );

Но когда я установил camera на уровень 1 (camera.layers.set (1);), объект glTF не отображается, но другие элементы отображаются. Похоже, я не могу установить объект glTF на другой слой, а не на слой по умолчанию.

Вот код. Что может быть не так?

Спасибо за внимание! 

<script>

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 3000);
    camera.position.set( 0, 0.1, 1 );
    camera.layers.enable(1);
    camera.layers.set(1);


var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor("#f5e5e5");
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);



// LIGHT ------------------------------------------------------------------------------>

var dLight = new THREE.DirectionalLight( 0x0000ff, 6.5 );
    dLight.position.set(1500, -700, 500);
    dLight.castShadow = true;
    dLight.layers.set(1);
    scene.add( dLight);


// Load a glTF resource -------------------------------------------------------->

var loader = new THREE.GLTFLoader();
var car;
    loader.load('car.gltf', function ( gltf ) {
    car = gltf.scene.children[0];
    car.scale.set(0.5, 0.5, 0.5);
    car.position.z = 0;
    car.position.y = -0.095;
    car.layers.set(1);

    scene.add( gltf.scene );
    render();

    });



// SPHERE --------------------------------------------------------------->

var material = new THREE.MeshLambertMaterial();
var geometry = new THREE.SphereGeometry(0.05, 20, 20);
var sphere = new THREE.Mesh(geometry, material); 
    sphere.position.x = 0.25;
    scene.add(sphere);
    sphere.layers.set( 1 );



// TRIANGLE ------------------------------------------------------------->

var geometre = new THREE.Geometry();
    geometre.vertices.push(new THREE.Vector3(-0.25, -0.1, 0));
    geometre.vertices.push(new THREE.Vector3(0, 0.30, 0));
    geometre.vertices.push(new THREE.Vector3(0.25, -0.1, 0));
    geometre.vertices.push(new THREE.Vector3(-0.25, -0.1, 0));

var triangle= new THREE.Line(geometre, new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 12 }));
    triangle.layers.set( 1 );
    scene.add(triangle);



// POST-PROCESSING  ------------------------------------------------------->

var composer = new THREE.EffectComposer(renderer);

var renderPass = new THREE.RenderPass(scene, camera);
    composer.addPass(renderPass);

var pass1 = new THREE.GlitchPass(0);
    composer.addPass(pass1);



// RENDER -------------------------------------------------------------->

    requestAnimationFrame(render);

    function render(){

    sphere.rotation.y += -0.02;
    car.rotation.y += 0.01;

    composer.render();

    requestAnimationFrame(render);

    };


</script>

1 Ответ

0 голосов
/ 27 мая 2020

Вы должны установить слои рекурсивно для всей иерархии объектов, например: 

gltf.scene.traverse( function( object ) {

    object.layers.set( 1 );

} );

По умолчанию конфигурация слоя не применяется автоматически к его дочерним узлам в графе сцены.

three.js r116

...