我的Javascript代码在JSFIDLE之外无法工作_Javascript_Three.js_Jsfiddle

我的Javascript代码在JSFIDLE之外无法工作

javascript three.js

我的Javascript代码在JSFIDLE之外无法工作,javascript,three.js,jsfiddle,Javascript,Three.js,Jsfiddle,出于某种奇怪的原因，我的代码将在JSFIDLE中加载并工作，但是当我尝试在JSFIDLE之外使用它时，它将不工作。有人知道怎么解决吗？或者发生了什么？链接到JSFIDLE。。。要查看我的html文档代码：在您的html文档imageWidth和imageHeight中等于0，因为其他函数/代码不会等到从站点加载图像（在开发人员工具->网络中检查），这就是问题所在，因此精灵不可见。您的代码可能需要更改 var texture = THREE.ImageUtils.loadTexture(tU

出于某种奇怪的原因，我的代码将在JSFIDLE中加载并工作，但是当我尝试在JSFIDLE之外使用它时，它将不工作。有人知道怎么解决吗？或者发生了什么？链接到JSFIDLE。。。

要查看我的html文档代码：

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

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

只需浏览链接中的代码，它会给你一些关于图像/纹理加载的想法

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

您可以在这里查看JSFIDLE创建的更清晰的输出：

jsfiddle.net/56yK9/show/

这里的代码可能会帮助您


var容器；
摄像机、场景、渲染器；
var组；
container=document.createElement（'div'）；
文件.正文.附件（容器）；
$（文档）.ready（函数（）{
试一试{
init（）；
}
捕获（e）{
container.innerHTML=e.toString（）；
}
});
函数init（）{
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true}）；
setClearColorHex（0xADD8E6，1）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.domeElement）；
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，1210）；
摄像机位置z=1000；
场景=新的三个。场景（）；
group=new THREE.Object3D（）；
场景。添加（组）；
var tUrl=”http://www.mediafire.com/convkey/7344/ra2l3kgscpvjflafg.jpg";
var texture=THREE.ImageUtils.loadTexture（tUrl，{}，spriteMesh）；
addEventListener（'resize'，onWindowResize，false）；
制作动画（）；
}
功能spriteMesh（ashTexture）{
//创造精灵
var ashMaterial=new THREE.SpriteMaterial（{map:ashTexture}）；
var Ash=新的三种雪碧（ashMaterial）；
var imageWidth1=ashmatterial.map.image.width；
var imageHeight1=ashmatterial.map.image.height；
灰分刻度设置（3*imageWidth1，3*imageHeight1，1.0）；
灰分位置设置（2*imageWidth1，2*imageHeight1，1.0）；
添加组（灰分）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
更新（）；
render（）；
}
函数更新（）{
摄像机。注视（场景。位置）；
camera.updateProjectMatrix（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

检查控制台是否存在错误ID是否在页面上包含三个.js“在JSFIDLE之外”？向我们展示你的HTML…是的，我做了>>，因为我的HTML文档中的所有内容都有效。。。但是雪碧没有加载。与JSFiddle相反，JSFiddle在其中进行加载。我似乎无法完全理解这个问题。；您是否在JSFIDLE之外正确导入

Three.js

？您得到了什么错误？是的，正确导入了three.js。在JSFIDLE之外没有发生任何错误。只是在JSFIDLE中加载的精灵并没有在它之外加载，在我的HTML文档中

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

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