Javascript AngularJS指令中的Three.JS对象渲染

我目前正在尝试将Three.JS集成到AngularJS指令中。目前，我真的只是在寻找一个概念验证执行，我可以用它作为以后更复杂指令的样板

目前，我正在使用指令的

链接

功能设置Three.JS场景并启动动画

场景渲染良好，动画被称为“良好”，但我添加到场景中的对象没有渲染

我试过：

调整摄像机的视角、位置、纵横比

增加对象的大小

调整对象的颜色

我不确定这是否是由于某种原因导致对象无法看到或不可见的问题，或者该对象不在场景中。 在

render

函数中，我确实使用了

console.log

，并确认在

场景中找到了对象。traversal

函数调用，并按预期调整了其旋转

我已经确认了相同的代码在外部渲染和设置对象动画

以下是指令的全部内容，以及

角度模块（'nxGeometry'，[]） .directive（'nxGeometry'，function（）{ 返回{ 限制：“A”， 链接：函数（范围、元素、属性）{ //场景变量 摄像机、场景、几何体、渲染器、材质、对象、容器； //元件尺寸 scope.width=元素[0]。偏移网络宽度； scope.height=元素[0]。远视； scope.objectColor='#ffaa44'； scope.backgroundColor='#333333'； //初始化函数 scope.init=函数（）{ 容器=角度元素（“”）[0]； 元素[0]。appendChild（容器）； 摄像机=新的三视角摄像机（20，scope.width/scope.height，11000）； 摄像机位置x=5； 摄像机位置y=0； 摄像机位置z=0； 场景=新的三个。场景（）； 几何体=新的三个.长方体几何体（1,1,1）； 材质=新的3.MeshBasicMaterial（{color:#ffffff“}）； 对象=新的三个网格（几何体、材质）； object.position.x=0； object.position.y=0； object.position.z=0； 场景。添加（对象）； renderer=new THREE.WebGLRenderer（）； 渲染器.setSize（scope.width、scope.height）； renderer.setClearColor（scope.backgroundColor）； container.appendChild（renderer.domeElement）； }；//@end scope.init scope.render=函数（）{ 摄影机。看（场景）； //遍历场景，旋转网格对象 场景.遍历（函数（元素）{ if（元素实例为三个.Mesh）{ 元素旋转.x+=0.0065； 元素旋转y+=0.0065； } 渲染器。渲染（场景、摄影机）； }); }；//@end scope.render scope.animate=函数（）{ requestAnimationFrame（scope.animate）； scope.render（）； }; scope.init（）； scope.animate（）； } }; });

---

您的相机没有指向对象。只需将z增加到5，您的对象就会可见

camera.lookAt（场景）不起作用，因为必须添加场景的位置。像这样
camera.lookAt（场景.位置）

请查找更新的代码

我改变了这些事情：

camera   = new THREE.PerspectiveCamera(50, scope.width / scope.height, 1, 1000);

camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 5;

....
camera.lookAt(scene.position);

场景。位置
！那是丢失的一块，谢谢。我不知道为什么它在没有
位置
参考的情况下在angular之外工作，但它现在工作了。
camera   = new THREE.PerspectiveCamera(50, scope.width / scope.height, 1, 1000);

camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 5;

....
camera.lookAt(scene.position);