Skip to content

Instantly share code, notes, and snippets.

@valex

valex/UVCube1.obj

Created September 25, 2018 14:24
Show Gist options
  • Save valex/9cc4667b596dae393d89266a503a93a2 to your computer and use it in GitHub Desktop.
Save valex/9cc4667b596dae393d89266a503a93a2 to your computer and use it in GitHub Desktop.
Download ZIP
UV mapping
Raw
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;
// setup the control gui
var controls = new function () {
// we need the first child, since it's a multimaterial
this.loadCube1 = function () {
var loader = new THREE.OBJLoader();
loader.load('../assets96/models/UVCube1.obj', function (geometry) {
if (mesh) scene.remove(mesh);
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var texture = new THREE.TextureLoader().load("../assets96/textures/ash_uvgrid01.jpg");
material.map = texture;
geometry.children[0].material = material;
mesh = geometry;
geometry.scale.set(15, 15, 15);
scene.add(geometry);
});
};
this.loadCube2 = function () {
var loader = new THREE.OBJLoader();
loader.load('../assets96/models/UVCube2.obj', function (geometry) {
if (mesh) scene.remove(mesh);
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var texture = new THREE.TextureLoader().load("../assets96/textures/ash_uvgrid01.jpg");
material.map = texture;
geometry.children[0].material = material;
mesh = geometry;
geometry.scale.set(15, 15, 15);
geometry.rotation.x = -0.3;
scene.add(geometry);
});
};
};
var gui = new dat.GUI();
gui.add(controls, 'loadCube1');
gui.add(controls, 'loadCube2');
var mesh;
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>
Raw
UVCube1.obj
# Blender v2.68 (sub 0) OBJ File: ''
# www.blender.org
mtllib UVCube1.mtl
o Cube
v 1.000000 -1.000000 -1.000000
v 1.000000 -1.000000 1.000000
v -1.000000 -1.000000 1.000000
v -1.000000 -1.000000 -1.000000
v 1.000000 1.000000 -0.999999
v 0.999999 1.000000 1.000001
v -1.000000 1.000000 1.000000
v -1.000000 1.000000 -1.000000
vt 0.000000 0.000000
vt 1.000000 0.000000
vt 1.000000 1.000000
vt 0.000000 1.000000
usemtl Material
s off
f 1/1 5/2 6/3 2/4
usemtl Material_NONE
f 1/1 2/2 3/3 4/4
f 5/1 8/2 7/3 6/4
f 2/1 6/2 7/3 3/4
f 3/1 7/2 8/3 4/4
f 5/1 1/2 4/3 8/4
Raw
UVCube2.obj
# Blender v2.68 (sub 0) OBJ File: 'cube1.blend'
# www.blender.org
mtllib UVCube2.mtl
o Cube
v 1.000000 -1.000000 -1.000000
v 1.000000 -1.000000 1.000000
v -1.000000 -1.000000 1.000000
v -1.000000 -1.000000 -1.000000
v 1.000000 1.000000 -0.999999
v 0.999999 1.000000 1.000001
v -1.000000 1.000000 1.000000
v -1.000000 1.000000 -1.000000
vt 0.998981 0.333333
vt 1.000000 0.665647
vt 0.667686 0.666667
vt 0.666667 0.334353
vt 0.000000 0.334353
vt 0.332314 0.333333
vt 0.333333 0.665647
vt 0.001020 0.666667
vt 1.000000 0.001019
vt 0.666667 0.332314
vt 0.667686 0.000000
vt 0.334353 0.666667
vt 0.333333 0.334353
vt 0.665647 0.333333
vt 0.666667 0.665647
vt 0.333333 0.332314
vt 0.001020 0.333333
vt 0.000000 0.001020
vt 0.332314 0.000000
vt 0.333333 0.001019
vt 0.665647 0.000000
vt 0.334353 0.333333
usemtl Material
s off
f 1/1 5/2 6/3 2/4
usemtl Material_NONE
f 1/5 2/6 3/7 4/8
f 5/9 8/1 7/10 6/11
f 2/12 6/13 7/14 3/15
f 3/16 7/17 8/18 4/19
f 5/20 1/21 4/10 8/22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment