Добавление DeviceOrientationControls в объект GLTF GLB - PullRequest
Новая
       20

Добавление DeviceOrientationControls в объект GLTF GLB

1 голос
/ 24 января 2020

Я использую Three. JS и получил файл .glb для прекрасного отображения с небольшим движением мыши.

Я сейчас пытаюсь добавить DeviceOrientationControls в мою сцену GLtf / GLB, чтобы я мог при перемещении мобильного телефона перемещайтесь по сцене, но я не могу разобраться. Независимо от того, что я пытаюсь, я всегда получаю ту или иную ошибку.

Я пытался адаптировать код из этого примера: https://threejs.org/examples/misc_controls_deviceorientation.html

Это мой текущий код без добавлен любой код DeviceOrientationControls:

HTML

<!-- three.min.js r87 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>

<!-- GLTFLoader.js -->
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js"></script>

<!-- Orientation Controls -->
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/DeviceOrientationControls.js"></script> 

<div id="overlay">
            <div>
                <button id="startButton">Start Demo</button>
                <p>Using device orientation might require a user interaction.</p>
            </div>
        </div>
<div class="single-object">
<div id="container"></div>

JS

window.addEventListener("load", loadGltf, false);
window.addEventListener("resize", onWindowResize, false);
const progressBar = document.querySelector("progress");

const gltfStore = {};

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

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

// Attach to container 
container = document.getElementById( 'container' );

//Setup camera
const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight,0.1, 1000 );

camera.position.set(0, 0, 0);
camera.lookAt(0, 0, 5);

windowHalfX = window.innerWidth / 2,
        windowHalfY = window.innerHeight / 2,
        mouseX = 0,
        mouseY = 0;

//Re-establish camera view on window resize
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

//Lighting
const lightFill = new THREE.PointLight(0xffffff, 1, 500);
lightFill.position.set(0, 0, 5);
scene.add(lightFill);

const lightKey = new THREE.PointLight(0xffffff, 1, 500);
lightKey.position.set(20, 0, 20);
scene.add(lightKey);

const loader = new THREE.GLTFLoader();

// Device Orientation


      // Load the GLB file
function loadGltf() {
  loader.load(
    "<?php echo get_template_directory_uri();?>/objects/SM_LookDev_TextureTest_FromFBX.glb",
    function(gltf) {
      scene.add(gltf.scene);
       mesh = gltf.scene;
      gltf.scene.children[0];
      gltfStore.scene = gltf.scene;
      // Set listener
       document.addEventListener("mousemove", onMouseMove);

    } 
  );

container.appendChild(renderer.domElement); 



// Mouse movement

function onMouseMove(event) {

          mouseX = (event.clientX - windowHalfX) / 10;
          mouseY = (event.clientY - windowHalfY) / 30;
}


  function animate() {
    requestAnimationFrame(animate);
    // Adjust mouse and scene position
    camera.position.x += (mouseX - camera.position.x) * .0005;
        camera.position.y += (-mouseY - camera.position.y) * .0003;
        camera.lookAt(0,0,10);
    renderer.render(scene, camera);

  }

  animate();
}

Я собрал из примеров, что мне нужно добавить эти строки (я думаю): 

controls = new DeviceOrientationControls( camera );

controls.update();

и ниже для кнопки запуска ... 

var startButton = document.getElementById( 'startButton' );
            startButton.addEventListener( 'click', function () {

                init();
                animate();

            }, false );

РЕДАКТИРОВАТЬ

Ниже приведен пример, где я пытался добавить строки, но не работал успешно. 

window.addEventListener("load", loadGltf, false);
window.addEventListener("resize", onWindowResize, false);
const progressBar = document.querySelector("progress");

// Add Start Button

var startButton = document.getElementById( 'startButton' );
            startButton.addEventListener( 'click', function () {

                init();
                animate();

            }, false );


const gltfStore = {};

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

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

// Attach to container 
container = document.getElementById( 'container' );

//Setup camera
const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight,0.1, 1000 );

camera.position.set(0, 0, 0);
camera.lookAt(0, 0, 5);

windowHalfX = window.innerWidth / 2,
        windowHalfY = window.innerHeight / 2,
        mouseX = 0,
        mouseY = 0;

//Re-establish camera view on window resize
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

//Lighting
const lightFill = new THREE.PointLight(0xffffff, 1, 500);
lightFill.position.set(0, 0, 5);
scene.add(lightFill);

const lightKey = new THREE.PointLight(0xffffff, 1, 500);
lightKey.position.set(20, 0, 20);
scene.add(lightKey);

const loader = new THREE.GLTFLoader();

// Added Device Orientation Controls
controls = new DeviceOrientationControls( camera );

      // Load the GLB file
function loadGltf() {
  loader.load(
    "<?php echo get_template_directory_uri();?>/objects/SM_LookDev_TextureTest_FromFBX.glb",
    function(gltf) {
      scene.add(gltf.scene);
       mesh = gltf.scene;
      gltf.scene.children[0];
      gltfStore.scene = gltf.scene;
      // Set listener
       document.addEventListener("mousemove", onMouseMove);

    } 
  );

container.appendChild(renderer.domElement); 



// Mouse movement

function onMouseMove(event) {

          mouseX = (event.clientX - windowHalfX) / 10;
          mouseY = (event.clientY - windowHalfY) / 30;
}


  function animate() {
    requestAnimationFrame(animate);
    // Adjust mouse and scene position
    camera.position.x += (mouseX - camera.position.x) * .0005;
        camera.position.y += (-mouseY - camera.position.y) * .0003;
        camera.lookAt(0,0,10);

// Add Controls Update
controls.update();

    renderer.render(scene, camera);

  }

  animate();
}

При добавлении подобных строк я получаю 2 сообщения об ошибках:

Uncaught TypeError: Невозможно прочитать свойство addEventListener со значением null

и

Uncaught ReferenceError: Невозможно получить доступ к 'загрузчику' до инициализации в loadGltf

Итак, я не уверен, как на самом деле добавить эти строки в мои спецификации c код, чтобы заставить его работать? Любая помощь будет оценена

1 Ответ

0 голосов
/ 29 января 2020

Трудно точно сказать причину, по которой это не работает, тем более что ваш вопрос содержит так много постороннего кода. Вы должны попытаться задать свои вопросы с помощью минимального воспроизводимого примера .

Сначала вы импортируете <scripts> из разных источников и разных версий. Загружаемый Three. js и GLTFLoader - это r92, но сценарий DeviceOrientationControls не указывает версию, поэтому он загружает самую последнюю версию в r112, которая может быть несовместима с Three JS r92.

Во-вторых, вы используете:

controls = new DeviceOrientationControls( camera );, когда оно должно быть:

controls = new THREE.DeviceOrientationControls( camera );

Наконец, убедитесь, что вы упорядочили свой код, и вызывайте свои функции последовательно. loadGltf() вызывается до того, как вы инициируете const loader = new THREE.GLTFLoader()? Существует ли startButton и определяется ли он перед вызовом startButton.addEventListener();?

Вот пример минимальный , реализующий элементы управления ориентацией: обратите внимание, что оба сценария импортируются из одного источника с r92 для обеспечения совместимости. 

window.addEventListener("resize", resize);

const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")});
const camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
const controls = new THREE.DeviceOrientationControls( camera );

// Make a scene with geometry
const scene = new THREE.Scene();
const geometry = new THREE.DodecahedronBufferGeometry(100,1);
const material = new THREE.MeshBasicMaterial({
  color: 0xff9900,
  wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

function resize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  
	renderer.setSize(width, height, false);
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
}

function animate(time) {
  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

resize();
animate(0);
body { margin: 0; }
<canvas></canvas>

<!-- three.min.js r92 -->
<script src="https://cdn.jsdelivr.net/npm/three@0.92/build/three.min.js"></script>

<!-- Orientation Controls r92 -->
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/controls/DeviceOrientationControls.js"></script>

Примечание:

Apple отключил доступ к гироскопу по умолчанию, начиная с iOS 12.2, поэтому вам придется включить его в настройки при тестировании. См. здесь для обсуждения по этому вопросу .

...