THREE.js：加载粒子的问题答案

【问题标题】：THREE.js: problem loading ParticleTHREE.js：加载粒子的问题
【发布时间】：2011-11-15 00:24:38
【问题描述】：

如果有人可以让这个人的一小段代码在他们的机器上运行，如果他们能帮助我，让我知道如何做，我将不胜感激。

我已经从这个页面获取了 HTML 和 JS：http://projects.harrynorthover.com/3dcircles/html/

不幸的是，当我在我的机器上（在本地主机上）运行他的代码时，它不起作用（没有出现圆圈）。

我的 CSS 也有一些问题。我很困惑。我把 CSS inline 用来解决默认设置加载 CSS (?)

的问题

此时失败的代码来自 Chrome 开发者工具。

修改后的 HTML 代码（真的来自你的）是这样的：

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

发生错误的JavaScript文件（所有文件都加载正常）是这样的（init();是第一个被调用的函数）

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

此时的错误是：

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

我已经复制了所有我需要的文件（即从 THREE.js 下载）。

请帮忙，最困惑的

我假设因为在至少加载了一些三个组件之后发生错误，这是因为需要一些其他文件，或者不确定。

【问题讨论】：

看起来您缺少 2 个 JS 文件..
我在我的硬盘上搜索了这些文件，但它们不存在......在谷歌上查看，并没有提到与 THREE.js 有任何关系

标签： javascript html5-canvas three.js

【解决方案1】：

据我所知，我已经复制了所有我需要的文件（即从 THREE.js 下载），但不是 100%。

首先，您应该 100% 确定这一点。

这是我运行示例脚本的方法：

在three.js github page 上单击“下载”，然后单击“下载 .zip”
解压该文件
将build/Three.js文件复制到我的js文件夹中

另请注意，对于包含的某些示例，您在启动 Chrome 时需要 --allow-file-access-from-files 参数（不确定其他浏览器中的等效项）。一个 jsermeno 描述了如何做到这一点here。

【讨论】：

我摆脱了那一点。您是否尝试自己运行代码？
我已经从 Doob 先生的某个地方下载了源代码，但是 Git Hub 包大了 25MB 以上！所以，是的，它奏效了。谢谢。