THREE.js:مشكلة في تحميل الجسيمات

https://stackoverflow.com/questions/7382798

29-10-2019
|

سؤال

إذا تمكن أي شخص من تشغيل الجزء الصغير من التعليمات البرمجية لهذا الرجل على أجهزته، سأكون ممتنًا إذا تمكن من مساعدتي من خلال إخباري بالطريقة.

لقد أخذت HTML وJS من هذه الصفحة: http://projects.harrynorthover.com/3dcircles/html/

لسوء الحظ، عندما أقوم بتشغيل الكود الخاص به على جهازي (على المضيف المحلي)، فإنه لن يعمل (لا تظهر أي دوائر).

لقد واجهت أيضًا بعض المشاكل مع 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).

الرجاء المساعدة، والأكثر حيرة

أفترض أنه نظرًا لحدوث الخطأ بعد تحميل بعض المكونات الثلاثة على الأقل، فذلك لأن بعض الملفات الأخرى مطلوبة أو غير متأكدة.

المحلول

بقدر ما أعرف لقد قمت بنسخ جميع الملفات التي أحتاجها (أي.من تنزيل THREE.js)، ولكن ليس 100% على ذلك.

يجب أن تكون متأكدًا بنسبة 100% من هذه النقطة أولاً.

إليك كيفية تشغيل مثال للبرنامج النصي:

انقر فوق "التنزيلات" ثم "تنزيل .zip" على صفحة three.js على جيثب
قم بفك ضغط هذا الملف
نسخت build/Three.js الملف إلى مجلد js الخاص بي

لاحظ أيضًا أنه بالنسبة لبعض الأمثلة المضمنة، ستحتاج إلى --السماح بالوصول إلى الملفات من الملفات الوسيطة عند بدء تشغيل Chrome (لست متأكدًا من ما يعادلها في المتصفحات الأخرى).يصف أحد jsermeno كيفية القيام بذلك هنا.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow