valex · September 25, 2018 14:38
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <html>

 <head>
    <title>Example 10.07 - UV mapping </title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>


    <script type="text/javascript" src="../libs96/OBJLoader.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
 </head>
 <body>

 <div id="Stats-output">
 </div>
 <!-- Div which will hold the Output -->
 <div id="WebGL-output">
 </div>

 <!-- Javascript code that runs our Three.js examples -->
 <script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xffffff));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMap.enabled = true;
        webGLRenderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(new THREE.Vector3(0, 0, 0));


        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        var texture = new THREE.TextureLoader().load("../assets96/textures/ash_uvgrid01.jpg");
 //        var mat = new THREE.MeshBasicMaterial();
        var mat = new THREE.MeshBasicMaterial({map: texture});
        var geom = new THREE.BoxGeometry(24, 24, 24);
        var mesh = new THREE.Mesh(geom, mat);

        mesh.rotation.z = 0.5 * Math.PI;
        mesh.rotation.y = 0.2 * Math.PI;
        mesh.rotation.x = 0.2 * Math.PI;
        scene.add(mesh);

        console.log(geom.faceVertexUvs[0][0]);

        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial
            this.uv1 = geom.faceVertexUvs[0][0][0].x;
            this.uv2 = geom.faceVertexUvs[0][0][0].y;
            this.uv3 = geom.faceVertexUvs[0][0][1].x;
            this.uv4 = geom.faceVertexUvs[0][0][1].y;
            this.uv5 = geom.faceVertexUvs[0][0][2].x;
            this.uv6 = geom.faceVertexUvs[0][0][2].y;
        };

        var gui = new dat.GUI();
        gui.add(controls, 'uv1', 0, 1).onChange(function (e) {
            geom.faceVertexUvs[0][0][0].x = e;
            geom.uvsNeedUpdate = true
        });
        gui.add(controls, 'uv2', 0, 1).onChange(function (e) {
            geom.faceVertexUvs[0][0][0].y = e;
            geom.uvsNeedUpdate = true
        });
        gui.add(controls, 'uv3', 0, 1).onChange(function (e) {
            geom.faceVertexUvs[0][0][1].x = e;
            geom.uvsNeedUpdate = true
        });
        gui.add(controls, 'uv4', 0, 1).onChange(function (e) {
            geom.faceVertexUvs[0][0][1].y = e;
            geom.uvsNeedUpdate = true
        });
        gui.add(controls, 'uv5', 0, 1).onChange(function (e) {
            geom.faceVertexUvs[0][0][2].x = e;
            geom.uvsNeedUpdate = true
        });
        gui.add(controls, 'uv6', 0, 1).onChange(function (e) {
            geom.faceVertexUvs[0][0][2].y = e;
            geom.uvsNeedUpdate = true
        });


 //        controls.loadCube1();


        render();


        function render() {
            stats.update();

            if (mesh) {
 //                mesh.rotation.y += 0.006;
 //                mesh.rotation.x += 0.006;
 //                mesh.rotation.y+=0.006;
            }


            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
 </script>
 </body>
 </html>
	<!DOCTYPE html>

	<html>

	<head>
	<title>Example 10.07 - UV mapping </title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>


	<script type="text/javascript" src="../libs96/OBJLoader.js"></script>
	<style>
	body {
	/* set margin to 0 and overflow to hidden, to go fullscreen */
	margin: 0;
	overflow: hidden;
	}
	</style>
	</head>
	<body>

	<div id="Stats-output">
	</div>
	<!-- Div which will hold the Output -->
	<div id="WebGL-output">
	</div>

	<!-- Javascript code that runs our Three.js examples -->
	<script type="text/javascript">

	// once everything is loaded, we run our Three.js stuff.
	function init() {

	var stats = initStats();

	// create a scene, that will hold all our elements such as objects, cameras and lights.
	var scene = new THREE.Scene();

	// create a camera, which defines where we're looking at.
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

	// create a render and set the size
	var webGLRenderer = new THREE.WebGLRenderer();
	webGLRenderer.setClearColor(new THREE.Color(0xffffff));
	webGLRenderer.setSize(window.innerWidth, window.innerHeight);
	webGLRenderer.shadowMap.enabled = true;
	webGLRenderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

	// position and point the camera to the center of the scene
	camera.position.x = -30;
	camera.position.y = 40;
	camera.position.z = 50;
	camera.lookAt(new THREE.Vector3(0, 0, 0));


	// add the output of the renderer to the html element
	document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

	// call the render function
	var step = 0;


	var texture = new THREE.TextureLoader().load("../assets96/textures/ash_uvgrid01.jpg");
	// var mat = new THREE.MeshBasicMaterial();
	var mat = new THREE.MeshBasicMaterial({map: texture});
	var geom = new THREE.BoxGeometry(24, 24, 24);
	var mesh = new THREE.Mesh(geom, mat);

	mesh.rotation.z = 0.5 * Math.PI;
	mesh.rotation.y = 0.2 * Math.PI;
	mesh.rotation.x = 0.2 * Math.PI;
	scene.add(mesh);

	console.log(geom.faceVertexUvs[0][0]);

	// setup the control gui
	var controls = new function () {
	// we need the first child, since it's a multimaterial
	this.uv1 = geom.faceVertexUvs[0][0][0].x;
	this.uv2 = geom.faceVertexUvs[0][0][0].y;
	this.uv3 = geom.faceVertexUvs[0][0][1].x;
	this.uv4 = geom.faceVertexUvs[0][0][1].y;
	this.uv5 = geom.faceVertexUvs[0][0][2].x;
	this.uv6 = geom.faceVertexUvs[0][0][2].y;
	};

	var gui = new dat.GUI();
	gui.add(controls, 'uv1', 0, 1).onChange(function (e) {
	geom.faceVertexUvs[0][0][0].x = e;
	geom.uvsNeedUpdate = true
	});
	gui.add(controls, 'uv2', 0, 1).onChange(function (e) {
	geom.faceVertexUvs[0][0][0].y = e;
	geom.uvsNeedUpdate = true
	});
	gui.add(controls, 'uv3', 0, 1).onChange(function (e) {
	geom.faceVertexUvs[0][0][1].x = e;
	geom.uvsNeedUpdate = true
	});
	gui.add(controls, 'uv4', 0, 1).onChange(function (e) {
	geom.faceVertexUvs[0][0][1].y = e;
	geom.uvsNeedUpdate = true
	});
	gui.add(controls, 'uv5', 0, 1).onChange(function (e) {
	geom.faceVertexUvs[0][0][2].x = e;
	geom.uvsNeedUpdate = true
	});
	gui.add(controls, 'uv6', 0, 1).onChange(function (e) {
	geom.faceVertexUvs[0][0][2].y = e;
	geom.uvsNeedUpdate = true
	});


	// controls.loadCube1();


	render();


	function render() {
	stats.update();

	if (mesh) {
	// mesh.rotation.y += 0.006;
	// mesh.rotation.x += 0.006;
	// mesh.rotation.y+=0.006;
	}


	// render using requestAnimationFrame
	requestAnimationFrame(render);
	webGLRenderer.render(scene, camera);
	}

	function initStats() {

	var stats = new Stats();
	stats.setMode(0); // 0: fps, 1: ms

	// Align top-left
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.top = '0px';

	document.getElementById("Stats-output").appendChild(stats.domElement);

	return stats;
	}
	}
	window.onload = init;
	</script>
	</body>
	</html>