1
Я пытаюсь сгенерировать куб с Three.js, который можно динамически изменять в соответствии с входами пользователей. Связывание осуществляется через angular.js:Динамическое изменение размеров куба с помощью angularjs
Это 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;
У вас есть идея или возможное решение проблемы? Заранее благодарим за внимание!
Edit:
Это вся code. Чтобы лучше объяснить то, что я ищу, это начальное значение.
var geometry = new THREE.BoxGeometry(1, 1, 1);
И вот что я пытаюсь достичь.
var geometry = new THREE.BoxGeometry(length.value, width.value, height.value);
Edit # 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);
Можете ли вы опубликовать код для своего контроллера? – msmolens
Несомненно, приятель! Я собираюсь отредактировать вопрос и добавить его –