three打造一个三维螺旋状电影3d鼠标滚动移动效果代码-html代码-BFW代码库

three打造一个三维螺旋状电影3d鼠标滚动移动效果代码

代码语言：html

所属分类：三维

代码描述：three打造一个三维螺旋状电影3d鼠标滚动移动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    
</style>

</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<!-- partial -->
  <script >
      
      const infinite = false;
const waveLength = 1.1;
const slideCount = 8;
const precision = 25;
const raduis = 0.7;
const filmWidth = 0.3;
const filmColor = '#876'
const three = configureThree();
const customDepthMaterial = createDepthMaterial();

const uniforms = {
    rotation: { value: 0 },
};

const film = new THREE.Object3D();
three.scene.add(film);

for (let i = 0; i < slideCount*3; i++) 
    addSlide(i, `//repo.bfw.wiki/bfwrepo/image/5fe1bc8e0ed82.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90`)

let rotation = 1.2;

requestAnimationFrame(function render(t) {
    moveFilm(t);
    three.render();
    requestAnimationFrame(render);
});

// constols

let touchStartY;
let rotationAtStart;

addEventListener('touchstart', (e) => {
    touchStartY = e.touches[0].clientY;
    rotationAtStart = rotation;
});

addEventListener('touchmove', (e) => {
    rotation = rotationAtStart + (e.touches[0].clientY - touchStartY)/50;
});

addEventListener('wheel', (e) => {
    rotation -= e.deltaY/400;
});

//

function configureThree(){
    
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
    renderer.localClippingEnabled = true;
    document.body.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight('white', 0.3));
    scene.add(createDirectionalLight());

    const camera = new THREE.OrthographicCamera();
    camera.position.set(0,0,1.5);
    camera.lookAt(scene.position);
    
    return { scene, render };

    function render() {
        if (renderer.width !== innerWidth || 
            renderer.height !== innerHeight ){

            renderer.setSize(innerWidth, innerHeight);
            camera.left = -innerWidth/innerHeight
            camera.right = -camera.left
            camera.updateProjectionMatrix();
        }

        renderer.render(scene, camera);
    }
}

function createDirectionalLight(){
    const dirLight = new THREE.DirectionalLight('white', 0.7);
    dirLight.castShadow = true;
    dirLight.position.set(-0.1,0.1,1);
    dirLight.shadow.mapSize.width = 1024;  
    dirLight.shadow.mapSize.height = 2048; 
    dirLight.shadow.camera.left = -1;
    dirLight.shadow.camera.right = 1;
    dirLight.shadow.camera.top = 2;
    dirLight.shadow.camera.bottom = -2;
    dirLight.shadow.camera.near = 0.1;    
    dirLight.shadow.camera.far = 2;  
    return dirLight;
}

function addSlide(i, url) {
    const img = document.createElement('img');
    img.crossOrigin = 'anonymous';
    img.src = url;
    img.onload = () => {
        const geom = createGeometry(i);
        let slide = new THREE.Mesh(geom,  createMaterial(img, i, -1));
        slide.receiveShadow = true;  
        film.add(slide);
        slide = new THREE.Mesh(geom,  createMaterial(img, i, 1));
        slide.castShadow = true;
        slide.customDepthMaterial = customDepthMaterial;
        slide.customDepthMaterial.map = slide.material.map;     
        film.add(slide);
    };
}

function createMaterial(img, index, side) {
    const mat = new THREE.MeshStandardMaterial({
        map: cteateTexture(img),
        side: THREE.DoubleSide,
        clippingPlanes: [new THREE.Plane(new THREE.Vector3( 0, 0, side ).........完整代码请登录后点击上方下载按钮下载查看