在 vuejs里面如何使用 three.js 實現(xiàn)3d動畫？

項目要求實現(xiàn)一種3d效果，網(wǎng)上找到了demo，但是是估計是 es5 實現(xiàn)的，在本地可以看到效果，但是現(xiàn)在需要放到 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代碼如下(精簡版)：

<!DOCTYPE html>
<html>

<head>
    <title>Points</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <p style="position: absolute;left: 0;right: 0;bottom: 0;text-align: center;">
        <button type="button" id="click_btn">星云控制</button>
    </p>
    <script src="three.min.js"></script>
    <script src="tween.min.js"></script>
    <script>
        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);//按鈕控制，默認(rèn)未加載，點擊按鈕后才執(zhí)行（這句確保load完成后時候顯示鮮果）                
                //初始化，未了避免加載就顯示相應(yīng)動畫效果
                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);
        }
    </script>
</body>

</html>

到底該如何把如上的 js 代碼 “翻譯” 到 vue 文件里面呢？？？？？？？？

如果需要效果源碼的請留言，謝謝大牛

回答

編輯回答

孤客

1.大兄弟，你的three.js是什么版本？
2.安裝是npm install three還是 npm install three-js?
我安裝是第二個，

 import * as THREE from "three-js";

控制臺一直提示

a.PerspectiveCamera is not a constructor

2017年6月23日 21:16

編輯回答

絯孑氣

我遇到其他類似的情況，模塊導(dǎo)入出錯，要用模塊版的 three

2017年8月11日 12:09

編輯回答

吢丕

問題找到了，直接用 npm 安裝這兩個包，然后導(dǎo)入，方式如下：

    import * as THREE from "three";
    import * as TWEEN from "tween";

2017年7月15日 22:33

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

在 vuejs里面如何使用 three.js 實現(xiàn)3d動畫？

相關(guān)信息

北大青鳥昌平校區(qū)

達(dá)內(nèi)教育

北大課工場

博為峰

北大青鳥android課程

北大青鳥java軟件工程師

北大青鳥ACCP初中課程

北大青鳥大數(shù)據(jù)課程

劉國斌Java講師

王克晶Java講師

張老師web前端講師

劉蒼松Java教研總監(jiān)

在 vuejs里面如何使用 three.js 實現(xiàn)3d動畫？

相關(guān)信息

劉國斌Java講師

王克晶Java講師

張老師web前端講師

劉蒼松Java教研總監(jiān)

在 vuejs里面如何使用 three.js 實現(xiàn)3d動畫？