通过three.js实现3d模型展示

最新推荐文章于 2024-05-15 02:20:25 发布

miracle0623

最新推荐文章于 2024-05-15 02:20:25 发布

阅读量2.9k

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/miracle0623/article/details/124120025

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先，下载three.js 和一个免费的gltf模型。

Animals & Pets 3D models | Categories - Sketchfab

Three.js-master下载

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>耐克</title>
    <style>
        body{ margin: 0; padding: 0; overflow: hidden;}
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script src="js/loaders/GLTFLoader.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

app.js

let scene, camera, renderer;

const init = () => {
    // Scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);

    // Renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Camera
    const aspect = window.innerWidth / window.innerHeight;
    camera = new THREE.PerspectiveCamera(20, aspect, 0.01, 1000);
    // camera.rotation.y = (90 / 180 ) * Math.PI;
    camera.position.set(0.5, 1, 1);

    // Camera Controls
    let controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.addEventListener("change", renderer);

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

    // Loader
    const loader = new THREE.GLTFLoader();
    loader.load("models/nike/scene.gltf", (result) => {
        scene.add(result.scene);
        animate();
    });
};

const animate = () => {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

init();

展示效果：