Question

Всем привет, у меня никак не хочет работать РАБОЧИЙ скрипт 3д снега.

Сдалано всё чётко по инструкции, но результата нет.

Пример работы скрипта: http://imapo.ru/шикарный-3d-снег-на-html5-canvas/

как положено после тега </head> поставил это и залил скрипты с картинкой

 

<script type="text/javascript" src="http://mindman.com.ru/js/ThreeCanvas.js"></script>
<script type="text/javascript" src="http://mindman.com.ru/js/Snow.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var particle;
var camera;
var scene;
var renderer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var particles = [];
    var particleImage = new Image(); //THREE.ImageUtils.loadTexture( "http://mindman.com.ru/img/ParticleSmoke.png" );
particleImage.src = 'http://mindman.com.ru/img/ParticleSmoke.png';

function init() {
  container = document.createElement('div');
  document.body.appendChild(container);
  camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
  camera.position.z = 1000;
  scene = new THREE.Scene();
  scene.add(camera);
  renderer = new THREE.CanvasRenderer();
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  var material = new THREE.ParticleBasicMaterial({
    map: new THREE.Texture(particleImage)
  });

  for (var i = 0; i < 500; i++) {
    particle = new Particle3D(material);
    particle.position.x = Math.random() * 2000 - 1000;
    particle.position.y = Math.random() * 2000 - 1000;
    particle.position.z = Math.random() * 2000 - 1000;
    particle.scale.x = particle.scale.y = 1;
    scene.add(particle);
    particles.push(particle);
  }

  container.appendChild(renderer.domElement);
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('touchstart', onDocumentTouchStart, false);
  document.addEventListener('touchmove', onDocumentTouchMove, false);
  setInterval(loop, 1000 / 60);
}

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 loop() {
  for (var i = 0; i < particles.length; i++) {
    var particle = particles[i];
    particle.updatePhysics();
    with(particle.position) {
      if (y < -1000) y += 2000;
      if (x > 1000) x -= 2000;
      else if (x < -1000) x += 2000;
      if (z > 1000) z -= 2000;
      else if (z < -1000) z += 2000;
    }
  }
  camera.position.x += (mouseX - camera.position.x) * 0.05;
  camera.position.y += (-mouseY - camera.position.y) * 0.05;
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}

window.onload = function () {
  init()
}
</script>     

 

Answer 1

Надо кое-что дописать и кое-что изменить, кусок кода ниже...

function init() {
  container = document.createElement('div');
  container.style.cssText = 'position:fixed; z-index:99999;'; //это дописать
  document.body.insertBefore(container, document.body.firstChild);// здесь изменить
  camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
  camera.position.z = 1000;
  scene = new THREE.Scene();
  scene.add(camera);

Answer 2

Как вариант скрипт можете подобрать на сайте https://yraaa.ru/scripts/novogodnie-skriptyi тот что с примера у вас, почему не работает нужно спрашивать у автора скрипта.