JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Colour: 
<input type="button" onclick="setColour(red_mat)" value="Red"/>
<input type="button" onclick="setColour(yellow_mat)" value="Yellow"/>
<input type="button" onclick="setColour(green_mat)" value="Green"/>
<input type="button" onclick="setColour(teal_mat)" value="teal"/>
<input type="button" onclick="setColour(blue_mat)" value="blue"/>
<input type="button" onclick="setColour(purple_mat)" value="Purple"/>
<input type="button" onclick="setColour(rainbow_mat)" value="Rainbow"/>
<input type="button" onclick="setColour(wood)" value="wood"/>
<input type="button" onclick="setColour(water)" value="water"/>
<br>Size: 
<input type="button" onclick="setPose(pose_1)" value="1"/>
<input type="button" onclick="setPose(pose_2)" value="2"/>
<input type="button" onclick="setPose(pose_3)" value="3"/>
<input type="button" onclick="setPose(pose_4)" value="4"/>
<input type="button" onclick="setPose(pose_5)" value="5"/>

<script src='https://stemkoski.github.io/Three.js/js/OrbitControls.js'></script>

JavaScript

var camera, scene, renderer, creature, geometry, material, pose,controls;

var red_mat = new THREE.MeshPhongMaterial(
        {color:0xff0000}
);
var yellow_mat = new THREE.MeshPhongMaterial(
        {color:0xffff00}
); 
var green_mat = new THREE.MeshLambertMaterial(
        {color:0x00ff00}
);
var teal_mat = new THREE.MeshPhongMaterial(
        {color:0x00ffff}
);
var blue_mat = new THREE.MeshLambertMaterial(
        {color:0x0000ff}
);
var purple_mat = new THREE.MeshPhongMaterial(
        {color:0xff00ff}
);
var rainbow_mat = new THREE.MeshNormalMaterial();

THREE.ImageUtils.crossOrigin = '';
var texture1 = THREE.ImageUtils.loadTexture('http://i.imgur.com/CEGihbB.gif');
var texture2 = THREE.ImageUtils.loadTexture('https://media.freestocktextures.com/cache/6a/ab/6aab489d10e4697cd786cb04f60472ee.jpg');

var wood = new THREE.MeshBasicMaterial({
    map: texture1
});
var water = new THREE.MeshBasicMaterial({
    map: texture2
});


var pose_1 = new THREE.SphereGeometry(60, 10, 10);
var pose_2 = new THREE.SphereGeometry(90, 10, 10);
var pose_3 = new THREE.SphereGeometry(120, 10, 10);
var pose_4 = new THREE.SphereGeometry( 100, 6, 6 );
var pose_5 = new THREE.CubeGeometry(200, 200, 200);


function init(){

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    geometry.dynamic = true;
    creature = new THREE.Mesh(geometry, rainbow_mat);
    scene.add(creature);
    
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    
    controls = new THREE.OrbitControls( camera, renderer.domElement );

}

/*
var loader = new THREE.ObjectLoader();
loader.load("modules/squirtle-pokemon-go.json", function ( obj ) {
     scene.add( obj );
});
*/

function setColour(col){
    material = col;
   ...