Trying to create a dynamic cube in Three.js that can be modified based on user input. The connection is established using angular.js:
This snippet of HTML code enables users to input and adjust the values:
<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>
The following code involves Three.js and my objective is to incorporate the input values for the cube. Here is what I aim to achieve:
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;
If you have any ideas or potential solutions to resolve this matter, your assistance would be greatly appreciated!
Edit:
This is the complete code. To clarify further, this is the initial value.
var geometry = new THREE.BoxGeometry(1, 1, 1);
And this is what I am striving to achieve.
var geometry = new THREE.BoxGeometry(length.value, width.value, height.value);
Edit #2
Per msmolens' request, I have included the angularjs controller
(function(angular) {
angular.module('3dHouseGenerator', [])
.controller('validateHouseInput', ['$scope', function($scope) {
$scope.length = {value: 7};
$scope.width = {value: 5};
$scope.height = {value: 4};
}]);
})(window.angular);