Javascript Three.js将框添加到不在iOS上工作的场景

我试图让Three.js在iOS上为场景添加一个框，但在macOS Safari上它似乎不起作用

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

iPad上的iOS 12.1.1

var场景、渲染器、控件、摄影机；
函数init（）{
container=document.getElementById（“画布”）；
container.height=$（“#canvas”）.height（）；
container.width=$（“#画布”）.width（）；
摄像头=新的三个透视摄像头（20，window.innerWidth/window.innerHeight，11000）；
摄像机。位置。设置（300300300）；
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xfffff0）；
添加（新的三个环境光（0x555555））；
var灯光=新的三点聚光灯（0xffffff，1.5）；
光。位置。设置（05002000）；
场景。添加（灯光）；
renderer=new THREE.WebGLRenderer({
阿尔法：是的，
反别名：对
});
渲染器.setClearColor（0xE6EEF2）；
renderer.setSize（$（container.width（），$（container.height（））；
renderer.sortObjects=false；
container.appendChild（renderer.domeElement）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enableKeys=false；
controls.enabled=false；
}
函数addBox（）{
变量方向={
dim1:78，
dim2:62，
dim3:35
}
var geom=新的三个.BoxGeometry（orientation.dim1，orientation.dim2，orientation.dim3）；
几何平移（方向.dim1/2，方向.dim2/2，方向.dim3/2）；
长方体材料=新的三网格材料({
透明：是的，
不透明度：0，
字母测试：0.5
});
网格=新的三个网格（几何图形、长方体材质）
var几何体=新的三边几何体（网格几何体）；
var edges_material=新的三线基本材质({
颜色：0x000000，
线宽：2
});
var edges=新的三条线段（几何体、边和材质）；
mesh.name=“box1”
场景.添加（网格.添加（边））；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
控件更新（）；
渲染器。渲染（场景、摄影机）；
}
函数addCube（）{
pos={
x:46,，
y:0，
z:0
};
方向=方向={
dim1:46，
dim2:28，
dim3:30
}
var geom=新的三个.BoxGeometry（orientation.dim1，orientation.dim2，orientation.dim3）；
几何平移（位置x+方向dim1/2、位置y+方向dim2/2、位置z+方向dim3/2）；
材质=新的3.0网格材质({
颜色：Math.random（）*0xffffff，
对,，
顶点颜色：3。顶点颜色，
透明：是的，
不透明度：0.7
});
网格=新的三个网格（几何、材质）
mesh.name=“立方体”；
场景。添加（网格）；
log（“添加的多维数据集”）；
}
init（）；
制作动画（）；
addBox（）；
addCube（）
正文{
保证金：0；
}
梅因先生{
高度：100vh；
显示器：flex；
位置：相对位置；
}
.内容{
显示器：flex；
宽度：100%；
最大高度：100vh；
溢出：自动；
}
.盒子{
flex:1自动；
显示器：flex；
弯曲方向：立柱；
左边框：1px实心#CED4D9；
右边框：1px实心#CED4D9；
对齐项目：居中；
}
.boxView容器{
宽度：100%；
高度：自动；
flex: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上工作得很好