Question

我正在尝试让Three.js在iOS上向场景添加一个框，但是在macOS Safari上却无法使用。

场景正确设置并添加了第一个框，但是添加“立方体”时它没有出现在场景中

iPad上的iOS 12.1.1

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.log("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上：

在iOS Safari上：

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

Answer 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.log("added cube");
}

定义了这些局部变量后，现在可以在iOS上正常工作了。

Three.js在场景中添加框无法在iOS上使用

1 个答案: