我的Javascript代码在JSFiddle之外不起作用
[英]My Javascript Code doesnt work outside of JSFiddle
问题描述
For some weird reason my code will load and work in JSFiddle, however it will not work when I try using it outside of JSFiddle. 
出于某些奇怪的原因，我的代码将在JSFiddle中加载并工作，但是当我尝试在JSFiddle之外使用它时，它将无法工作。 Does anyone know a fix? 有人知道解决方法吗？ Or what is happening? 还是发生了什么？ Link to the JSFiddle... http://jsfiddle.net/56yK9/12/ 链接到JSFiddle ... http://jsfiddle.net/56yK9/12/
If you go onto the jsfiddle link click "run" after the page has loaded.
To see my html document code: http://pastebin.com/D9eeVysr 要查看我的html文档代码： http : //pastebin.com/D9eeVysr
3 个解决方案
解决方案1
0 2014-01-21 12:33:51
In your html document imageWidth and imageHeight equal 0, because the rest of the other functions/code doesnt wait until the image loaded from the site, (check it in your developer tool -> network) thats the problem here, so the sprite is invisible..your code might need changes.. 在您的html文档中imageWidth和imageHeight等于0，因为其余的其他功能/代码不会等到从站点加载图像后（在开发人员工具->网络中检查它），这就是这里的问题，因此该精灵是不可见的..您的代码可能需要更改。
var texture = THREE.ImageUtils.loadTexture(tUrl, {}, callback);
callback = function(texture){
........code ur stuff here...........
}
just go through the code in the link it will give you some idea on image/texture loading... https://stackoverflow.com/a/21277768/2089677 只需通过链接中的代码，它将为您提供有关图像/纹理加载的一些想法... https://stackoverflow.com/a/21277768/2089677
解决方案2
0 已采纳 2014-01-22 08:30:39
here this code might help you... http://jsfiddle.net/ebeit303/e5Q3N/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>
解决方案3
-1 2014-01-21 12:55:42
I guess you are missing an on page load / ready handler. 我想您缺少页面加载/就绪处理程序。
This little example seems to at least display something: 这个小例子似乎至少显示了一些东西：
http://pastebin.com/NmnTeX6Z http://pastebin.com/NmnTeX6Z
You can take a look at a much cleaner output of your jsfiddle creation here: 您可以在这里查看jsfiddle创建的更简洁的输出：
jsfiddle.net/56yK9/show/ jsfiddle.net/56yK9/show/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.