Question

我有一个Angular UI Modal，它可以加载一个three.js场景。然而，我的模态打开，直到我关闭模态并再次打开它才会渲染场景。之后，在关闭浏览器之前，场景在模态中显示没有问题。我确信这与我如何调用该函数有关，也许我需要一个小的超时。但是，我宁愿避免超时，只是确保在模式打开后渲染我的“框”的函数发生。

这是我的模态模板：

<div class="modal-header">
    <h3 class="modal-title">Box Preview</h3>
</div>
<div class="modal-body">

    <div id="webGL-container" width="500px">
    </div>

</div>
<div class="modal-footer">
    <button class="btn btn-primary" data-ng-click="ok()">Close</button>
</div>

这是我的Controller运行在“webGL-container”div中创建three.js场景的函数：

$scope.boxPreview = function () {
// Execute three.js function to render 3D "box"
generate3D();
// Open Modal
var modalInstance = $modal.open({
templateUrl: 'templates/boxpreview.html',
controller: 'ModalInstanceCtrl',
size: 'lg',
});

这是关闭模态的模态依赖：

appControllers.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {

        $scope.ok = function () {
            $modalInstance.close();
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    }]);

这是我的three.js代码：

var scene;
var camera;
var renderer;
var box;
var controls;
var newtexture;

// 3D OBJECT - Generate

function generate3D() {
//Instantiate a Collada loader
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('https://myblob.net/dae.dae', function (collada) {

box = collada.scene;              
box.traverse(function (child) {                   
if (child instanceof THREE.SkinnedMesh) {                       
var animation = new THREE.Animation(child, child.geometry.animation);
                        animation.play();
}
});

box.scale.x = box.scale.y = box.scale.z = .2;
box.updateMatrix();

init();
animate();
});

function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0xdddddd);
//renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setSize(500, 500);

// Load the box file
scene.add(box);

// Lighting
var light = new THREE.AmbientLight();
scene.add(light);

// Camera
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;

camera.lookAt(scene.position);

// Rotation Controls
controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;

controls.noZoom = false;
controls.noPan = false;

$("#webGL-container").append(renderer.domElement);
}

function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);

}
}

更新1：我注意到，当我不使用外部模板，而是按如下方式创建模板时，它会加载。我更喜欢使用外部模板：

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Box Preview</h3>
    </div>
    <div class="modal-body">
        <div id="webGL-container" width="500px">
        </div>
    </div>
  <div class="modal-footer">
        <button class="btn btn-primary" data-ng-click="ok()">Close</button>
    </div>
</script>

Answer 1

解决了它。我将3D盒子生成代码移动到一个专用控制器中，然后从我加载到Modal的模板中调用它，如下所示：

<div class="modal-header">
    <h3 class="modal-title">Box Preview</h3>
</div>
<div class="modal-body" data-ng-controller="appBoxDisplayCtrl">

    <div id="webGL-container" width="500px">
    </div>

</div>
<div class="modal-footer">
    <button class="btn btn-primary" data-ng-click="ok()">Close</button>
</div>

Angular UI模式在第二次打开时显示内容，而不是第一次

1 个答案: