我的 Javascript 代码在 JSFiddle 之外不起作用答案

【问题标题】：My Javascript Code doesnt work outside of JSFiddle我的 Javascript 代码在 JSFiddle 之外不起作用
【发布时间】：2014-01-24 01:58:32
【问题描述】：

由于某些奇怪的原因，我的代码将在 JSFiddle 中加载和工作，但是当我尝试在 JSFiddle 之外使用它时它将无法工作。有谁知道修复？或者发生了什么？链接到 JSFiddle... http://jsfiddle.net/56yK9/12/

If you go onto the jsfiddle link click "run" after the page has loaded.

查看我的html文档代码：http://pastebin.com/D9eeVysr

【问题讨论】：

检查控制台是否有错误
您是否在“jsfiddle 之外”的页面中包含了 Three.js？向我们展示您的 HTML...
是的，我做到了 >.> 因为一切都在我的 html 文档上运行......但是精灵没有加载。与它加载的 JSFiddle 相反。我似乎无法在问题 ._. 上获得所有代码；
您是否在 jsFiddle 之外正确导入 Three.js？你遇到了什么错误？
是的，three.js 已正确导入。在 JSFiddle 之外没有发生错误。只是在 JSFiddle 中加载的精灵没有加载到它之外，在我的 HTML 文档中。

标签： javascript three.js jsfiddle

【解决方案1】：

这里的代码可能会对您有所帮助...http://jsfiddle.net/ebeit303/e5Q3N/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js" ></script>
</head>
<body >
    <script>
        var container;
        var camera, scene, renderer;
        var group;

        container = document.createElement('div');
        document.body.appendChild(container);
        $(document).ready(function() {
            try {
                init();

            }
            catch (e) {
                container.innerHTML = e.toString();
            }
        });
        function init() {
            // renderer
            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setClearColorHex(0xADD8E6, 1);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);

            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2100);
            camera.position.z = 1000;

            scene = new THREE.Scene();

            group = new THREE.Object3D();
            scene.add(group);

            var tUrl = "http://www.mediafire.com/convkey/7344/ra2l3kgscpvjflafg.jpg";
            var texture = THREE.ImageUtils.loadTexture(tUrl, {}, spriteMesh);

            window.addEventListener('resize', onWindowResize, false);
            animate();
        }
        function spriteMesh(ashTexture) {
            // create sprites
            var ashMaterial = new THREE.SpriteMaterial({map: ashTexture});
            var Ash = new THREE.Sprite(ashMaterial);
            var imageWidth1 = ashMaterial.map.image.width;
            var imageHeight1 = ashMaterial.map.image.height;
            Ash.scale.set(3 * imageWidth1, 3 * imageHeight1, 1.0);
            Ash.position.set(2 * imageWidth1, 2 * imageHeight1, 1.0);
            group.add(Ash);
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);
            update();
            render();
        }
        function update() {
            camera.lookAt(scene.position);
            camera.updateProjectionMatrix();
        }
        function render() {
            renderer.render(scene, camera);
        }

    </script>
</body>
</html>

【讨论】：

【解决方案2】：

在您的 html 文档中 imageWidth 和 imageHeight 等于 0，因为其余的函数/代码不会等到从站点加载的图像，（在您的开发人员工具中检查它 -> 网络）这就是问题所在，所以sprite 是不可见的..您的代码可能需要更改..

var texture = THREE.ImageUtils.loadTexture(tUrl, {}, callback);
callback = function(texture){
........code ur stuff here...........
}

只需浏览链接中的代码，它会给你一些关于图像/纹理加载的想法...https://stackoverflow.com/a/21277768/2089677

【讨论】：

【解决方案3】：

我猜您缺少页面加载/就绪处理程序。
这个小例子似乎至少显示了一些东西：

http://pastebin.com/NmnTeX6Z

您可以在这里查看更清晰的 jsfiddle 创建输出：
jsfiddle.net/56yK9/show/

【讨论】：

这个问题没有效果