//npm 安装 npm install three --save-dev
<template>
<div id="container" ></div>
</template>
<script>
import * as THREE from 'three';
const SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
r = 450;
let container
let mouseY = 0,
windowHalfY = window.innerHeight / 2,
camera, scene, renderer;
export default {
name: 'parkScreen',
data() {
return {}
},
mounted() {
this.init();
this.animate();
},
methods: {
init() {
let that=this
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );//添加到body上
// camera = new THREE.PerspectiveCamera( 80, container.clientWidth/container.clientHeight, 1, 3000 );//添加到div上
camera.position.z = 1000;
scene = new THREE.Scene();
const parameters = [[ 0.25, 0xff7700, 1 ], [ 0.5, 0xff9900, 1 ], [ 0.75, 0xffaa00, 0.75 ], [ 1, 0xffaa00, 0.5 ], [ 1.25, 0x000833, 0.8 ],
[ 3.0, 0xaaaaaa, 0.75 ], [ 3.5, 0xffffff, 0.5 ], [ 4.5, 0xffffff, 0.25 ], [ 5.5, 0xffffff, 0.125 ]];
const geometry = that.createGeometry();
for ( let i = 0; i < parameters.length; ++ i ) {
const p = parameters[ i ];
const material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ] } );
const line = new THREE.LineSegments( geometry, material );
line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
line.userData.originalScale = p[ 0 ];
line.rotation.y = Math.random() * Math.PI;
line.updateMatrix();
scene.add( line );
}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );//添加body上
// renderer.setClearColor('#07209b;',1.0);
// renderer.setSize( container.clientWidth,container.clientHeight);//添加div上
// document.body.appendChild( renderer.domElement );//添加到body上
// document.body.style.touchAction = 'none';//添加到body上
// document.body.addEventListener( 'pointermove', this.onPointerMove );//添加到body上
// document.body.addEventListener( 'resize', this.onWindowResize );//添加到body上
container.appendChild( renderer.domElement );//添加到div上
container.style.touchAction = 'none';//添加到div上
setInterval( function () {
const geometry = that.createGeometry();
scene.traverse( function ( object ) {
if ( object.isLine ) {
object.geometry.dispose();
object.geometry = geometry;
}
} );
}, 3000 );
},
createGeometry() {
const geometry = new THREE.BufferGeometry();
const vertices = [];
const vertex = new THREE.Vector3();
for ( let i = 0; i < 500; i ++ ) {
vertex.x = Math.random() * 2 - 1;
vertex.y = Math.random() * 2 - 1;
vertex.z = Math.random() * 2 - 1;
vertex.normalize();
vertex.multiplyScalar( r );
vertices.push( vertex.x, vertex.y, vertex.z );
vertex.multiplyScalar( Math.random() * 0.03 + 1 );
vertices.push( vertex.x, vertex.y, vertex.z );
}
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
return geometry;
},
animate() {
requestAnimationFrame( this.animate );
this.render();
},
render() {
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
const time = Date.now() * 0.0001;
for ( let i = 0; i < scene.children.length; i ++ ) {
const object = scene.children[ i ];
if ( object.isLine ) {
object.rotation.y = time * ( i < 4 ? ( i + 1 ) : - ( i + 1 ) );
if ( i < 5 ) {
const scale = object.userData.originalScale * ( i / 2 + 1 ) * ( 1 + 0.5 * Math.sin( 5* time ) );
object.scale.x = object.scale.y = object.scale.z = scale;
}
}
}
},
}
}
three.js 波浪图
于 2022-05-25 10:18:01 首次发布