javascript - 特定的 div 未在特定位置呈现

Question

这是我发现自己所处的一个相当独特的情况!我正在为一个网站编写代码，我正在一个特定的 div 上使用 three.js 成群的小鸟动画，我将其命名为“canvas-div”，我希望它始终位于网站的首屏和顶部。

但我遇到的问题是发生了完全相反的情况。这是我到目前为止编写的代码...

<div class="canvas-wrapper">
  <div id="canvas-div">
  </div>
</div>
<div id="home1"></div>

对于我的 CSS，我有这个..

.canvas-wrapper {
  height:100%
}

#canvas-div {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: static; /* fixed or static */
  top: 0;
  left: 0;
  background:width:100%; height:100%;color:grey
  overflow:hidden;
  float:left
}

#home1 {
  height:300px;
  width:100%;
  float:left
}

当在检查元素上检查站点时，这就是我得到的...

<div class="canvas-wrapper"></div>
<div id="home1"></div>
<div id="canvas-div">
  <canvas></canvas>
</div>

我认为这是由运行成群的小鸟动画位的 JavaScript 引起的，我无法具体指出导致此问题的位置。

这是 JavaScript 代码...

function init() {
  container = document.getElementById("canvas-div"),   document.body.appendChild(container), camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1e4), camera.position.z = 450, scene = new THREE.Scene, birds = [], boids = [];
        for (var i = 0; 30 > i; i++) boid = boids[i] = new Boid, boid.position.x = 400 * Math.random() - 200, boid.position.y = 400 * Math.random() - 200, boid.position.z = 400 * Math.random() - 200, boid.velocity.x = 2 * Math.random() - 1, boid.velocity.y = 2 * Math.random() - 1, boid.velocity.z = 2 * Math.random() - 1, boid.setAvoidWalls(!0), boid.setWorldSize(500, 500, 400), bird = birds[i] = new THREE.Mesh(new Bird, new THREE.MeshBasicMaterial({
            color: 16777215 * Math.random(),
            side: THREE.DoubleSide
        })), bird.phase = Math.floor(62.83 * Math.random()), scene.add(bird);
        renderer = new THREE.CanvasRenderer({
            alpha: !0
        }), renderer.setClearColor(16777215, 0), renderer.setSize(container.offsetWidth, container.offsetHeight), container.appendChild(renderer.domElement), window.addEventListener("resize", onWindowResize, !1)
    }

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight, camera.updateProjectionMatrix(), renderer.setSize(window.innerWidth, window.innerHeight)
}

function onDocumentMouseMove(i) {
    for (var t = new THREE.Vector3(i.clientX - SCREEN_WIDTH_HALF, -i.clientY + SCREEN_HEIGHT_HALF, 0), o = 0, e = boids.length; e > o; o++) boid = boids[o], t.z = boid.position.z, boid.repulse(t)
}

function animate() {
    requestAnimationFrame(animate), render()
}

function render() {
    for (var i = 0, t = birds.length; t > i; i++) boid = boids[i], boid.run(boids), bird = birds[i], bird.position.copy(boids[i].position), color = bird.material.color, color.r = color.g = color.b = 13369344, bird.rotation.y = Math.atan2(-boid.velocity.z, boid.velocity.x), bird.rotation.z = Math.asin(boid.velocity.y / boid.velocity.length()), bird.phase = (bird.phase + (Math.max(0, bird.rotation.z) + .1)) % 62.83, bird.geometry.vertices[5].y = bird.geometry.vertices[4].y = 5 * Math.sin(bird.phase);
    renderer.render(scene, camera)
}
var Boid = function() {
        var i, t, o = new THREE.Vector3,
            e = 500,
            n = 500,
            s = 200,
            r = 100,
            a = 4,
            d = .1,
            c = !1;
        this.position = new THREE.Vector3, this.velocity = new THREE.Vector3, i = new THREE.Vector3, this.setGoal = function(i) {
            t = i
        }, this.setAvoidWalls = function(i) {
            c = i
        }, this.setWorldSize = function(i, t, o) {
            e = i, n = t, s = o
        }, this.run = function(t) {
            c && (o.set(-e, this.position.y, this.position.z), o = this.avoid(o), o.multiplyScalar(5), i.add(o), o.set(e, this.position.y, this.position.z), o = this.avoid(o), o.multiplyScalar(5), i.add(o), o.set(this.position.x, -n, this.position.z), o = this.avoid(o), o.multiplyScalar(5), i.add(o), o.set(this.position.x, n, this.position.z), o = this.avoid(o), o.multiplyScalar(5), i.add(o), o.set(this.position.x, this.position.y, -s), o = this.avoid(o), o.multiplyScalar(5), i.add(o), o.set(this.position.x, this.position.y, s), o = this.avoid(o), o.multiplyScalar(5), i.add(o)), Math.random() > .5 && this.flock(t), this.move()
        }, this.flock = function(o) {
            t && i.add(this.reach(t, .005)), i.add(this.alignment(o)), i.add(this.cohesion(o)), i.add(this.separation(o))
        }, this.move = function() {
            this.velocity.add(i);
            var t = this.velocity.length();
            t > a && this.velocity.divideScalar(t / a), this.position.add(this.velocity), i.set(0, 0, 0)
        }, this.checkBounds = function() {
            this.position.x > e && (this.position.x = -e), this.position.x < -e && (this.position.x = e), this.position.y > n && (this.position.y = -n), this.position.y < -n && (this.position.y = n), this.position.z > s && (this.position.z = -s), this.position.z < -s && (this.position.z = s)
        }, this.avoid = function(i) {
            var t = new THREE.Vector3;
            return t.copy(this.position), t.sub(i), t.multiplyScalar(1 / this.position.distanceToSquared(i)), t
        }, this.repulse = function(t) {
            var o = this.position.distanceTo(t);
            if (150 > o) {
                var e = new THREE.Vector3;
                e.subVectors(this.position, t), e.multiplyScalar(.5 / o), i.add(e)
            }
        }, this.reach = function(i, t) {
            var o = new THREE.Vector3;
            return o.subVectors(i, this.position), o.multiplyScalar(t), o
        }, this.alignment = function(i) {
            for (var t, o = new THREE.Vector3, e = 0, n = 0, s = i.length; s > n; n++) Math.random() > .6 || (t = i[n], distance = t.position.distanceTo(this.position), distance > 0 && distance <= r && (o.add(t.velocity), e++));
            if (e > 0) {
                o.divideScalar(e);
                var a = o.length();
                a > d && o.divideScalar(a / d)
            }
            return o
        }, this.cohesion = function(i) {
            for (var t, o, e = new THREE.Vector3, n = new THREE.Vector3, s = 0, a = 0, c = i.length; c > a; a++) Math.random() > .6 || (t = i[a], o = t.position.distanceTo(this.position), o > 0 && r >= o && (e.add(t.position), s++));
            s > 0 && e.divideScalar(s), n.subVectors(e, this.position);
            var h = n.length();
            return h > d && n.divideScalar(h / d), n
        }, this.separation = function(i) {
            for (var t, o, e = new THREE.Vector3, n = new THREE.Vector3, s = 0, a = i.length; a > s; s++) Math.random() > .6 || (t = i[s], o = t.position.distanceTo(this.position), o > 0 && r >= o && (n.subVectors(this.position, t.position), n.normalize(), n.divideScalar(o), e.add(n)));
            return e
        }
    },
    SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    SCREEN_WIDTH_HALF = SCREEN_WIDTH / 2,
    SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2,
    camera, scene, renderer, birds, bird, boid, boids, stats;
init(), animate();

非常感谢您对此提供的任何帮助。

Answer 1

是的，我终于明白了。所以在 Canvas 位于结束正文标签上方的底部之前。我知道它必须与我现有的 javascript 相关。

以前是这样的....

container = document.getElementById("canvas-div"),
document.body.appendChild(container), 
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1e4), 
camera.position.z = 450, scene = new THREE.Scene, birds = [], boids = [];
  for (var i = 0; 30 > i; i++) boid = boids[i] = new Boid,
    boid.position.x = 400 * Math.random() - 200, 
    boid.position.y = 400 * Math.random() - 200, 
    boid.position.z = 400 * Math.random() - 200,    
    boid.velocity.x = 2 * Math.random() - 1, 
    boid.velocity.y = 2 * Math.random() - 1, 
    boid.velocity.z = 2 * Math.random() - 1, 
    boid.setAvoidWalls(!0), 
    boid.setWorldSize(500, 500, 400), 
    bird = birds[i] = new THREE.Mesh(new Bird, new THREE.MeshBasicMaterial({
      color: 16777215 * Math.random(),
      side: THREE.DoubleSide
    })), 
    bird.phase = Math.floor(62.83 * Math.random()), scene.add(bird);
    renderer = new THREE.CanvasRenderer({
        alpha: !0
    }), 
    renderer.setClearColor(16777215, 0),   
    renderer.setSize(container.offsetWidth, container.offsetHeight), 
    container.appendChild(renderer.domElement),
    window.addEventListener("resize", onWindowResize, !1)
}

问题出在 document.body.appendChild(container) 上，所以我把它去掉了，我现在把它放在那里了......

container = document.getElementById("canvas-div"), 
    //document.body.appendChild(container),
    renderer = new THREE.CanvasRenderer({
      canvas: my_canvas,
    alpha: !0
  }),
    renderer.setClearColor(16777215, 0), 
    renderer.setSize(container.offsetWidth, container.offsetHeight), 
    container.appendChild(renderer.domElement), 
    window.addEventListener("resize", onWindowResize, !1)
    camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1e4), 
    camera.position.z = 450, scene = new THREE.Scene, birds = [], boids = [];
    for (var i = 0; 30 > i; i++) boid = boids[i] = new Boid, boid.position.x = 400 * Math.random() - 200, boid.position.y = 400 * Math.random() - 200, boid.position.z = 400 * Math.random() - 200, boid.velocity.x = 2 * Math.random() - 1, boid.velocity.y = 2 * Math.random() - 1, boid.velocity.z = 2 * Math.random() - 1, boid.setAvoidWalls(!0), boid.setWorldSize(500, 500, 400), bird = birds[i] = new THREE.Mesh(new Bird, new THREE.MeshBasicMaterial({
      color: 16777215 * Math.random(),
      side: THREE.DoubleSide
    })), 
    bird.phase = Math.floor(62.83 * Math.random()), scene.add(bird); 
}