JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
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="33"/>
<input type="button" onclick="setPose(pose_4)" value="4"/>
<input type="button" onclick="setPose(pose_5)" value="5"/>

CSS

body {
	  margin: 0;
}

JavaScript

//var camera, scene, renderer, geometry, material, mesh;

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

// coloured materials

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();

// texture images to wrap around

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
});

// mesh shapes

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.BoxGeometry(1, 1, 1);

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

function setPose(pose){
    geometry = pose;
    creature.geometry = geometry;
}


init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    //geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
   // material = new THREE.MeshNormalMaterial();

    //mesh = new THREE.Mesh( geometry, material );
    //scene.add( mesh );
    
    geometry = pose_1;
    geometry.dynamic = true;
    creature = new THREE.Mesh(geometry, rainbow_mat);
   ...