JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

three test again.

<html>

<head>
	<meta charset=utf-8>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<title>Testing</title>
	<style>body {margin: 0;overflow: hidden;}</style>
</head>

<body>
    
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://cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.min.js"></script>

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

<script>

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...