使用angularjs动态更改立方体尺寸

时间:2015-04-13 18:30:42

标签: javascript angularjs three.js

我尝试使用Three.js生成一个可以根据用户输入动态更改的多维数据集。绑定是通过angular.js

完成的

这是允许用户输入和修改值的html代码:

<body>
<div id="mainContainer">
    <h2 id="mainTitle">3D house generator</h2>
    <form ng-app="3dHouseGenerator" ng-controller="validateInput" name="myForm" novalidate>
    <p>House length: </br>
        <input type="number" name="length" ng-model="length.value" min="0.001" required />
    </p>

    <p>House width: </br>
        <input type="number" name="width" ng-model="width.value" min="0.001" required />
    </p>

    <p>House walls height: </br>
        <input type="number" name="height" ng-model="height.value" min="0.001" required />
    </p>
</body>

这是与Three.js相关的代码,我想要做的是插入多维数据集的输入值。这就是我想要达到的目的:

var geometry = new THREE.BoxGeometry(length, width, height);
var material = new THREE.MeshBasicMaterial({color: 0xCC0000});
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

// dynamically change and update the dimensions
cube.geometry.dynamic = true;
cube.geometry.verticesNeedUpdate = true;
cube.geometry.normalsNeedUpdate = true;

您是否有解决此问题的想法或可能的解决方案? 提前感谢您的关注!

修改

这是整个code。 为了更好地解释我在寻找什么,这是初始值。

var geometry = new THREE.BoxGeometry(1, 1, 1);

这就是我想要达到的目标。

var geometry = new THREE.BoxGeometry(length.value, width.value, height.value);

编辑#2

根据msmolens的要求,我正在添加angularjs控制器

(function(angular) {
angular.module('3dHouseGenerator', [])
    .controller('validateHouseInput', ['$scope', function($scope) {
        $scope.length = {value: 7};
        $scope.width  = {value: 5};
        $scope.height = {value: 4};         
    }]);

})(window.angular);

2 个答案:

答案 0 :(得分:0)

问题出在哪里?在javascript调用中

cube.scale.set(x,y,z) // xyz are numeric value of scale 1=100%

cube.scale.set(1,2,1)双倍高度。

答案 1 :(得分:0)

当用户更改输入时,您需要更新多维数据集的比例。一种方法是在ng-change上使用<input>

<input type="number" name="height" ng-model="height.value" ng-change="setScale()" min="0.001" required />

并在控制器中定义setScale()

$scope.setScale = function() {
    cube.scale.set(length.value, width.value, height.value);
};

根据您构建代码的方式,另一个问题可能是您无法访问控制器中的cube。解决此问题的结构化方法是将three.js代码放入服务中,将服务注入控制器,并通过服务上的函数更新多维数据集的比例。