使用three.js在网页里展示3D模型

这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。

要在网页中使用three.js展示3D模型，你需要创建一个HTML页面，引入three.js库，并编写JavaScript代码来设置场景、相机、光源和3D模型。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Model with Three.js</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 场景
        var scene = new THREE.Scene();
 
        // 相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
 
        // 渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // 加载3D模型
        var loader = new THREE.GLTFLoader();
        loader.load('path/to/your/model.gltf', function (gltf) {
            scene.add(gltf.scene);
        }, undefined, function (error) {
            console.error(error);
        });
 
        // 光源
        var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
        scene.add(ambientLight);
 
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
 
        // 渲染循环
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
 
        animate();
    </script>
</body>
</html>

在这个例子中，我们创建了一个简单的3D场景，加载了一个使用GLTFLoader的3D模型，并设置了一个环境光和一个方向光源。animate函数负责循环渲染场景，创建动画。

请确保将path/to/your/model.gltf替换为你的3D模型的实际路径。three.js支持多种格式的3D模型，但是GLTF格式因为其体积小、加载快，而成为了较为推荐的格式。如果你的模型是其他格式，你需要使用相应的加载器。

记得在实际部署时，如果你的网站使用HTTPS，确保你的three.js库来源是HTTPS，否则会遇到跨域问题。

使用three.js在网页里展示3D模型

评论已关闭

推荐阅读