Что это за три. js код, который я пытаюсь выучить, пропустив? Он не будет загружаться
Почему он не загружается? Я пытаюсь заставить его работать, и следующий код взят из нескольких онлайн-руководств по созданию эффектов частиц в сцене ТРИ. js. одна из них была на самом деле для туманности с туманом - есть идеи?
<html>
<head>
<meta charset="utf-8" />
<title>Magic Leap MagicScript Test Three JS App</title>
<style>
<script>
<script src="three.min.js"></script>
</script>
</style>
</head>
<body>
<script>
var scene = cloud;
.onload: scene;
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);
camera.position.z = 1;
camera.rotation.x = 1.16;
camera.rotation.y = -0.12;
camera.rotation.z = 0.27;
let ambient = new THREE.AmbientLight(0x555555);
scene.add(ambient);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
scene.fog = new THREE.FogExp2(0x03544e, 0.001);
renderer.setClearColor(scene.fog.color);
document.body.appendChild(renderer.domElement);
render();
}
function render() {
renderer.render(scene,camera);
requestAnimationFrame(render);
}
init();
// create the particle variables
var pMaterial = new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"https://aerotwist.com/static/tutorials/creating-particles-with-three-js/images/particle.png"
),
blending: THREE.AdditiveBlending,
transparent: true
});
// also update the particle system to
// sort the particles which enables
// the behaviour we want
particleSystem.sortParticles = true;
// animation loop
let requestAnimationFrame = TextureEffect
// add some rotation to the system
particleSystem.rotation.y += 0.01;
// draw
draw.scene, draw.camera
// set up the next call
requestAnimFrame(update);
// set up the next call
requestAnimationFrame
requestAnimFrame(update);
}
// create a velocity vector
particle.velocity = new THREE.Vector3(
0, // x
-Math.random(), // y: random vel
0); // z
let loader = new THREE.TextureLoader();
var texture = new THREE.TextureLoader().load( 'https://cdn.glitch.com/a7c7620f-7b2a-4d7f-b174-747be0295e76%2F2230f846-cecf-43df-8279-3d69109148d0.image.png?v=1586154166108' );
// immediately use the texture for material creation
var material = new THREE.MeshBasicMaterial( { map: texture } )
//the image is known as smoke
//texture is loaded
});
cloudGeo = new THREE.PlaneBufferGeometry(500,500);
cloudMaterial = new THREE.MeshLambertMaterial({
map:texture,
transparent: true
});
for(let p=0; p<50; p++) {
let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
cloud.position.set(
Math.random()*800 -400,
500,
Math.random()*500-500
);
cloud.rotation.x = 1.16;
cloud.rotation.y = -0.12;
cloud.rotation.z = Math.random()*2*Math.PI;
cloud.material.opacity = 0.55;
cloudParticles.push(cloud);
scene.add(cloud);
}
let cloudParticles = [];
cloudParticles.push(cloud);
function render() {
cloudParticles.forEach(p => {
p.rotation.z -=0.001;
});
let directionalLight = new THREE.DirectionalLight(0xff8c19);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 1;
camera.rotation.x = 1.16;
camera.rotation.y = -0.12;
camera.rotation.z = 0.27;
let cloudParticles = [];
cloudParticles.push(cloud);
for(let p=0; p<50; p++) {
let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
cloud.position.set(
Math.random()*800 -400,
500,
Math.random()*500-500
);
cloud.rotation.x = 1.16;
cloud.rotation.y = -0.12;
cloud.rotation.z = Math.random()*2*Math.PI;
cloud.material.opacity = 0.55;
cloudParticles.push(cloud);
scene.add(cloud);
}
let cloudParticles = [];
cloudParticles.push(cloud);
function render() {
cloudParticles.forEach(p => {
p.rotation.z -=0.001;
});
let directionalLight = new THREE.DirectionalLight(0xff8c19);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);
let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
orangeLight.position.set(200,300,100);
scene.add(orangeLight);
let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
redLight.position.set(100,300,100);
scene.add(redLight);
let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
blueLight.position.set(300,300,200);
scene.add(blueLight);
const bloomEffect = new POSTPROCESSING.BloomEffect({
blendFunction: POSTPROCESSING.BlendFunction.COLOR_DODGE,
kernelSize: POSTPROCESSING.KernelSize.SMALL,
useLuminanceFilter: true,
luminanceThreshold: 0.3,
luminanceSmoothing: 0.75
});
bloomEffect.blendMode.opacity.value = 1.5;
loader.load("stars.jpg", function(texture){
const textureEffect = new POSTPROCESSING.TextureEffect({
blendFunction: POSTPROCESSING.BlendFunction.COLOR_DODGE,
texture: texture
});
textureEffect.blendMode.opacity.value = 0.2;
window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// animation loop
function update() {
// add some rotation to the system
particleSystem.rotation.y += 0.01;
var pCount = particleCount;
while (pCount--) {
// get the particle
var particle =
particles.vertices[pCount];
// check if we need to reset
if (particle.position.y < -200) {
particle.position.y = 200;
particle.velocity.y = 0;
}
// update the velocity with
// a splat of randomniz
particle.velocity.y -= Math.random() * .1;
// and the position
particle.position.addSelf(
particle.velocity);
}
// flag to the particle system
// that we've changed its vertices.
particleSystem.
geometry.
__dirtyVertices = true;
// draw
draw.scene, draw.camera
// set up the next call
requestAnimFrame(update);
// set up the next call
requestAnimFrame(update);
}
</script>
</body>
<script>
const url = "./style.css";
document.head.innerHTML += `<link type="text/css" rel="stylesheet" href=${url}>`;
</script>
</html>