项目要求实现一种3d效果,网上找到了demo,但是是估计是 es5 实现的,在本地可以看到效果,但是现在需要放到 vue.js 里面去,整了一下午,各种错误。
我把three.js直接拷贝到项目里面,然后按如下方式引入:
require('../../assets/home-animation/three.min.js')
import THREE_ from '../../assets/home-animation/three.min.js'
或者 npm install three --save
都试过了,全部报错,报错方式如下:
到底该如何把如下的 js 代码 “翻译” 到 vue 文件里面呢????????
原版js代码如下(精简版):
Pointsbody {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
星云控制
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var mesh6;
var particles2, geometry2, material2, i2, sprite;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 15000);
camera.position.z = 9000;
scene = new THREE.Scene();
var material = new THREE.LineBasicMaterial({
color: 0xffffff,
linewidth: 1000
});
var x = 6000;
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-x, 0, 0),
new THREE.Vector3(0, Math.sqrt(3 * x * x), 0),
new THREE.Vector3(x, 0, 0),
new THREE.Vector3(-x, 0, 0)
);
var loader = new THREE.JSONLoader();
loader.load('Sphere.json', handle_load6);
function handle_load6(geometry, material) {
var colors = [];
for (var i = 0; i < geometry.vertices.length; i++) {
colors[i] = new THREE.Color(0x6870F5);
var hsl = colors[i].getHSL();
colors[i].setHSL(hsl.h + 0.05, Math.random() * 0.4 + 0.5, Math.random() * 0.3 + 0.5);
}
geometry.colors = colors;
var material = new THREE.PointsMaterial({
size: 50,
opacity: 0.5,
map: THREE.ImageUtils.loadTexture('orb.png'),
transparent: true,
blending: THREE.AdditiveBlending,
depthWrite: false,
vertexColors: THREE.VertexColors
});
mesh6 = new THREE.Points(geometry, material);
}
{
geometry2 = new THREE.Geometry();
sprite = new THREE.TextureLoader().load("orb.png");
for (i2 = 0; i2 < 400; i2++) {
var vertex = new THREE.Vector3();
vertex.x = 12000 * Math.random() - 6000;
vertex.y = 12000 * Math.random() - 6000;
vertex.z = 12000 * Math.random() - 6000;
geometry2.vertices.push(vertex);
}
material2 = new THREE.PointsMaterial({
size: 50,
opacity: 0.8,
sizeAttenuation: true,
map: sprite,
depthWrite: false,
transparent: true
});
material2.color.setHSL(1.0, 1, 1);
particles2 = new THREE.Points(geometry2, material2);
scene.add(particles2);
}
renderer = new THREE.WebGLRenderer({
antialias: 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;
mouseY = 2 * event.clientY - 2 * windowHalfY;
}
var isMeTweening = false;
var meshobj = null;
function clickMeOk() {
if (null == meshobj) {
//解决load立即加载动画,改为点击按钮才加载动画
meshobj = 'ok';
scene.add(mesh6);//按钮控制,默认未加载,点击按钮后才执行(这句确保load完成后时候显示鲜果)
//初始化,未了避免加载就显示相应动画效果
mesh6.scale.x = 0.0010000000000000009;
mesh6.scale.y = 0.0010000000000000009;
mesh6.scale.z = 0.0010000000000000009;
mesh6.material.opacity = 0;
}
if (isMeTweening) return;
isMeTweening = true;
console.log('qqqq', mesh6.scale);//1 - 0.0010000000000000009
var scale = mesh6.scale.x < 1 ? 1 : 0.0010000000000000009;
console.log('eeee' + scale);//0.001 - 1
new TWEEN.Tween(mesh6.scale).to({ x: scale, y: scale, z: scale }, 2000).easing(TWEEN.Easing.Quartic.InOut).onComplete(function () {
isMeTweening = false;
}).start();
var opacity = mesh6.material.opacity > 0 ? 0 : 0.5;
new TWEEN.Tween(mesh6.material).to({ opacity: opacity }, 1800).easing(TWEEN.Easing.Quartic.InOut).start();
}
window.onload = function () {
document.getElementById('click_btn').addEventListener('click', clickMeOk)
}
function animate() {
requestAnimationFrame(animate);
render();
TWEEN.update();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * 0.08;
camera.position.y += (- mouseY - camera.position.y) * 0.08;
camera.lookAt(scene.position);
particles2.rotation.y += 0.0009;
renderer.render(scene, camera);
}
到底该如何把如上的 js 代码 “翻译” 到 vue 文件里面呢????????
如果需要效果源码的请留言,谢谢大牛