初识three

最新推荐文章于 2023-01-23 21:24:49 发布

一个躺平的小趴菜

最新推荐文章于 2023-01-23 21:24:49 发布

阅读量54

点赞数

分类专栏： three.js 文章标签： huffman tree

本文链接：https://blog.csdn.net/qq_38389828/article/details/127744625

版权

three.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

three.js 的基本应用

安装THREE.js 官网

	npm install three -S
	//方便测试（非必要）
	npm install gsap

导入要使用的插件

	import * as THREE from 'three'
	import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
	import gsap from 'gsap';

使用three.js

	const scene = new THREE.Scene();//创建场景

    const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);// 创建相机

    camera.position.set(0, 0, 5);//设置相机位置

    const boxView = new THREE.BoxGeometry(1, 1, 1);//创建一个正方体
    const mesh = new THREE.MeshBasicMaterial({ color: '#fff000' });//创建一个素材

    const cube = new THREE.Mesh(boxView, mesh);//讲物体和素材放入一个盒子

    scene.add(cube);
    scene.add(camera);
    const renderer = new THREE.WebGL1Renderer({ antialias: true });
    renderer.setSize(innerWidth, innerHeight);
    //添加坐标轴
    scene.add(new THREE.AxesHelper(5))
    document.body.appendChild(renderer.domElement);

    //使用Clock 跟踪时间 解决requestAnimationFrame运行间隔不一样的问题
    // const clock = new THREE.Clock();
    


    //创建轨道控制器  
    const orbit = new OrbitControls(camera, renderer.domElement);
    //设置控制器阻尼
    orbit.enableDamping = true;//类似惯性
    render(scene, camera);



    //使用gsap 设置动画
    gsap.to(cube.position, {
        x: 5, duration: 5, onComplete: () => {
            console.log('动画完成回调')
        },
        repeat:6,//重复次数   -1 就是无限循环
        yoyo:true,//往返操作
        delay:2,//延迟几秒移动
    })//cube x轴 5秒 移动到5
    gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: 'powerl.inOut' })//ease:'powerl.inOut   速度入 匀速 加速度等

    function render() {
        // //两次间隔的时间
        // let deltaTIme =clock.getDelta();
        // //移动
        // cube.position.x +=number * deltaTIme *10;
        // //缩放
        // cube.scale.set(cube.position.x ,cube.position.x ,cube.position.x );
        // //旋转
        // cube.rotation.set(Math.PI/cube.position.x,0,0);
        // if(cube.position.x >= 3){
        //     number = -0.01 ;
        // }
        // if(cube.position.x <=0){
        //     number =  0.01
        // }
        orbit.update();
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    //适应屏幕
    window.addEventListener('resize',()=>{
        camera.aspect = window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();//更新矩阵
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);//更新设备的像素比例（移动端会有区别）
    })
    //双击全屏
    window.addEventListener('dblclick',()=>{
        if(!document.fullscreenElement){
            renderer.domElement.requestFullscreen();//请求全屏
        }else{
            document.exitFullscreen();
        }
        
    })

})()