THREE.js: problema durante il caricamento di Particle

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

Domanda

Se qualcuno riesce a far funzionare il codice di questo tizio sulla propria macchina, sarei grato se potesse aiutarmi facendomi sapere come.

Ho preso l'HTML e il JS da questa pagina: http://projects.harrynorthover.com / 3dcircles / html /

Sfortunatamente quando eseguo il suo codice sulla mia macchina (su localhost), non funzionerà (non vengono visualizzati cerchi).

Ho anche avuto qualche problema con il CSS. Sono confuso con esso. Ho messo il CSS inline per risolvere un problema con l'impostazione predefinita caricando il CSS (?)

Il codice che non funziona a questo punto proviene dallo strumento per sviluppatori di Chrome.

Il codice HTML modificato (dal tuo vero) è così: 

<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>

Il file JavaScript in cui si verifica l'errore (tutti i file vengono caricati correttamente), è così ( init(); è la prima funzione che viene chiamata ) 

// 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() ) );

a quel punto l'errore è: 

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

Ho copiato tutti i file di cui ho bisogno (cioè dal download di THREE.js).

Aiutaci, molto confuso

Presumo che, poiché l'errore si verifica dopo il caricamento di almeno TRE componenti, è perché sono necessari altri file o, non sono sicuro.

È stato utile?

Soluzione

Per quanto ne so, ho copiato tutti i file di cui ho bisogno (ad esempio dal download di THREE.js), ma non al 100%.

Dovresti prima diventare sicuro al 100% su questo punto.

Ecco come ho eseguito uno script di esempio:

  1. Fai clic su "download", quindi su "scarica .zip" nella pagina github three.js
  2. Decomprimere il file
  3. Copiato il file build/Three.js nella mia cartella js

Nota inoltre che per alcuni degli esempi inclusi avrai bisogno dell'argomento --allow-file-access-from-files all'avvio di Chrome (non sei sicuro dell'equivalente in altri browser).Un jsermeno descrive come farlo qui .

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top