Question

我正在做我的网络投资组合，这让我学习了三个.js。

我想将我的WebGL动画作为我网站的背景，但我有一些问题。

现在，这是我的代码：

HTML：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="page.js"></script>
</head>
<body onmousemove="accelerateTime(event);">
  <svg height="400" width="450">
  <text x="0" y="15" fill="red">Mehdi</text>
  </svg>
   <script src="three.js-master/three.js-master/build/three.js"></script>
   <script src="troisjihaisse.js"></script>
</body>
</html>

Javascript：

var camera;
var scene;
var renderer;
var cubeMesh;

var clock;
var deltaTime;

var particleSystem;

var vitesse = 100;

var opacity = 0;

init();
animate();

function init() {

    clock = new THREE.Clock(true);

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = -50;

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(1, -1, 1).normalize();
    scene.add(light);

    var geometry = new THREE.CubeGeometry( 100, 100, 100);  
    var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

    cubeMesh = new THREE.Mesh(geometry, material);
    cubeMesh.position.z = -30;
//    scene.add( cubeMesh );

    particleSystem = createParticleSystem();
    scene.add(particleSystem);

    renderer = new THREE.WebGLRenderer({alpha: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x1055DD, opacity);
    document.body.appendChild( renderer.domElement);

    window.addEventListener('resize', onWindowResize, false);

    render();
}

function animate() {
    deltaTime = clock.getDelta();

    cubeMesh.translate.x += 10 * deltaTime;
    cubeMesh.translate.y += 10000 * deltaTime;

    animateParticles();

    render();
    requestAnimationFrame(animate);
}


function render() {
    renderer.render(scene, camera);
}


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

function createParticleSystem() {
    var particleCount = 5000,
        particles = new THREE.Geometry();

    for (var p = 0; p < particleCount; p++) {
        var x = Math.random() * 800 - 50,
            y = Math.random() * 800 - 50,
            z = Math.random() * 800 - 650,
            particle = new THREE.Vector3(x, y, z);
        particles.vertices.push(particle);
    }

    var particleMaterial = new THREE.PointsMaterial(
            {color: 0xffffff, 
             size: 1,
             blending: THREE.AdditiveBlending,
             transparent: true,
            });

    particleSystem = new THREE.Points(particles, particleMaterial);

    return particleSystem;  
}

function animateParticles() {
    var vertices = particleSystem.geometry.vertices;
    for(var i = 0; i < vertices.length; i++) {
        var vertice = vertices[i];
        if (vertice.z > 0) {
            vertice.z = Math.random() * 400 - 800;

            vertice.y = Math.random() * 400 - 200;
            vertice.x = Math.random() * 800 - 400;
        }else if(vertice.z < -700){
            vertice.z = Math.random() * 1;

            vertice.y = Math.random() * 400 - 200;
            vertice.x = Math.random() * 800 - 400;
        }
        vertice.z = vertice.z + (vitesse * deltaTime);
    }
    particleSystem.geometry.verticesNeedUpdate = true;

    particleSystem.translateZ -= 100 * deltaTime;

}


function accelerateTime(event){
    var centerX = window.innerWidth/2,
        centerY = window.innerHeight/2,
        maxX = window.innerWidth,
        maxY = window.innerHeight,
        cursorX = event.clientX,
        cursorY = event.clientY;

    var distance = Math.floor(Math.sqrt(Math.pow((cursorX - centerX),2) + Math.pow((cursorY - centerY),2)));
    var distanceMax = Math.floor(Math.sqrt(Math.pow((maxX - centerX),2) + Math.pow((maxY - centerY),2)));

    var pourcentage = (100 * distance)/distanceMax;
    var vitesseR = (350 * pourcentage) / 100;
    vitesse = vitesseR;
    opacity = distance / distanceMax;
}

CSS：

*
{
    margin:0;
    padding:0;
    overflow:hidden;
}

body
{
    background-color:#1A8FCF;
    margin:0px;
    overflow:hidden;
    background-image:-webkit-radial-gradient(center, ellipse cover,#1055DD 0%,#0020FF 85%);
}

#bod
{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

#canvas
{
    width:100%;
    height:100%;
    position:relative;
    top:0;
    left:0;
    z-index:-9999;
}

#load
{
    background-color:white;
    width:100%;
    height:100%;
    position:absolute;
    top:0%;
    left:0%;
    z-index:999;
}

#load2
{
    background-color:antiquewhite;
    width:50%;
    height:100%;
    position:absolute;
    top:0%;
    left:-55%;
    z-index:555;
    opacity:0;
}

#load img
{
    position:relative;
    width:50px;
    height:50px;
    top:250px;
    margin-left:auto;
    margin-right:auto;
}

nav
{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:75px;
    padding-top:25px;
    background-color:rgba(155,155,155,0.2);
}

nav a
{
    position:relative;
    float:left;
    top:10px;
    left:25px;
    text-decoration:none;
    font-size:22px;
}

nav ul
{
    position:relative;
    float:right;
    top:10px;
    right:25px;
    list-style:none;
    margin-right:20px;
}

nav ul li
{
    float:right;
    margin-right:30px;
    font-size:22px;
}

nav ul a
{
    color:black;
    margin:0;
    padding:0;
}

#home
{
    position:relative;
    top:0px;
    left:0px;
    margin-top:100px;
    background-color:rgba(155,155,155,0.2);
}

body
{
}

我想要做的是将我的动画作为背景，所以我可以将div放在没有背景颜色的上方，这样我们仍然可以看到明星的来临。我不知道你是否能理解我想要做的事情（我的英语不是那么好，抱歉）。

如果您需要更多解释来帮助我，请告诉我！谢谢！

将我的three.js动画作为我页面的背景

0 个答案: