threejs实现光环扫描全图效果

最新推荐文章于 2024-06-27 12:44:41 发布

原创最新推荐文章于 2024-06-27 12:44:41 发布 · 834 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

本文介绍如何利用threejs库实现一种独特的光环扫描全图效果，通过展示核心代码帮助读者理解并快速应用到自己的项目中。

threejs光环扫描全图

废话不多说；直接上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn{position: absolute;width: 100px;height:50px;}
        .sign{width:100px;height:100px;background:#fff;opacity: 0.1;}
    </style>
</head>
<body>
    <div id="three-box"></div>
    <button class="btn">点我</button>
    <div id="sign" style="position: absolute;">
        <div class="sign">
            <div class="name">我是标签</div>
        </div>
        <!-- <img src="./img/mark.png" class="mark" alt=""> -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/three@0.122.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script type="text/javascript" src="./dat/dat.gui-master/build/dat.gui.js"></script>
</body>
</html>
<script>
    let scene=new THREE.Scene();
    let camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerWidth,0.1,1000);
    camera.position.set(0,20,5);
    var gui = new dat.GUI();

    scene.add(camera)
    //添加坐标轴辅助线
    const axesHelper = new THREE.AxesHelper( 15 );
    scene.add( axesHelper );
    let renderer=new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.shadowMap.enabled=true
    document.body.appendChild(renderer.domElement);
    let controls=new THREE.OrbitControls(camera,renderer.domElement)
    //设置控制器阻尼感；增加真实效果
    controls.enableDamping =true

    let light=new THREE.DirectionalLight(0xffffff,1);
    light.position.set(0,20,0);
    light.intensity=0.1
    scene.add(light)

    const alight = new THREE.AmbientLight( 0x404040 ); // soft white light
    scene.add( alight );


    // 添加一个物体
    const geometry = new THREE.BoxGeometry( 100, 100, 2 );
    const material = new THREE.MeshStandardMaterial( {
        color: 0xffffff,
        // opacity:0.5,
        // transparent:true
        } );
    // const dlight = new THREE.PointLight( 0x00ff00, 1, 100 );
    // light.position.set( 50, 50, 50 );
    const cube = new THREE.Mesh( geometry, material );
    //接受阴影
    cube.receiveShadow=true
    cube.rotation.set(-Math.PI/2,0,0)

    scene.add( cube );

    const geometry4 = new THREE.BoxGeometry( 5, 10, 5 );
    const material4 = new THREE.MeshStandardMaterial( {
        color: 0xffffff,
        // opacity:0.5,
        // transparent:true
        } );
    // const dlight = new THREE.PointLight( 0x00ff00, 1, 100 );
    // light.position.set( 50, 50, 50 );
    const cube1 = new THREE.Mesh( geometry4, material4 );
    //接受阴影
    cube1.receiveShadow=true
    cube1.rotation.set(-Math.PI/2,0,0)
        cube1.position.set(10,3,-10)
    scene.add( cube1 );

    //添加一个圆环
    const geometry1 = new THREE.TorusGeometry( 0, 0.2, 10, 50 );
    const material1 = new THREE.MeshBasicMaterial( { 
        color: 0xff0000,
        opacity:0,
        transparent:true
         } );
    const torus = new THREE.Mesh( geometry1, material1 );
    torus.position.set(0,50,1)
    torus.rotation.x=-Math.PI/2
    const spotLight = new THREE.SpotLight( 
        0xff0000
        // intensity :10
     );
     spotLight.castShadow=true
    torus.add(spotLight)
    gsap.to(torus.position, {
        duration: 2.5,
        ease: "power2.out",
        // scale:3,

        y:0,

        repeat:-1,
        yoyo:true,
        // onComplete() {
        //     console.log("动画完成拉")
        // },
        // onStart(){
        //     console.log("动画开始拉")
        // }
    });
    scene.add( torus );

    const geometry2 = new THREE.SphereGeometry( 0, 32, 16 );
    const material2 = new THREE.MeshBasicMaterial( { 
        color: 0x000000,
        opacity:0,
        transparent:true
         } );
    const sphere = new THREE.Mesh( geometry2, material2 );
    sphere.position.set(0,50,0)
    //投射阴影
    sphere.castShadow=true
    gsap.to(sphere.position, {
        duration: 2.5,
        ease: "power2.out",
        scale:3,
        repeat:-1,
        yoyo:true,

        y:0,

    });
    scene.add( sphere );

    //画面变化更新渲染器大小
    window.addEventListener("resize", () => {
        //更新摄像头
        camera.aspect = window.innerWidth / window.innerHeight
        //更新摄像头的投影矩阵
        camera.updateProjectionMatrix()
        //更新渲染器
        renderer.setSize(window.innerWidth, window.innerHeight);
        //设置渲染器的像素比
        renderer.setPixelRatio(window.devicePixelRatio)
    })


    
    function render(){

        controls.update()
        renderer.render(scene,camera);
        requestAnimationFrame(render)
    }
    render()
</script>

代码，cv以后直接运行