将 DeviceOrientationControls 添加到 GLTF GLB 对象答案

【问题标题】：Adding DeviceOrientationControls to a GLTF GLB object将 DeviceOrientationControls 添加到 GLTF GLB 对象
【发布时间】：2020-01-24 01:48:58
【问题描述】：

我正在使用 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>

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 条错误消息：

未捕获的类型错误：无法读取 null 的属性“addEventListener”

和

未捕获的引用错误：在 loadGltf 初始化之前无法访问“加载器”

所以，我不确定如何将这些行添加到我的特定代码中以使其正常工作？任何帮助将不胜感激

【问题讨论】：

那么您遇到的错误是什么，或者您遇到了什么问题？听起来您根本没有合并使其工作所需的那两行代码。创建相机后初始化控件，controls.update() 进入animate() 函数。
这就是我的问题，我如何正确地合并这些行？我将更新问题以显示我如何添加它们，以及我得到了什么错误。无论我将它们移动到哪里，都会出现某种错误
我更新了问题以更多地反映我的尝试并显示错误....任何帮助都会非常感激！提前谢谢你

标签： three.js gltf

【解决方案1】：

很难准确说出它不起作用的原因，尤其是因为您的问题包含如此多的无关代码。您应该尝试通过minimal reproducible example 提问。

首先，您要从不同的来源和不同的版本导入<scripts>。您加载的 Three.js 和 GLTFLoader 是 r92，但 DeviceOrientationControls 脚本未指定版本，因此它加载的是 r112 的最新版本，可能不再与 ThreeJS r92 兼容。

其次，你正在使用：

controls = new DeviceOrientationControls( camera );，应该是什么时候：

controls = new THREE.DeviceOrientationControls( camera );

最后，确保组织代码，并按顺序调用函数。在您启动const loader = new THREE.GLTFLoader() 之前是否调用了loadGltf()？ 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 起默认禁用陀螺仪访问，因此您必须在测试时在设置中启用它。见here for a discussion on the matter。

【讨论】：