Three.js Mouse drag Rotate Cube (3D WebGL)

by Gwyn Milcote

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
<div>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"/></div>

JavaScript

var three = THREE;
var scene, camera, renderer, creature, material, geometry, pose;

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


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

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


function init(){

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    scene.add(camera);

    geometry = new THREE.BoxGeometry(1, 1, 1);
    //material = blue_mat;
    creature = new THREE.Mesh(geometry, rainbow_mat);
    creature.rotation.x = Math.PI/4;
    creature.rotation.y = Math.PI/4;
    scene.add(creature);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

}

init();

/* */
var isDragging =...