python 怎么实现3d 动画_在 vuejs里面如何使用 three.js 实现3d动画？

项目要求实现一种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代码如下(精简版)：

Points

body {

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 文件里面呢？？？？？？？？

如果需要效果源码的请留言，谢谢大牛