Question

我在Angular UI模式中使用three.js加载3D对象。 3D图像正确加载，但是，当我更新包裹3D对象的纹理时，除非我刷新页面，否则不会显示更新。我在three.js中尝试了多个选项，但没有一个正在工作，所以我想看看我是否可以做相当于“页面刷新”但仅在Modal上，因为我在页面上有其他元素我不想刷新。

通过名为“Open Modal”的按钮打开模态。它打开此HTML代码，然后通过控制器填充3D对象：

<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>

我有一个专门用于加载到Modal中的控制器，如下所示：

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();

}]);

我还有一个用于管理Modal实例依赖的控制器：

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);如果renderer更新它不会刷新，则会将范围移到角度范围之外。

您需要$watch正在更改的值，然后使用 three.js 刷新图片。

从技术上讲，因为您正在操纵DOM，所以应该使用three.js将渲染放入directive。

重新加载Angular UI模式，无需重新加载其余页面

1 个答案: