用three.js制作一个简单模型

饺子不放糖2023-11-21 9:20

three.js是一个基于WebGL的JavaScript库，可以用来创建和显示三维图形。在这个教程中，我们将用three.js制作一个简单的太阳系模型，展示太阳、地球和月球的运动。我们将学习如何使用three.js的基本组件，如场景、相机、光源、几何体、材质和纹理。我们还将使用three.js的动画循环和控制器来实现交互和动画效果。

准备工作

要运行这个教程，你需要以下几个东西：

  • 一个支持WebGL的浏览器，如Chrome、Firefox或Edge。
  • 一个文本编辑器，如Visual Studio Code、Sublime Text或Atom。
  • 一个本地服务器，如http-server或live-server，用来加载本地文件。
  • 一个three.js的副本，可以从[官网]下载或使用CDN链接。
  • 一些太阳、地球和月球的纹理图片，可以从[这里]下载或使用自己的图片。

创建HTML文件

首先，我们创建一个名为index.html的文件，用来存放我们的HTML代码。我们在文件中引入three.js的库文件，以及一个名为main.js的文件，用来存放我们的JavaScript代码。我们还在文件中创建一个名为container的div元素，用来作为three.js的渲染容器。我们的HTML文件的内容如下：

HTMLAI 生成的代码。仔细查看和使用。 有关常见问题解答的详细信息.

xml 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>three.js教程：太阳系模型</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r132/three.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

创建JavaScript文件

接下来，我们创建一个名为main.js的文件，用来存放我们的JavaScript代码。我们在文件中创建一个名为init的函数，用来初始化我们的three.js场景。我们在函数中创建一个名为scene的场景对象，一个名为camera的透视相机对象，一个名为renderer的WebGL渲染器对象，以及一些光源、几何体和材质对象。我们还在函数中设置相机的位置和方向，渲染器的大小和颜色，以及将渲染器的dom元素添加到container元素中。我们的JavaScript文件的内容如下：

JavaScriptAI 生成的代码。仔细查看和使用。 有关常见问题解答的详细信息.

java 复制代码 
// 初始化函数
function init() {
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000);

    // 将渲染器的dom元素添加到container元素中
    var container = document.getElementById("container");
    container.appendChild(renderer.domElement);

    // 创建太阳的几何体和材质
    var sunGeometry = new THREE.SphereGeometry(5, 32, 32);
    var sunMaterial = new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load("sun.jpg")
    });

    // 创建太阳的网格对象
    var sun = new THREE.Mesh(sunGeometry, sunMaterial);

    // 将太阳添加到场景中
    scene.add(sun);

    // 创建地球的几何体和材质
    var earthGeometry = new THREE.SphereGeometry(1, 32, 32);
    var earthMaterial = new THREE.MeshPhongMaterial({
        map: new THREE.TextureLoader().load("earth.jpg")
    });

    // 创建地球的网格对象
    var earth = new THREE.Mesh(earthGeometry, earthMaterial);

    // 设置地球的位置
    earth.position.set(10, 0, 0);

    // 将地球添加到场景中
    scene.add(earth);

    // 创建月球的几何体和材质
    var moonGeometry = new THREE.SphereGeometry(0.5, 32, 32);
    var moonMaterial = new THREE.MeshPhongMaterial({
        map: new THREE.TextureLoader().load("moon.jpg")
    });

    // 创建月球的网格对象
    var moon = new THREE.Mesh(moonGeometry, moonMaterial);

    // 设置月球的位置
    moon.position.set(12, 0, 0);

    // 将月球添加到场景中
    scene.add(moon);

    // 创建一个环境光源
    var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

    // 将环境光源添加到场景中
    scene.add(ambientLight);

    // 创建一个点光源
    var pointLight = new THREE.PointLight(0xffffff, 1, 100);

    // 设置点光源的位置
    pointLight.position.set(0, 0, 0);

    // 将点光源添加到场景中
    scene.add(pointLight);

    // 设置相机的位置和方向
    camera.position.set(0, 20, 20);
    camera.lookAt(0, 0, 0);

    // 返回场景、相机和渲染器
    return {
        scene: scene,
        camera: camera,
        renderer: renderer
    };
}

创建动画循环

最后，我们创建一个名为animate的函数，用来创建我们的动画循环。我们在函数中使用requestAnimationFrame方法来不断调用自身，实现循环。我们还在函数中使用three.js的Clock对象来获取时间，以及使用three.js的OrbitControls对象来实现相机的交互控制。我们还在函数中更新太阳、地球和月球的旋转和位置，以及调用渲染器的render方法来渲染场景。我们的JavaScript文件的内容如下：

JavaScriptAI 生成的代码。仔细查看和使用。 有关常见问题解答的详细信息.

ini 复制代码 
// 初始化函数
function init() {
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000);

    // 将渲染器的dom元素添加到container元素中
    var container = document.getElementById("container");
    container.appendChild(renderer.domElement);

    // 创建太阳的几何体和材质
    var sunGeometry = new THREE.SphereGeometry(5, 32, 32);
    var sunMaterial = new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load("sun.jpg")
    });

    // 创建太阳的网格对象
    var sun = new THREE.Mesh(sunGeometry, sunMaterial);

    // 将太阳添加到场景中
    scene.add(sun);

    // 创建地球的几何体和材质
    var earthGeometry = new THREE.SphereGeometry(1, 32, 32);
    var earthMaterial = new THREE.MeshPhongMaterial({
        map: new THREE.TextureLoader().load("earth.jpg")
    });

    // 创建地球的网格对象
    var earth = new THREE.Mesh(earthGeometry, earthMaterial);

    // 设置地球的位置
    earth.position.set(10, 0, 0);

    // 将地球添加到场景中
    scene.add(earth);

    // 创建月球的几何体和材质
    var moonGeometry = new THREE.SphereGeometry(0.5, 32, 32);
    var moonMaterial = new THREE.MeshPhongMaterial({
        map: new THREE.TextureLoader().load("moon.jpg")
    });

    // 创建月球的网格对象
    var moon = new THREE.Mesh(moonGeometry, moonMaterial);

 
 // 设置月球的位置
    moon.position.set(12, 0, 0);

    // 将月球添加到场景中
    scene.add(moon);

    // 创建一个环境光源
    var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

    // 将环境光源添加到场景中
    scene.add(ambientLight);

    // 创建一个点光源
    var pointLight = new THREE.PointLight(0xffffff, 1, 100);

    // 设置点光源的位置
    pointLight.position.set(0, 0, 0);

    // 将点光源添加到场景中
    scene.add(pointLight);

    // 设置相机的位置和方向
    camera.position.set(0, 20, 20);
    camera.lookAt(0, 0, 0);

    // 返回场景、相机和渲染器
    return {
        scene: scene,
        camera: camera,
        renderer: renderer
    };
}

// 动画循环函数
function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);

    // 获取时间
    var time = clock.getElapsedTime();

    // 创建相机控制器
    var controls = new THREE.OrbitControls(camera, renderer.domElement);

    // 更新太阳的旋转
    sun.rotation.y = time * 0.1;

    // 更新地球的旋转和位置
    earth.rotation.y = time * 0.5;
    earth.position.x = Math.cos(time * 0.2) * 10;
    earth.position.z = Math.sin(time * 0.2) * 10;

    // 更新月球的旋转和位置
    moon.rotation.y = time * 0.5;
    moon.position.x = earth.position.x + Math.cos(time * 0.5) * 2;
    moon.position.z = earth.position.z + Math.sin(time * 0.5) * 2;

    // 渲染场景
    renderer.render(scene, camera);
}

// 创建一个时钟对象
var clock = new THREE.Clock();

// 调用初始化函数
var { scene, camera, renderer } = init();

// 调用动画循环函数
animate();

这就是我们的教程的全部内容。你可以在你的浏览器中打开index.html文件，看到你的太阳系模型的效果。你可以用鼠标拖动和滚动来控制相机的视角。你也可以尝试修改一些参数，如光源的颜色和强度，几何体的大小和形状，材质的贴图和属性，以及动画的速度和轨迹

相关推荐
然我25 分钟前
不用 Redux 也能全局状态管理？看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子30 分钟前
Web 实时通信：从短轮询到 WebSocket
前端·javascript·面试
神仙别闹34 分钟前
基于C#+SQL Server实现（Web）学生选课管理系统
前端·数据库·c#
web前端神器40 分钟前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP：高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验，助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具：用户体验的毫秒战争
前端·笔记·ux
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02Cursor Claude 模型无法使用的解决方法03KGG转MP3工具|非KGM文件|解密音频04【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致05【无标题】06集群聊天服务器---MySQL数据库的建立07突破限制：使用 Claude Code Proxy 让 Claude Code 自由连接任意模型08绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径09使用Ruby接入实时行情API教程10Claude Code 最新版已经支持 Windows 安装使用！