Поле добавления Three.js в сцену не работает на iOS

Я пытаюсь заставить Three.js добавить поле в сцену на iOS, но, похоже, он не работает, в то время как в macOS Safari он работает.

Сцена настроена правильно и добавляет первый блок, но при добавлении «куба» он не появляется на сцене.

iOS 12.1.1 на iPad

var scene, renderer, controls, camera;

function init() {
  container = document.getElementById("canvas");
  container.height = $("#canvas").height();
  container.width = $("#canvas").width();
  camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(300, 300, 300);
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xfffff0);
  scene.add(new THREE.AmbientLight(0x555555));
  var light = new THREE.SpotLight(0xffffff, 1.5);
  light.position.set(0, 500, 2000);
  scene.add(light);

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setClearColor(0xE6EEF2);
  renderer.setSize($(container).width(), $(container).height());
  renderer.sortObjects = false;
  container.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableKeys = false;
  controls.enabled = false;
}

function addBox() {
  var orientation = {
    dim1: 78,
    dim2: 62,
    dim3: 35
  }
  var geom = new THREE.BoxGeometry(orientation.dim1, orientation.dim2, orientation.dim3);
  geom.translate(orientation.dim1 / 2, orientation.dim2 / 2, orientation.dim3 / 2);
  box_material = new THREE.MeshPhongMaterial({
    transparent: true,
    opacity: 0,
    alphaTest: 0.5
  });
  mesh = new THREE.Mesh(geom, box_material)
  var geometry = new THREE.EdgesGeometry(mesh.geometry);
  var edges_material = new THREE.LineBasicMaterial({
    color: 0x000000,
    linewidth: 2
  });
  var edges = new THREE.LineSegments(geometry, edges_material);
  mesh.name = "box1"
  scene.add(mesh.add(edges));
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

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

function addCube() {
  pos = {
    x: 46,
    y: 0,
    z: 0
  };
  orientation = orientation = {
    dim1: 46,
    dim2: 28,
    dim3: 30
  }
  var geom = new THREE.BoxGeometry(orientation.dim1, orientation.dim2, orientation.dim3);
  geom.translate(pos.x + orientation.dim1 / 2, pos.y + orientation.dim2 / 2, pos.z + orientation.dim3 / 2);
  material = new THREE.MeshPhongMaterial({
    color: Math.random() * 0xffffff,
    flatShading: true,
    vertexColors: THREE.VertexColors,
    transparent: true,
    opacity: 0.7
  });
  mesh = new THREE.Mesh(geom, material)
  mesh.name = "cube";
  scene.add(mesh);
  console.info("added cube");
}

init();
animate();
addBox();
addCube();

body {
  margin: 0;
}

.main {
  height: 100vh;
  display: flex;
  position: relative;
}

.content {
  display: flex;
  width: 100%;
  max-height: 100vh;
  overflow: auto;
}

.box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #CED4D9;
  border-right: 1px solid #CED4D9;
  align-items: center;
}

.boxView-container {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<script src = "https://threejs.org/examples/js/controls/OrbitControls.js"></script>


<body>
  hello2
  <div id = "root">
    <main class = "main">
      <section class = "content">
        <div class = "box">
          <div class = "boxView-container" id = "canvas"></div>
        </div>
      </section>
    </main>
  </div>
</body>

В macOS Safari: Поле добавления Three.js в сцену не работает на iOS

В iOS Safari: Поле добавления Three.js в сцену не работает на iOS

jsfiddle: http://jsfiddle.net/acrogenesis/d583wyft/44/

javascript ios three.js

14.12.2018 03:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

386

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

например, var pos, mesh и т. д.

function addCube() {
    var pos = {x: 46, y: 0, z: 0};
    var orientation = {
        dim1: 46,
        dim2: 28,
        dim3: 30
    }
    var geom = new THREE.BoxGeometry(orientation.dim1, orientation.dim2,                         orientation.dim3);
    geom.translate(pos.x + orientation.dim1 / 2, pos.y + orientation.dim2 / 2, pos.z +         orientation.dim3 / 2);
    var material = new THREE.MeshPhongMaterial({
        color: Math.random() * 0xffffff,
        flatShading: true,
        vertexColors: THREE.VertexColors,
        transparent: true,
        opacity: 0.7
    });
    var mesh = new THREE.Mesh(geom, material)
    mesh.name = "cube";
    scene.add(mesh);
    console.info("added cube");
}

После определения этих локальных переменных теперь отлично работает на iOS.

14.12.2018 04:20

Другие вопросы по теме

Зачем мне нужно добавлять созданное моим приложением расположение Info.plist для установки Crashlytics в Xcode 10

Невозможно загрузить базовые фреймворки с помощью xcode 10.1

Как получить QR-код, с помощью которого можно открывать магазины iOS / Android в Китае и Юго-Восточной Азии?

Периферийное устройство iOS BLE writeValue не работает, если я readValue

Animate isHighlighted состояние imageView внутри ячейки представления коллекции

Подключение uipagecontrol ко всему моему uicollectionview, а не к отдельным ячейкам

Можно ли редактировать облачные функции Firebase на iPad и вносить изменения?

UIImagePickerControllerDelegate didFinishPickingMediaWithInfo дает мне ошибку

Сбой приложения iOS при запуске с исключением EXC_CORPSE_NOTIFY

Передача объектов iOS в React Native

Поле добавления Three.js в сцену не работает на iOS

Ответы 1

Другие вопросы по теме

Похожие вопросы