Skip to content

Instantly share code, notes, and snippets.

@chrisbrasington

chrisbrasington/README.md

Last active October 17, 2020 03:21
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrisbrasington/fcf701b424256d671c95 to your computer and use it in GitHub Desktop.
Save chrisbrasington/fcf701b424256d671c95 to your computer and use it in GitHub Desktop.
Download ZIP
three.js object loader
Raw
README.md

#three.js javascript 3D Library - OBJ loader

This object was created in blender and exported as an .OBJ file using the three.js OBJLoader.js

It's important you check that you have your normals correct on your model.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>ship_triangle OBJloader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
OBJ loader
</div>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script>
var clock = new THREE.Clock();
var delta = clock.getDelta(); // seconds.
var rotateAngle = Math.PI / 2 * delta; // pi/2 radians (90 degrees) per second
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 600;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
// texture
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
// model
var loader = new THREE.OBJLoader( manager );
loader.load( 'ship_triangle.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
//child.material.map = texture;
}
} );
object.position.x = - 60;
object.rotation.x = 20* Math.PI / 180;
object.rotation.z = 20* Math.PI / 180;
object.scale.x = 30;
object.scale.y = 30;
object.scale.z = 30;
obj = object
scene.add( obj );
} );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
obj.rotation.x += (0.2*(Math.PI / 180));
obj.rotation.x %=360;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
Raw
ship_triangle.obj
# Blender v2.69 (sub 0) OBJ File: 'ship_triangle.blend'
# www.blender.org
mtllib ship_triangle.mtl
o Center_Triangle_Plane
v 2.999770 0.000000 1.996935
v 2.999770 0.000000 -2.011378
v -2.999770 0.000000 -0.009978
v 2.999770 0.000000 -2.011378
v 2.999770 0.000000 1.996935
v 2.999770 0.000000 -2.011378
v -2.999770 0.000000 -0.009978
v 0.927922 0.775715 -0.002011
v 0.927922 -0.782864 -0.002011
v 4.017130 0.509932 4.001282
v 6.117652 0.000000 -2.023209
v 6.093188 0.000000 1.996720
v 6.117652 0.000000 -2.023209
v 4.017130 0.509932 4.001282
v 6.093188 0.000000 1.996720
v 3.506970 0.000000 1.996276
v 3.506970 0.000000 -2.012037
v 1.435122 0.775715 -0.002670
v 1.435122 -0.782864 -0.002670
usemtl Material.002
s off
f 5 9 19 16
f 9 6 17 19
f 9 7 6
f 7 9 5
f 7 5 8
f 8 6 7
f 18 16 19
f 18 19 17
f 6 8 18 17
f 8 5 16 18
l 2 4
l 6 2
l 1 5
l 3 7
l 11 13
l 14 10
l 12 15
o Wing_Horizontal_Plane.001
v 2.999770 0.000000 1.996935
v 2.999770 0.000000 -2.011378
v -2.999770 0.000000 -0.009978
v 2.999770 0.000000 -2.011378
v 2.999770 0.000000 1.996935
v 2.999770 0.000000 -2.011378
v -2.999770 0.000000 -0.009978
v 2.999770 -0.257538 -2.997736
v 3.982134 -0.500035 -4.002655
v 5.008786 0.000000 -2.010098
v 4.017130 0.509932 4.001282
v 4.017130 -0.502630 4.001282
v 2.999770 0.239087 2.997624
v 4.984322 0.000000 2.009832
v 2.999770 -0.251137 2.997624
v 2.999770 0.253099 -2.997736
v 3.982134 0.503405 -4.002655
v 6.117652 0.000000 -2.023209
v 6.093188 0.000000 1.996720
v 3.982134 0.503405 -4.002655
v 5.008786 0.000000 -2.010098
v 6.117652 0.000000 -2.023209
v 4.017130 0.509932 4.001282
v 6.093188 0.000000 1.996720
usemtl Material.001
s off
f 30 33 32
f 31 34 33
f 34 26 32
f 30 26 31
f 26 30 32
f 34 31 26
f 32 34 33
f 28 29 27
f 36 35 29
f 27 35 26
f 36 28 26
f 36 26 35
f 27 26 28
f 29 35 27
f 41 28 39
f 29 40 39 36
f 41 39 40
f 28 40 41
f 43 33 42
f 31 33 43
f 43 42 31
l 21 23
l 25 21
l 20 24
l 22 26
l 37 41
l 42 30
l 38 43
o Wing_Verticle_Plane.002
v 2.999770 -1.996935 -0.000001
v 2.999770 2.011378 0.000001
v -2.999770 0.009978 0.000000
v 2.999770 2.011378 0.000001
v 2.999770 -1.996935 -0.000001
v 2.999770 2.011378 0.000001
v -2.999770 0.009978 0.000000
v 2.999770 2.997736 -0.257536
v 3.982134 4.002656 -0.500032
v 5.008786 2.010098 0.000001
v 4.017130 -4.001282 0.509930
v 4.017130 -4.001281 -0.502632
v 2.999770 -2.997625 0.239085
v 4.984322 -2.009832 -0.000001
v 2.999770 -2.997624 -0.251139
v 2.999770 2.997736 0.253101
v 3.982134 4.002655 0.503408
v 6.117652 2.023209 0.000001
v 6.093188 -1.996720 -0.000001
v 3.982134 4.002655 0.503408
v 5.008786 2.010098 0.000001
v 6.117652 2.023209 0.000001
v 4.017130 -4.001282 0.509930
v 6.093188 -1.996720 -0.000001
usemtl Material
s off
f 54 57 56
f 55 58 57
f 58 50 56
f 54 50 55
f 50 54 56
f 58 55 50
f 56 57 58
f 52 53 51
f 60 59 53
f 51 59 50
f 60 52 50
f 60 50 59
f 51 50 52
f 53 59 51
f 65 52 63
f 53 64 63 60
f 65 63 64
f 52 65 64
f 67 57 66
f 55 57 67
f 67 66 55
l 45 47
l 49 45
l 44 48
l 46 50
l 61 65
l 66 54
l 62 67
@stlee0722
Copy link

I had tried this code but why got no color?
Is that problem of mtl file?
Thankyou

@udayreddykaipa
Copy link

I got obj undefined at line 141, I made it global.
and now, ### Uncaught TypeError: Cannot read property 'rotation' of undefined
Am I missing in any dependency.

help is appreciated, thanks || gracias

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment