Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Creating and Rendering a 3D image/figure

Just out of curiosity... Are any of Twine's languages capable of creating and rending a 3D image?
I've got all kinds of tutorials I could work through, but I need to know if it's possible to do in twine before I pour effort into it. If it won't then I'll go it solo, but Twine's got all my story in it haha.

I basically want to make a figure who will change depending on stats. EG, bulk up through strength.
If I could find a way to render the vertexes in relation to the variables (or result of) currently in the game I'm working on, I'd be laughing.


  • You need to state which Story Format you are using when asking a question, as answers can be different for each one.

    I don't know of any story format that has built-in features for creating/rendering 3D images, but you can use Javascript to add those features.

    There are third-party Javascript libraries which can be used to do 3D imaging, if a library will work with a particular story format depends on how the particular was implemented and the library's requirements.

    I have not personally used any of the libraries in a Twine project but someone else may of, and if so they may be able to suggest one or explain how they did it.
  • Normal method is to use an external program to pre-render the images (sometimes in parts) and then just to display the appropriate one. You could use an art program, or maybe a 3D renderer - MakeHuman, Blender, Daz Studio.

    I though I saw something recently about someone having working out how to interface Twine with Unity, which could well be worth looking at if you want 3D/graphic support (unity being an engine for 3D graphic games).
  • Sorry Greyelf, I forgot.
    I'm pretty sure I'm using sugarcube
    I have seen a lot of javascript prior to asking this. I don't know if I can just convert it.
    Are there any you would recommend for integrating near-pura javascript?

    Hey Mykael.
    I usually render in DAZ out of preference... but I want to change certain aspects that will quickly become a lot of additional render-work and a LOT of additional pictures.
    If you imagine strength will increase the arm size and speed will increase the leg size, even if I limit it to 1-10, I will be rendering 100 or so images, and then storing them all. Not to mention the other changes :S
    I wanted to just use pre-rendered images, but I know how to do that quite easily (thanks to searching the wiki and this site) but I want to shoot for the moon
  • You could see if this project got any further:

    You should be able to load the figure mesh with unity - don't know if it'll let you apply a scaling mesh to it.
  • zededd wrote: »
    Are there any you would recommend for integrating near-pura javascript?
    As I stated earlier, I have not used any of the 3D libraries so it would be hard to recommend one but I googled "javascript 3d library" and the first relevant listing was "three.js".

    So I downloaded it and got the "Creating a scene" example on the documentation page to work by doing the following:

    1. Copy the contents of the build/three.min.js file within the file into the Story Javascript area of a new SugarCube 2 project.

    2. Added the following Javascript to the bottom (after the code from point 1) of the Story Javascript area:
    if (! window.My3D) {
    	window.My3D = {
    		renderCube: function(id) {
    			var scene = new THREE.Scene();
    			var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    			var renderer = new THREE.WebGLRenderer();
    			renderer.setSize(400, 400);
    			var geometry = new THREE.BoxGeometry(1, 1, 1);
    			var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    			var cube = new THREE.Mesh(geometry, material);
    			camera.position.z = 5;
    			function render() {
    				cube.rotation.x += 0.1;
    				cube.rotation.y += 0.1;
    				renderer.render(scene, camera);
    3. Add the following to my story's first passage, the delay is needed so that the #scene div exists before it is used to render the Cube.
    <div id="scene"></div>
    <<timed 500ms>>

    A more experienced Javascript coder would be able to implement the above in a cleaner way but at least it works.
Sign In or Register to comment.