Question

如果有人可以让这个人在他们的机器上运行一小段代码，我会很高兴他们可以通过让我知道如何帮助我。

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

不幸的是，当我在我的机器上运行他的代码（在localhost上）时，它将无效（没有圆圈出现）。

我也遇到了一些CSS问题。我很困惑。我把CSS 内联解决了加载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下载）。

请帮忙，最困惑

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

Answer 1

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

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

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

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

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

THREE.js：问题加载粒子

1 个答案: