用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文件，看到你的太阳系模型的效果。你可以用鼠标拖动和滚动来控制相机的视角。你也可以尝试修改一些参数，如光源的颜色和强度，几何体的大小和形状，材质的贴图和属性，以及动画的速度和轨迹

相关推荐
无双_Joney10 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥？（功能篇）
前端·后端·nestjs
在云端易逍遥10 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT10 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare10 小时前
选择文件夹路径
前端
艾小码10 小时前
还在被超长列表卡到崩溃？3招搞定虚拟滚动，性能直接起飞！
前端·javascript·react.js
闰五月10 小时前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁10 小时前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅10 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸10 小时前
Prompt结构化输出：从入门到精通的系统指南
前端
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点0346个Nano-banana 精选提示词，持续更新中04Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题08Spec-Kit 使用指南09A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程10KGG转MP3工具|非KGM文件|解密音频