初学VUE+ScrollMagic+three爬坑记录

1、通过NPM添加ScrollMagic

npm i ScrollMagic,gsap -S
npm i imports-loader -S

import ScrollMagic from 'scrollmagic';
import {TweenMax} from 'gsap';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

2、通过NPM添加ScrollMagic

npm i three -S
npm i three-obj-mtl-loader -S

import * as three from 'three';
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader';

three.js 基本用法

    //==========================
    //=========three.js=========
    //==========================
    var WIDTH = document.documentElement.clientWidth*0.6;
    var HEIGHT = WIDTH/4*3;
    //设置场景
    var scene = new three.Scene();
    var camera = new three.PerspectiveCamera(75,WIDTH/HEIGHT,0.1,2000);
    camera.position.x=10;
    camera.position.y=10;
    camera.position.z=20;
    camera.lookAt(scene.position);
    var renderer = new three.WebGLRenderer({alpha:false,antialias:true});
    renderer.setSize(WIDTH,HEIGHT);
    document.getElementById("model").appendChild(renderer.domElement);
    //添加灯光
    var ambientLight = new three.AmbientLight(0x404040,1);
    scene.add(ambientLight);
    //添加cube
    var geometry = new three.BoxGeometry(10, 10, 10);
    var material = new three.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new three.Mesh(geometry, material);
    scene.add(cube);

    function animate(){
      requestAnimationFrame(animate);
      renderer.render(scene,camera);
    }
    animate();

ScrollMagic.js让元素在页面中部时固定

    var winHeight = document.documentElement.clientHeight;//获取窗口有效显示高度
    var canvasToTop = document.getElementById('target').offsetTop;//获取元素距离整个页面顶部的偏移量
   var targetHeight = document.getElementById('target').clientHeight;

    //ScrollMagic控制器
    var controller = new ScrollMagic.Controller();
    //ScrollMagic场景
    var SMscene = new ScrollMagic.Scene({
      triggerElement:'#target',
      duration:1000, //固定后滚动的距离
      reverse:true //反复
    })
    .offset(canvasToTop-winHeight/2+targetHeight/2) //偏移使元素在页面中部
    .setPin('#model')
    // .setTween(tween1)
    .addTo(controller);