three.js学习（一）

blender(建模软件，优化的输出，导出到网页)

搭建

• npm install three

three.js地址

• https://gitee.com/mirrors/three.js?_from=gitee_search

three.js搭建项目

import * as THREE from 'three'
//console.log(THREE);


// 了解three基本内容
//创建一个场景
const scene = new THREE.Scene();  
//创建相机
//设置相机视锥体
//fov:摄像机视锥体垂直视野角度。aspect:摄像机视锥体长宽比。near:摄像机视锥体近端面。far:摄像机视锥体远端面
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//设置相机对象位置
camera.position.set(0,0,10);
scene.add(camera)

//添加物体
//创建几何体对象
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00});
//根据几何体材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

//将几何体添加到场景中
scene.add(cube);

//初始化渲染器
const renderer = new THREE.WebGLRenderer();

//设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);

//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

//使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera);

设置时钟

//设置时钟
const clock = new THREE.Clock()
//设置渲染函数
function render(){
    //获取时钟运行的总时常
    let time = clock.getElapsedTime();
    //获取间隔时间
    //let deltaTime = clock.getDelta();
    let t = time %5;
    cube.position.x = t*1;
    
    renderer.render(scene,camera);
    //下一帧渲染的时候调用render函数
    requestAnimationFrame(render);
}
render();

gsap动画

//设置动画
var animate1 = gsap.to(cube.position,
    {   x:5,
        duration:5,
        //重复次数，-1为无限次
        repeat:-1,
        yoyo:true, //往返
        ease:"power1.inOut",
        delay:2,//延迟
        onComplete:()=>{
            console.log('动画完成')
        },
        onStart:()=>{
            console.log('动画开始')
        }
});
gsap.to(cube.rotation,{x:2*Math.PI,duration:5});

window.addEventListener('dblclick',()=>{
    if(animate1.isActive()){
        animate1.pause();
    }else{
        animate1.resume();
    }
    
})

//设置渲染函数
function render(){
    renderer.render(scene,camera);
    //下一帧渲染的时候调用render函数
    requestAnimationFrame(render);
}
render();