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

相关推荐
10年前端老司机5 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星6 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构8 分钟前
【方案】前端UI布局的绝技，响应式布局，多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚8 分钟前
TypeScript在前端项目中的那些事儿：不止于类型的守护者
前端·javascript·typescript
ze_juejin9 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive10 分钟前
原型与原型链到底是什么？
javascript
lichenyang45311 分钟前
React项目（移动app）
前端
用户618482402195112 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队24 分钟前
报名 | 美团技术沙龙第86期：多业务场景下，美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端
热门推荐
01Java学习第十五部分——MyBatis02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---装饰模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07【无标题】08Everything文件检索工具 几秒检索几百G的文件09DeepSeek各版本说明与优缺点分析10基于odoo17的设计模式详解---单例模式