关于程序员:Lanuch-threejs-with-甜甜圈-大帅老猿threejs特训

WebGL 简介

WebGL（全写 Web Graphics Library）是一种 3D 绘图协定，这种绘图技术标准容许把 JavaScript 和 OpenGL ES 2.0 联合在一起，通过减少 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 能够为 HTML5 Canvas 提供硬件 3D 减速渲染，这样在浏览器里更流畅地展现 3D 场景和模型了，还能创立简单的导航和数据视觉化。
WebGL 应用须要图形学常识，对 WebGL 编程能够通过 js 和 glsl 两种语言。如果想间接应用 WebGL，使用者能够采纳着色器（Shader）用来实现图像渲染的，但对于老手来说，Shader 还是艰难的。这时咱们能够应用 Three.js 来简化咱们对底层图形学的开发常识，更快的上手 3D 开发过程。

用 Threejs 实现一个甜甜圈 demo

• github 地址

安转依赖

npm ci

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

let mixer;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(5, 10, 25);

const controls = new OrbitControls(camera, renderer.domElement);

scene.background = new THREE.Color(0.2, 0.2, 0.2);

// const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
// scene.add(ambientLight);

const directionLight = new THREE.DirectionalLight(0xffffff, 0.4);
scene.add(directionLight);

// const boxGeometry = new THREE.BoxGeometry(1,1,1);
// const boxMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
// const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
// scene.add(boxMesh);

new GLTFLoader().load('../resources/models/zhanguan.glb', (gltf) => {// console.log(gltf);
    scene.add(gltf.scene);

    gltf.scene.traverse((child)=>{// console.log(child.name);
        if (child.name === '2023') {const video = document.createElement('video');
            video.src = "./resources/yanhua.mp4";
            video.muted = true;
            video.autoplay = "autoplay";
            video.loop = true;
            video.play();
            
            const videoTexture = new THREE.VideoTexture(video);
            const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
        
            child.material = videoMaterial;
        }
        if (child.name === '大屏幕 01') {const video = document.createElement('video');
            video.src = "./resources/video01.mp4";
            video.muted = true;
            video.autoplay = "autoplay";
            video.loop = true;
            video.play();
            
            const videoTexture = new THREE.VideoTexture(video);
            const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
        
            child.material = videoMaterial;
        }
        if (child.name === '大屏幕 02' || child.name === '操作台屏幕') {const video = document.createElement('video');
            video.src = "./resources/video01.mp4";
            video.muted = true;
            video.autoplay = "autoplay";
            video.loop = true;
            video.play();
            
            const videoTexture = new THREE.VideoTexture(video);
            const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
        
            child.material = videoMaterial;
        }
        if (child.name === '环形屏幕') {const video = document.createElement('video');
            video.src = "./resources/video02.mp4";
            video.muted = true;
            video.autoplay = "autoplay";
            video.loop = true;
            video.play();
            
            const videoTexture = new THREE.VideoTexture(video);
            const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
        
            child.material = videoMaterial;
        }
        if (child.name === '柱子屏幕') {const video = document.createElement('video');
            video.src = "./resources/yanhua.mp4";
            video.muted = true;
            video.autoplay = "autoplay";
            video.loop = true;
            video.play();
            
            const videoTexture = new THREE.VideoTexture(video);
            const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
        
            child.material = videoMaterial;
        }
    })



    mixer = new THREE.AnimationMixer(gltf.scene);
    const clips = gltf.animations; // 播放所有动画
    clips.forEach(function (clip) {const action = mixer.clipAction(clip);
        action.loop = THREE.LoopOnce;
        // 停在最初一帧
        action.clampWhenFinished = true;
        action.play();});

})

new RGBELoader()
    .load('../resources/sky.hdr', function (texture) {
        // scene.background = texture;
        texture.mapping = THREE.EquirectangularReflectionMapping;
        scene.environment = texture;
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.render(scene, camera);
});

function animate() {requestAnimationFrame(animate);

    renderer.render(scene, camera);

    controls.update();

    // if (donuts){
    //     donuts.rotation.y += 0.01;
    // }

    if (mixer) {mixer.update(0.02);
    }
}

animate();

最初

退出猿创营 (v:dashuailaoyuan)，一起交流学习