Site updated: 2022-07-10 10:58:06
This commit is contained in:
llbzow
114
lib/three/src/canvas_lines.js
Normal file
114
lib/three/src/canvas_lines.js
Normal file
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* Created by Tang on 2017/4/15.
|
||||
*/
|
||||
$(function () {
|
||||
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;
|
||||
container = document.createElement('div');
|
||||
// 设置css
|
||||
container.style.position = "fixed";
|
||||
container.style.top = "0px";
|
||||
container.style.left = "0px";
|
||||
container.style.zIndex = "-1";
|
||||
container.style.opacity = "0.5";
|
||||
|
||||
document.body.appendChild(container);
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
|
||||
camera.position.z = 100;
|
||||
scene = new THREE.Scene();
|
||||
renderer = new THREE.CanvasRenderer({
|
||||
alpha: true
|
||||
});
|
||||
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: 10263708,
|
||||
program: function (context) {
|
||||
context.beginPath();
|
||||
context.arc(0, 0, 0.5, 0, PI2, true);
|
||||
context.fill();
|
||||
}
|
||||
});
|
||||
var geometry = new THREE.Geometry();
|
||||
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);
|
||||
geometry.vertices.push(particle.position);
|
||||
}
|
||||
// lines
|
||||
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
|
||||
color: 10263708,
|
||||
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);
|
||||
}
|
||||
})
|
||||
124
lib/three/src/canvas_sphere.js
Normal file
124
lib/three/src/canvas_sphere.js
Normal file
@@ -0,0 +1,124 @@
|
||||
/**
|
||||
* Created by Tang on 2017/4/15.
|
||||
*/
|
||||
$(function () {
|
||||
var SCREEN_WIDTH = window.innerWidth,
|
||||
SCREEN_HEIGHT = window.innerHeight,
|
||||
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;
|
||||
container = document.createElement('div');
|
||||
// 设置css
|
||||
container.style.position = "fixed";
|
||||
container.style.top = "0px";
|
||||
container.style.left = "0px";
|
||||
container.style.zIndex = "-1";
|
||||
container.style.opacity = "0.5";
|
||||
|
||||
document.body.appendChild(container);
|
||||
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
|
||||
camera.position.z = 1000;
|
||||
scene = new THREE.Scene();
|
||||
renderer = new THREE.CanvasRenderer({
|
||||
alpha: true
|
||||
});
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
||||
container.appendChild(renderer.domElement);
|
||||
// particles
|
||||
var PI2 = Math.PI * 2;
|
||||
var material = new THREE.SpriteCanvasMaterial({
|
||||
color: 10263708,
|
||||
program: function (context) {
|
||||
context.beginPath();
|
||||
context.arc(0, 0, 0.5, 0, PI2, true);
|
||||
context.fill();
|
||||
}
|
||||
});
|
||||
for (var i = 0; i < 1000; 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.multiplyScalar(2);
|
||||
scene.add(particle);
|
||||
}
|
||||
// lines
|
||||
for (var i = 0; i < 300; i++) {
|
||||
var geometry = new THREE.Geometry();
|
||||
var vertex = new THREE.Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
|
||||
vertex.normalize();
|
||||
vertex.multiplyScalar(450);
|
||||
geometry.vertices.push(vertex);
|
||||
var vertex2 = vertex.clone();
|
||||
vertex2.multiplyScalar(Math.random() * 0.3 + 1);
|
||||
geometry.vertices.push(vertex2);
|
||||
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
|
||||
color: 10263708,
|
||||
opacity: Math.random()
|
||||
}));
|
||||
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);
|
||||
}
|
||||
})
|
||||
91
lib/three/src/three-waves.js
Normal file
91
lib/three/src/three-waves.js
Normal file
@@ -0,0 +1,91 @@
|
||||
$(function () {
|
||||
var SEPARATION = 100,
|
||||
AMOUNTX = 50,
|
||||
AMOUNTY = 50;
|
||||
var container;
|
||||
var camera, scene, renderer;
|
||||
var particles, particle, count = 0;
|
||||
var mouseX = 0,
|
||||
mouseY = 0;
|
||||
var windowHalfX = window.innerWidth / 2;
|
||||
var windowHalfY = window.innerHeight / 2;
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
container = document.createElement("div");
|
||||
container.style.position = "fixed";
|
||||
container.style.top = "0px";
|
||||
container.style.left = "0px";
|
||||
container.style.zIndex = "-1";
|
||||
container.style.opacity = "0.5";
|
||||
document.body.appendChild(container);
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
|
||||
camera.position.z = 1000;
|
||||
scene = new THREE.Scene();
|
||||
particles = new Array();
|
||||
var PI2 = Math.PI * 2;
|
||||
var material = new THREE.SpriteCanvasMaterial({
|
||||
color: 10263708,
|
||||
program: function (context) {
|
||||
context.beginPath();
|
||||
context.arc(0, 0, 0.5, 0, PI2, true);
|
||||
context.fill()
|
||||
}
|
||||
});
|
||||
var i = 0;
|
||||
for (var ix = 0; ix < AMOUNTX; ix++) {
|
||||
for (var iy = 0; iy < AMOUNTY; iy++) {
|
||||
particle = particles[i++] = new THREE.Sprite(material);
|
||||
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
|
||||
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
|
||||
scene.add(particle)
|
||||
}
|
||||
}
|
||||
renderer = new THREE.CanvasRenderer({
|
||||
alpha: true
|
||||
});
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
container.appendChild(renderer.domElement);
|
||||
document.addEventListener("mousemove", onDocumentMouseMove, 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
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
render()
|
||||
}
|
||||
|
||||
function render() {
|
||||
camera.position.x += (mouseX - camera.position.x) * 0.05;
|
||||
camera.position.y = 362.05;
|
||||
camera.lookAt({
|
||||
x: scene.position.x,
|
||||
y: window.innerHeight / 3,
|
||||
z: scene.position.z
|
||||
});
|
||||
var i = 0;
|
||||
for (var ix = 0; ix < AMOUNTX; ix++) {
|
||||
for (var iy = 0; iy < AMOUNTY; iy++) {
|
||||
particle = particles[i++];
|
||||
particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
|
||||
particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4
|
||||
}
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
count += 0.1
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user