我在 codepen 上发现了一个很酷的动画，它采用 map (img)并用 block 重建它。需要的js文件是three.min.js和TweenMax.min.js我从 codepen 中获取了链接并将其粘贴到我的脑海中 <script src=""></script> 。复制每个 css 和 html(不多)后，出现 three.min.js出现错误(？)。
我打开谷歌浏览器控制台并看到 three.min.js:536 Uncaught TypeError: Cannot read property 'width' of null .
这是我提到的代码笔动画: http://codepen.io/Mamboleoo/pres/JYJPJr
我的代码:
<!DOCTYPE html>
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"] . "/assets/head.php"; ?>
<title><?php echo $address; ?> - Credits</title>
</head>
<body>
<?php include $_SERVER["DOCUMENT_ROOT"] . "/navigationbar.php"; ?>
<script>
var renderer, scene, camera, ww, wh, particles;
ww = window.innerWidth,
wh = window.innerHeight;
var centerVector = new THREE.Vector3(0, 0, 0);
var previousTime = 0;
var getImageData = function(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
return ctx.getImageData(0, 0, image.width, image.height);
}
var drawTheMap = function() {
var geometry = new THREE.Geometry();
var material = new THREE.PointsMaterial({
size: 3,
color: 0x313742,
sizeAttenuation: false
});
for (var y = 0, y2 = imagedata.height; y < y2; y += 2) {
for (var x = 0, x2 = imagedata.width; x < x2; x += 2) {
if (imagedata.data[(x * 4 + y * 4 * imagedata.width) + 3] > 128) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 1000 - 500;
vertex.y = Math.random() * 1000 - 500;
vertex.z = -Math.random() * 500;
vertex.destination = {
x: x - imagedata.width / 2,
y: -y + imagedata.height / 2,
z: 0
};
vertex.speed = Math.random() / 200 + 0.015;
geometry.vertices.push(vertex);
}
}
}
particles = new THREE.Points(geometry, material);
scene.add(particles);
requestAnimationFrame(render);
};
var init = function() {
THREE.ImageUtils.crossOrigin = '';
renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("map"),
antialias: true
});
renderer.setSize(ww, wh);
renderer.setClearColor(0x1d1f23);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
camera.position.set(-100, 0, 220);
camera.lookAt(centerVector);
scene.add(camera);
texture = THREE.ImageUtils.loadTexture("http://mamboleoo.be/lab/transparentMap.png", undefined, function() {
imagedata = getImageData(texture.image);
drawTheMap();
});
window.addEventListener('resize', onResize, false);
};
var onResize = function(){
ww = window.innerWidth;
wh = window.innerHeight;
renderer.setSize(ww, wh);
camera.aspect = ww / wh;
camera.updateProjectionMatrix();
};
var render = function(a) {
requestAnimationFrame(render);
for (var i = 0, j = particles.geometry.vertices.length; i < j; i++) {
var particle = particles.geometry.vertices[i];
particle.x += (particle.destination.x - particle.x) * particle.speed;
particle.y += (particle.destination.y - particle.y) * particle.speed;
particle.z += (particle.destination.z - particle.z) * particle.speed;
}
if(a-previousTime>100){
var index = Math.floor(Math.random()*particles.geometry.vertices.length);
var particle1 = particles.geometry.vertices[index];
var particle2 = particles.geometry.vertices[particles.geometry.vertices.length-index];
TweenMax.to(particle, Math.random()*2+1,{x:particle2.x, y:particle2.y, ease:Power2.easeInOut});
TweenMax.to(particle2, Math.random()*2+1,{x:particle1.x, y:particle1.y, ease:Power2.easeInOut});
previousTime = a;
}
particles.geometry.verticesNeedUpdate = true;
camera.position.x = Math.sin(a / 5000) * 100;
camera.lookAt(centerVector);
renderer.render(scene, camera);
};
init();
</script>
<style>
canvas{width:100%;height:100%;padding:0;margin:0;overflow: hidden;}
</style>
<div class="wrapper">
<canvas id="map"></canvas>
</div>
<div style="position:relative; clear:both;"></div>
<!--</body>-->
<?php include $_SERVER["DOCUMENT_ROOT"] . "/footer.php"; ?>
</body>
</html>
最佳答案
问题已在评论中得到解决，但为了不让技术上的问题得不到解答，我将向在搜索问题中发布的错误后偶然发现此页面的任何人解释该过程。
在问题中发布的示例中(使用 PHP 加载 Javascript，但这对于当前的实际问题无关紧要)，与 ThreeJS 相关的 Javascript 在 DOM 加载 之前执行 Canvas 元素。显然，ThreeJS 需要 Canvas 元素，因为它将各种监听器和对象附加到它，因此当尝试访问与 canvas 元素相关的成员时，它只是得到 undefined。
解决这个问题的方法是在 DOM 加载元素之后加载 ThreeJS 以及与其相关的所有代码，有多种方法可以做到这一点(您应该搜索这些方法，因为我正在恐怕我没有时间解释所有这些)，但我会重点介绍我认为最简单的一个。该方法是将所有 DOM 特定代码(与 DOM 交互的 Javascript)放在 body 标记的 bottom 中(而不是在其下方，内部 它位于最底部。 As Vikas Kapadiya pointed out ，如果它位于其下方，则不是有效的 HTML)
下面的代码片段显示了 Javascript 如何相对于 DOM 加载:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var p = document.getElementById('example');
console.log("In head " + p);
</script>
</head>
<body>
<p id="example">Hello</p>
<script>
var p = document.getElementById('example');
console.log("In body " + p.innerHTML);
</script>
</body>
</html>输出:
In head null
In body Hello
如上所述，head 标签内的代码无法访问 innerHTML(指 p 的文本内容) tag)，因为在 DOM 加载之前执行。在 body 标签底部找到的代码可以，因为 DOM 已加载，然后浏览器偶然发现了 Javascript。
以下是一些相关链接，它们可能比我提供的更多信息:
Where should I put <script> tags in HTML markup?
Where to place JavaScript functions: <head>? <body>? or, after </html>?
关于javascript - 无法使用 Three.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39473320/