Question

因此我尝试将此演示http://jsfiddle.net/9gdRR/15/复制到我的计算机并使用以下方法在本地进行测试：view-source：http://jsfiddle.net/9gdRR/15/show/

所有文件完全相同。我甚至将css文件复制到一个css文件夹中，因此它们是相同的（虽然文件是空白的），但它只是显示一个空白页面。谁知道为什么??

我复制的代码在

下面

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>ThreeJS - 301 - Ray Selector - Selecting Objects - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <script type='text/javascript' src="http://threejs.org/build/three.min.js"></script>



      <script type='text/javascript' src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>



      <script type='text/javascript' src="http://sole.github.io/tween.js/build/tween.min.js"></script>


  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width/height;
var near = 1;
var far = 10000;
var angle = 45;
var tween = null;

var createRenderer = function(){
    var renderer =  new THREE.WebGLRenderer(
        { antialias: true }
    );
    renderer.setSize(width,height);
    return renderer;
}

var createCamera = function(){
    var camera = new THREE.PerspectiveCamera(
        angle, aspect, near, far);
    camera.position.x = -200;
    camera.position.y = 100;
    camera.position.z = 1500;
    return camera;
}

var createControls = function(){
    var controls =
        new THREE.TrackballControls( camera );

    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;
    return controls;
}

var createScene = function(){
    var scene = new THREE.Scene();
    return scene;
}

var createLight = function(){
    var light =
        new THREE.SpotLight( 0xffffff, 1.5 );
    light.position.set( 0, 500, 2000 );
    light.castShadow = true;

    light.shadowCameraNear = 200;
    light.shadowCameraFar = camera.far;
    light.shadowCameraFov = 50;

    light.shadowBias = -0.00022;
    light.shadowDarkness = 0.5;

    light.shadowMapWidth = 2048;
    light.shadowMapHeight = 2048;
    return light;
}

var createCubes = function(){
    var geometry =
        new THREE.CubeGeometry( 100, 100, 100 );

    var objects = [];
    for ( var i = 0; i < 40; i ++ ) {

        var object =
            new THREE.Mesh( geometry,
                new THREE.MeshLambertMaterial(
                    {
                        color: Math.random() *
                            0xffffff } ) );

        object.material.ambient =
            object.material.color;

        object.position.x =
            (i%10 * 110) - 500;

        object.position.y =
            (i/10) * 110;

        object.position.z =
            500;



        object.castShadow = true;
        object.receiveShadow = true;
        objects.push( object );
    }
    return objects;
};

var createPlane = function(){
    var plane =
        new THREE.Mesh(
            new THREE.PlaneGeometry(
                2000,
                2000, 8, 8 ),
            new THREE.MeshBasicMaterial(
                {
                    color: 0x000000,
                    opacity: 0.25,
                    transparent: true,
                    wireframe: true } ) );
    plane.visible = false;
    return plane;
}

var scene = createScene();
var camera = createCamera();
var controls = createControls();

var light = createLight();
var cubes = createCubes();
var renderer = createRenderer();

var projector = new THREE.Projector();
var mouse = new THREE.Vector2()


scene.add(light);

for(var index=0;index<cubes.length;index++){
    scene.add(cubes[index]);
}

scene.add(createPlane());

var render = function(){
    renderer.render(scene,camera);
    TWEEN.update();
}
var animate = function(){
    requestAnimationFrame(animate);
    controls.update();
    render();
}

animate();


var container = $('body').append('<div>');
$(container).append( renderer.domElement);

$(container).mousedown(function(event){
    event.preventDefault();

    //FIXME - Figure out whether 2 here and 0.5
    // in the line below are related
    mouse.x = ( event.clientX /
        window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY /
        window.innerHeight ) * 2 + 1;


    //FIXME - Figure out logic behind 0.5
    var vector =
        new THREE.Vector3(mouse.x,mouse.y,0.5);

    projector.unprojectVector( vector, camera );

    var raycaster = new THREE.Raycaster(
        camera.position,
        vector.sub(camera.position).normalize()
    );


    var intersects =
        raycaster.intersectObjects( cubes );

    if ( intersects.length > 0 ) {
        var selectedObject = intersects[0].object;
        //console.log('Few Objects Selected '+intersects.length);
        //console.log(selectedObject);
        //intersects[0].object.material.color.setHex(0x000000);
        var position = {
            x:selectedObject.position.x,
            y:selectedObject.position.y,
            z:selectedObject.position.z
        };
        var target = {
            x:selectedObject.position.x,
            y:selectedObject.position.y,
            z:selectedObject.position.z
        };
        if(event.ctrlKey){
            target.z+=100;
        }
        else{
            target.z-=100;
        }

        tween = 
            new TWEEN.
                 Tween(position).
                 to(target, 1000);

        tween.start();

        tween.onUpdate(function(){            
            selectedObject.position.z = this.z;
            selectedObject.needsUpdate =
                true;
        });


    } else {
        //console.log('No Objects Selected');
    }

});


});//]]>  

</script>


</head>
<body>
  <div style='position:absolute;left:10px;top:580px'>
    Mouse Click to Push, Mouse Click+ Ctrl to Pull
</div>

<div><h1> Click here </h1></div>

</body>


</html>

Answer 1

如果要从文件系统本地加载文件，请在文件源中包含http:：

src='http://code.jquery.com/jquery-1.9.1.js'

否则它使用错误的协议并尝试从文件系统加载文件。

从JSFiddle下载100％，该应用程序没有显示

1 个答案: