I've been attempting to place the Canvas Lines three.js inside another div, but it doesn't seem to be working as expected. Instead, when I try, the JS code places the canvas at the very end of the body. Can anyone tell me why this is happening?
My goal is to have the canvas contained within
<div id="canvas_3d"></div>Here is the HTML:
<section class="lc_hero hero_fulHeight" style="background-image: url('img/hero_top.jpg');">
<div id="canvas_3d"></div>
<div class="container">
<div class="row">
<%# <div class="col-md-1"></div> %>
<div class="col-md-7">
<div class="lc_hero__heading">
<h1 class="head_white"><span>L</span>aboratório de <span>In</span>ovação e <span>C</span>ompetições de <span>E</span>ngenharia</h1>
<p>Projetos que vão além da <span>faculdade!</span></p>
</div>
</div>
</div>
<div class="lc_hero__scroll_down">
<%= svg "scroll_down" %>
</div>
</div>
</section>
Javascript:
var mouseX = 0,
mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
SEPARATION = 200,
AMOUNTX = 10,
AMOUNTY = 10,
camera, scene, renderer;
init();
animate();
function init() {
var container, separation = 100,
amountX = 50,
amountY = 50,
particles, particle;
var container = document.getElementById('canvas_3d');
// container = document.createElement('div');
// container.className = "canvas_3d"
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 100;
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// particles
var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial({
color: 0xffffff,
program: function (context) {
context.beginPath();
context.arc(0, 0, 0.5, 0, PI2, true);
context.fill();
}
});
var points = [];
for (var i = 0; i < 100; i++) {
particle = new THREE.Sprite(material);
particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar(Math.random() * 10 + 450);
particle.scale.x = particle.scale.y = 10;
scene.add(particle);
points.push(particle.position);
}
// lines
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
color: 0xffffff,
opacity: 0.5
}));
scene.add(line);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart(event) {
if (event.touches.length > 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
function onDocumentTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
Any help or insights would be greatly appreciated. Thank you!