three.js with customization

Question

Is it possible to add a model(say ,a mobile phone) using three.js in html5 canvas and then make it customizable like adding text,image etc.( on mobile ) using any canvas library,so as to make an interactive 3d model. Thanks.

Answer 1

You could use a library called Dat.GUI, which allows you to create a quick user interface that can accept plain text input fields, drop downs, select boxes, as well as numerical sliders. Here's an example of it being used with a text input field, which you could use to input a texture/image URL.

It's a really powerful library that can be further styled with CSS, if needed. This is all the code you need to get up and running (as you can see below, the object's properties get modified directly by Dat.GUI via invoking gui.add(object, 'property')):

<script type="text/javascript" src="dat.gui.js"></script>
<script type="text/javascript">

var FizzyText = function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
  this.displayOutline = false;
  this.explode = function() { ... };
  // Define render logic ...
};

window.onload = function() {
  var text = new FizzyText();
  var gui = new dat.GUI();
  gui.add(text, 'message');
  gui.add(text, 'speed', -5, 5);
  gui.add(text, 'displayOutline');
  gui.add(text, 'explode');
};

</script>

Answer 2

是。 Three.js使用画布来渲染3D内容，您可以使用任何HTML工具来制作该网页的其余部分。