THREE.js: problem loading Particle

StackOverflow https://stackoverflow.com/questions/7382798

Question

If anyone can get this guy's small bit of code working on their machine, I'd be grateful if they could help me out by letting me know how.

I've taken the HTML and JS from this page: http://projects.harrynorthover.com/3dcircles/html/

Unfortunately when I run his code on my machine (on localhost), it won't work (no circles appear).

I also had some problem with the CSS. I'm confused with it. I put the CSS inline to solve a problem with the default set-up loading the CSS (?)

The code that fails is at this point from the Chrome developer tool.

The modified HTML code (from yours truly) is like this:

<html> 
<head> 

<title>First 3D Javascript Experiment</title> 

<style> 
@CHARSET "UTF-8";
body {
    border:0;
    margin:0;
    padding:20;
    padding-top:10px;
    background-color:#111111;
}

h2 {
    color:#FFFFFF;
    font-size:18;
    font-family:Calibri;
    margin-left:10px;
}

p {
    color:#FFFFFF;
    font-size:12;
    font-family:Calibri;
    margin-left:10px;
}

.canvasHolder {
    width:800;
    height:590;
    border:thin dotted #CCCCCC;
}

canvas {
    border:thin dotted #666666;
}
</style> 

<script type="text/javascript" src="js/Three.js"></script> 

</head> 
<body> 

<h2>3D Circles</h2> 
<p style="color:#CCCCCC; float:left; padding-left:500px; margin-top:-31px;">A 3D experiment using Three,js, HTML5 Canvas & Javascript.</p> 

<p><b>Click anywhere</b> in the square to <b>draw</b> some lovely <b>circles</b>.</p> 
<p style="color:#666666; margin-top:-10px;">By Harry Northover - <b><a href="http://www.harrynorthover.com" style="color:#666666;">www.harrynorthover.com</a></b></p> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/3d.js"></script> 

</body> 
</html>

The JavaScript file where the error is occurring (all the files are loading fine), is like this ( init(); is the first function that is called)

// 3d vars.
var camera;
var scene;
var renderer;

// size
var WIDTH               = 800;
var HEIGHT              = 600;

var circleColours       = [0x0099CC, 0xCCCCCC, 0x9900CC];
var colourIndexToUse    = 0;
var fadeAmount          = 0.0000000005;

// used to tell when to draw.
var shouldDraw          = false;

// mouse coordinates.
var mouseX;
var mouseY;

setInterval( invalidate, 10 );

function init() {
    camera                  = new THREE.Camera( 75, WIDTH / HEIGHT, 1, 10000 );
    scene                   = new THREE.Scene();
    renderer                = new THREE.CanvasRenderer();
    renderer.setSize( WIDTH, HEIGHT );

    camera.position.z       = 700;
    document.body.appendChild( renderer.domElement );
}

function invalidate()
{
    if(shouldDraw) draw();
    // fade all the current circles.
    fade();
    // render it all.
    renderer.render( scene, camera );
}

function draw() {
     for(var i = 0; i < 4; ++i)
     {
         var particle           = new THREE.Particle( new THREE.ParticleCircleMaterial( circleColours[colourIndexToUse], Math.random() ) );

at which point the error is:

45 - Uncaught TypeError: undefined is not a function
draw3d.js:45
invalidate3d.js:35

I've copied over all the files I need (i.e. from the THREE.js download).

Please help, most confused

I'm assuming that because the error happens after at least some THREE components are loaded, it's because some other files are needed or, not sure.

Was it helpful?

Solution

As far as I know I've copied over all the files I need (i.e. from the THREE.js download), but not 100% on that.

You should become 100% sure on this point first.

Here is how I got an example script running:

  1. Click 'downloads' and then 'download .zip' on the three.js github page
  2. Unzip that file
  3. Copied the build/Three.js file to my js folder

Also note that for some of the examples included you'll need the --allow-file-access-from-files argument when starting Chrome (not sure of the equivalent in other browsers). One jsermeno describes how to do so here.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top