时间戳

首页 > 解决方案 > 将 DeviceOrientationControls 添加到 GLTF GLB 对象

three.js - 将 DeviceOrientationControls 添加到 GLTF GLB 对象

问题描述

我正在使用 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 条错误消息：

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

和

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

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

标签： three.jsgltf

解决方案

很难准确说出它不起作用的原因，特别是因为您的问题包含如此多的无关代码。你应该尝试用一个可重复的最小例子来问你的问题。

首先，您<scripts>从不同的来源和不同的版本导入您的。您正在加载的 Three.js 和 GLTFLoader 是 r92，但 DeviceOrientationControls 脚本未指定版本，因此它加载的是 r112 的最新版本，这可能不再与 ThreeJS 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>

笔记：

自 iOS 12.2 起，Apple 默认禁用陀螺仪访问，因此您必须在测试时在设置中启用它。请参阅此处以了解有关此问题的讨论。

推荐阅读