我尝试使用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);
答案 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代码放入服务中,将服务注入控制器,并通过服务上的函数更新多维数据集的比例。