重新加載角度用戶界面模式，無需重新加載頁面的其餘部分

Question

我在Angular UI模式中使用three.js加載3D對象。 3D圖像正確加載，但是，當我更新包裝3D對象的紋理時，除非刷新頁面，否則不會顯示更新。我在three.js中嘗試了多個選項，但都沒有工作，所以我想看看是否可以做相當於「頁面刷新」的功能，但僅適用於Modal，因爲我不想刷新頁面上的其他元素。

通過名爲「Open 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="100%"> 
    </div> 

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

如下：它打開HTML代碼，然後與3D對象通過控制器填充

appControllers.controller('appBoxDisplayCtrl', ['$scope', 'appBoxPreview', function ($scope, appBoxPreview) { 

// 3D OBJECT - Variables 
var scene; 
var camera; 
var renderer; 
var box; 
var controls; 
var newtexture; 

// 3D OBJECT - Generate 

$scope.generate3D = function() { 
newtexture = THREE.ImageUtils.loadTexture("https://myblobservice.net/Texture_0.png"); 

//Instantiate a Collada loader 
var loader = new THREE.ColladaLoader(); 

loader.options.convertUpAxis = true; 
loader.load('https://myblobservice.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(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); 

} 
} 

// Initial 3D Load 
$scope.generate3D(); 

}]); 

我也有一個控制器用於管理模態實例依賴：

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

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

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

Answer 1

當您使用$("#webGL-container").append(renderer.domElement);這個移動範圍，如果的角度意義外0更新它不會刷新。

您會想要$watch正在改變的值，然後使用three.js來刷新圖像。

從技術上講，因爲您操縱的是DOM，您應該將使用three.js的渲染放入directive。