Skip to content

Instantly share code, notes, and snippets.

@cubicleDowns
cubicleDowns / marqueecache.js
Created December 6, 2013 01:30
Marquee selection cache demonstration for speeding up selection of 3D objects. Read about the approach on my blog, http://blog.tempt3d.com/
var Demo = Demo || {};
Demo.Cache = Demo.Cache || {};
Demo.Cache = function (context) {
this.context = context;
this._cachedVertices = [];
this._cachedCentroidPoints = [];
@cubicleDowns
cubicleDowns / checkTTTwinner.js
Created December 4, 2013 22:16
Check for a tic-tac-toe winner with rays. This is referenced on my blog, blog.tempt3d.com
// loop through all the rays and look to see if all of their collisions objects show the same values.
//
// essentially, a ray will intersect all faces in one particular direction. 3 cubes = 6 faces = 6 intersections
// if all of the intersections show a 'selection' has take place, it'll check the selection types (ttt property)
function checkForTTT(){
var i,j,
collisions,
ticUser1,
ticUser2;
@cubicleDowns
cubicleDowns / createTTTrays.js
Last active December 30, 2015 07:29
Checking for a Tic-Tac-Toe winner using Rays with THREE.js. You can find more at my blog, blog.tempt3d.com.
function createRays() {
var setup = {
xDirection: xDirection = new THREE.Vector3(-1,0,0),
yDirection: yDirection = new THREE.Vector3(0,-1,0),
zDirection: zDirection = new THREE.Vector3(0,0,-1),
xy1Direction: xy1Direction = new THREE.Vector3(-1,-1,0).normalize(),
xy2Direction: xy2Direction = new THREE.Vector3(-1,1,0).normalize(),
xz1Direction: xz1Direction = new THREE.Vector3(-1,0,-1).normalize(),
xz2Direction: xz2Direction = new THREE.Vector3(-1,0,1).normalize(),
@cubicleDowns
cubicleDowns / marqueeselection.js
Last active December 23, 2017 00:22
Drag and Drop Marquee Selection with THREE.js and WebGL.
function listeners () {
demo.jqContainer.mousedown(mouseDown);
demo.jqContainer.mouseup(mouseUp);
demo.jqContainer.mousemove(marqueeSelect);
$(document).mousemove(resetMarquee);
}
function resetMarquee () {
mouseup = true;
mousedown = false;
@cubicleDowns
cubicleDowns / raysprojectionwithoffset.js
Created November 26, 2013 20:16
Casting a WebGL ray with an offset.
function init() {
$('#jqv').text($.fn.jquery);
$('#tjsv').text(THREE.REVISION);
demo = new Demo.Scene("ray-intersection");
demo.rotateCamera = true;
listeners();
// start the animation
// this also does all of the setup. i've encapsulated all of this work for brevity.
@cubicleDowns
cubicleDowns / rayprojection.js
Last active December 29, 2015 11:28
Casting a ray and randomly coloring a cube with THREE.js. See full code here: https://github.com/cubicleDowns/webgl-code-samples
function listeners () {
document.addEventListener('click', castRay, false);
}
function castRay (event) {
event.preventDefault();
var mouse = {};