Skip to content

Instantly share code, notes, and snippets.

@spite

spite/gist:c5527fcc07429ca0b044

Created October 26, 2014 17:49
Show Gist options
  • Save spite/c5527fcc07429ca0b044 to your computer and use it in GitHub Desktop.
Save spite/c5527fcc07429ca0b044 to your computer and use it in GitHub Desktop.
Download ZIP
THREE.DecalGeometry loading OBJ file
Raw
gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<title>Decal Splatter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
*{ box-sizing: border-box; margin: 0; padding: 0 }
body {
color: #888;
font-family: tahoma;
font-size:13px;
background-color: #222;
margin: 0px;
overflow: hidden;
text-shadow: 0 1px 0 rgba( 0,0,0,.5 )
}
.intro{ position: absolute; left: 10px; top: 10px; line-height: 1.4em }
a{ color: inherit }
#container canvas{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; bottom: 0;}
b{ color: #aaa;}
</style>
</head>
<body>
<div id="container"></div>
<div class="intro">
<p><b>Decal Splatter</b> | Click or tap and drag to rotate, mouse wheel or pinch to zoom, click or tap to shoot paint.</p>
<p>Find the code here: <b><a href="https://github.com/spite/THREE.DecalGeometry" >THREE.DecalGeometry on GitHub</a></b>.</p>
</div>
<script src="js/Three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="../src/THREE.DecalGeometry.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="js/OBJLoader.js"></script>
<script>
var container = document.getElementById( 'container' );
var renderer, scene, helperScene, camera, fov = 45;
var mesh, decal;
var projector, raycaster;
var line;
var spotLight, pointLight, ambientLight;
var intersection = {
intersects: false,
point: new THREE.Vector3(),
normal: new THREE.Vector3()
};
var controls, renderHelpers = false;
var mouseVector = new THREE.Vector3();
var mouse = new THREE.Vector2();
var decalMaterial = new THREE.MeshPhongMaterial( {
specular: 0xffffff,
shininess: 10,
map: THREE.ImageUtils.loadTexture( 'assets/white-splatter.png' ),
normalMap: THREE.ImageUtils.loadTexture( 'assets/wrinkle-normal.jpg' ),
normalScale: new THREE.Vector2( .15, .15 ),
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: -4,
wireframe: false
});
/*decalMaterial = new THREE.MeshNormalMaterial( {
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: -4,
shading: THREE.SmoothShading
});*/
var decals = [];
var decalHelper, mouseHelper;
var p = new THREE.Vector3( 0, 0, 0 );
var r = new THREE.Vector3( 0, 0, 0 );
var s = new THREE.Vector3( 10, 10, 10 );
var up = new THREE.Vector3( 0, 1, 0 );
var check = new THREE.Vector3( 1, 1, 1 );
var params = {
projection: 'normal',
minScale: 10,
maxScale: 30,
rotate: true,
clear: function() {
removeDecals();
}
};
window.addEventListener( 'load', init );
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
helperScene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
camera.target = new THREE.Vector3();
controls = new THREE.OrbitControls( camera, renderer.domElement );
scene.add( camera );
ambientLight = new THREE.AmbientLight( 0x111111 );
scene.add( ambientLight );
pointLight = new THREE.PointLight( 0xff0000 );
pointLight.position.z = 10000;
pointLight.distance = 4000;
scene.add( pointLight );
pointLight2 = new THREE.PointLight( 0xff5500 );
pointLight2.position.z = 1000;
pointLight2.distance = 2000;
scene.add( pointLight2 );
pointLight3 = new THREE.PointLight( 0x0000ff );
pointLight3.position.x = -1000;
pointLight3.position.z = 1000;
pointLight3.distance = 2000;
scene.add( pointLight3 );
spotLight = new THREE.SpotLight( 0xaaaaaa );
spotLight.position.set( 100, 50, 100 );
scene.add( spotLight );
line = new THREE.Line( new THREE.Geometry( ), new THREE.LineBasicMaterial( { linewidth: 4 }) );
line.geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
line.geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
scene.add( line );
loadLeePerrySmith();
projector = new THREE.Projector();
raycaster = new THREE.Raycaster();
mouseHelper = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
scene.add( mouseHelper );
mouseHelper.visible = false;
window.addEventListener( 'resize', onWindowResize, false );
var moved = false;
controls.addEventListener( 'change', function() {
moved = true;
} );
controls.addEventListener( 'start', function() {
moved = false;
} );
controls.addEventListener( 'end', function() {
checkIntersection();
if( !moved ) shoot();
} );
window.addEventListener( 'mousemove', onTouchMove );
window.addEventListener( 'touchmove', onTouchMove );
function onTouchMove( event ) {
if( event.changedTouches ) {
x = event.changedTouches[ 0 ].pageX;
y = event.changedTouches[ 0 ].pageY;
} else {
x = event.clientX;
y = event.clientY;
}
mouse.x = ( x / window.innerWidth ) * 2 - 1;
mouse.y = - ( y / window.innerHeight ) * 2 + 1;
checkIntersection();
}
function checkIntersection() {
mouseVector.set( mouse.x, mouse.y, 1 );
projector.unprojectVector( mouseVector, camera );
raycaster.set( camera.position, mouseVector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( [ mesh ] );
if ( intersects.length > 0 ) {
var p = intersects[ 0 ].point;
mouseHelper.position.copy( p );
intersection.point.copy( p );
var n = intersects[ 0 ].face.normal.clone();
n.multiplyScalar( 10 );
n.add( intersects[ 0 ].point );
intersection.normal.copy( intersects[ 0 ].face.normal );
mouseHelper.lookAt( n );
line.geometry.vertices[ 0 ].copy( intersection.point );
line.geometry.vertices[ 1 ].copy( n );
line.geometry.verticesNeedUpdate = true;
intersection.intersects = true;
} else {
intersection.intersects = false;
}
}
var gui = new dat.GUI();
gui.add( params, 'projection', { 'From cam to mesh': 'camera', 'Normal to mesh': 'normal' } );
gui.add( params, 'minScale', 1, 30 );
gui.add( params, 'maxScale', 1, 30 );
gui.add( params, 'rotate' );
gui.add( params, 'clear' );
gui.open();
onWindowResize();
render();
}
function loadLeePerrySmith( callback ) {
// var loader = new THREE.JSONLoader();
var loader = new THREE.OBJLoader();
// loader.load( 'assets/LeePerrySmith.js', function( geometry ) {
loader.load( 'assets/male02.obj', function( s ) {
var geometry = s.children[ 0 ].geometry;
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.morphTargetsNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.tangentsNeedUpdate = true;
/*var material = new THREE.MeshPhongMaterial( {
map: THREE.ImageUtils.loadTexture( 'assets/Map-COL.jpg' ),
specularMap: THREE.ImageUtils.loadTexture( 'assets/Map-SPEC.jpg' ),
normalMap: THREE.ImageUtils.loadTexture( 'assets/Map-NOR.jpg' ),
shininess: 10
} );*/
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//mesh.scale.set( 10, 10, 10 );
//scene.add( new THREE.FaceNormalsHelper( mesh, 1 ) );
//scene.add( new THREE.VertexNormalsHelper( mesh, 1 ) );
} );
}
function shoot() {
if( params.projection == 'camera' ) {
var dir = camera.target.clone();
dir.sub( camera.position );
p = intersection.point;
var m = new THREE.Matrix4();
var c = dir.clone();
c.negate();
c.multiplyScalar( 10 );
c.add( p );
m.lookAt( p, c, up );
m = m.extractRotation( m );
dummy = new THREE.Object3D();
dummy.rotation.setFromRotationMatrix( m );
r.set( dummy.rotation.x, dummy.rotation.y, dummy.rotation.z );
} else {
p = intersection.point;
r.copy( mouseHelper.rotation );
}
var scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
s.set( scale, scale, scale );
if( params.rotate) r.z = Math.random() * 2 * Math.PI;
/*var dResult = createDecal(
mesh,
p,
r,
s,
check
);
decal = new THREE.Mesh( dResult.geometry, decalMaterial );
scene.add( decal );
helperScene.add( dResult.helper );
dResult.helper.visible = false;
var h = new THREE.BoxHelper( dResult.helper, 0xffffff );
h.material.linewidth = 2;
helperScene.add( h );*/
var m = new THREE.Mesh( new THREE.DecalGeometry( mesh, p, r, s, check ), decalMaterial );
decals.push( m );
scene.add( m );
//renderHelpers = true;
/*line.geometry.vertices[ 0 ].set( p.x, p.y, p.z );
line.geometry.vertices[ 1 ].set( c.x, c.y, c.z );
line.geometry.verticesNeedUpdate = true;*/
}
function removeDecals() {
decals.forEach( function( d ) {
scene.remove( d );
d = null;
} );
decals = [];
};
function mergeDecals() {
var merge = {};
decals.forEach(function (decal) {
var uuid = decal.material.uuid;
var d = merge[uuid] = merge[uuid] || {};
d.material = d.material || decal.material;
d.geometry = d.geometry || new THREE.Geometry();
d.geometry.merge(decal.geometry, decal.matrix);
});
removeDecals();
for (var key in merge) {
var d = merge[key];
var mesh = new THREE.Mesh(d.geometry, d.material);
scene.add(mesh);
decals.push(mesh);
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function render() {
requestAnimationFrame( render );
renderer.autoClear = false;
renderer.render( scene, camera );
if( renderHelpers ) renderer.render( helperScene, camera );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment