three.js的一些基本使用

最新推荐文章于 2025-03-21 14:32:49 发布

want、

最新推荐文章于 2025-03-21 14:32:49 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

分类专栏： three.js

本文链接：https://blog.youkuaiyun.com/javaScript_want/article/details/101728396

three.js 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了使用three.js创建一个旋转正方体的过程，包括渲染器、场景、相机的初始化，以及模型创建和动画执行的基本步骤，适合three.js初学者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

three.js的一些基本使用记录

创建一个旋转的正方体

步骤：
1.初始化渲染器

          let mesh ;
          //初始化渲染器
          let  renderer = new THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth,window.innerHeight) //设置宽高
          document.body.appendChild(renderer.domElement)  //添加到dom

2.初始化场景
 //初始化场景
           let scene = new THREE.Scene()

3.初始化相机
 //创建一个相机（参数1：相机的视野参数越大视野也越大，参数2：宽高比，参数3参数4：近裁面和远裁面，设置可以看到的范围）
          let camere = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 200);
             camere.position.set(0,0,15) //x ,y ,z位置
4.创建一个模型
 //创建一个模型
          function init() {
               let geomery = new THREE.BoxGeometry(2,2,2)
               let material = new THREE.MeshNormalMaterial();//创建一个七彩材质
               mesh = new THREE.Mesh(geomery,material) ;//创建一个网格
               scene.add(mesh); //将网格添加到场景中
          }
5.执行动画
//运行动画
          function animate() {
              //递归循环调用函数
                requestAnimationFrame(animate);
                mesh.rotation.x+=0.01; //每帧网格旋转0.01的弧度  半圈是180度
                mesh.rotation.y+=0.02;
                renderer.render(scene,camere)  //渲染界面
          }