Example Body Man Three.js Load

Import a Model from GLFT and then apply a texture and use a mouse event to change color

by vinodlouis

HTML

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	#container button{
		margin-top: 8%;
    	position: fixed;
    	width:200px;
    	height: 200px;
	}
</style>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r113/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r113/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r113/examples/js/loaders/GLTFLoader.js"></script>
<!-- <script type="text/javascript" src="https://azcotic.github.io/threefolder/stats.module.js"></script>
<script type="text/javascript" src="https://azcotic.github.io/threefolder/MathUtils.js"></script> -->
 
<script src="https://azcotic.github.io/threefolder/Detector.js"></script>
<script src="https://azcotic.github.io/threefolder/Stats.js"></script>
<script src="https://azcotic.github.io/threefolder/OrbitControls.js"></script>
<script src="https://azcotic.github.io/threefolder/THREEx.KeyboardState.js"></script>
<script src="https://azcotic.github.io/threefolder/THREEx.FullScreen.js"></script>
<script src="https://azcotic.github.io/threefolder/THREEx.WindowResize.js"></script>
<script src="https://azcotic.github.io/threefolder/Projector.js"></script>
	<title>Prueba Three.js</title>
</head>
<body>
	<div id="container"><button style="z-index: 1">Voltear</button></div>
  </body>
  </html>

CSS

body { margin: 0; }
canvas { width: 100%; height: 100% }

JavaScript

//Declaraciones

var mesh, renderer, scene, camera, controls, stats;
var keyboard = new THREEx.KeyboardState();
var modelOut;
			

//Declaraciones para Ray
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

init();
animate();

function init() {

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

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
				camera.position.set( 1, 0, 10 );
				camera.lookAt( 0, 3, 0 );

    // controls
    controls = new THREE.OrbitControls( camera );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x888888 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20, 20, 0 );
    scene.add( light );
    //projector 
    projector = new THREE.Projector();

    // STATS
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.bottom = '0px';
	stats.domElement.style.zIndex = 100;
	container.appendChild( stats.domElement );
    
    // axes
    //scene.add( new THREE.AxisHelper( 20 ) );

   var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
    };


    //Otro Mesh
    var MovingCubeMat = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
	var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1 );
	MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
	MovingCube.position.set(0, 25.1, 0);
	scene.add( MovingCube );	
	console.log("Cubo", MovingCube);

    //Cargar 3D
    var loader = new THREE.GLTFLoader();
    loader.setCrossOrigin( 'anonymous' );

    var scale = 1;
    var url2 = "https://azcotic.github.io/threefolder/Textures/elf_girl/scene.gltf";
    var url3 =...