美文网首页
threejs学习之一

threejs学习之一

作者: 焚心123 | 来源:发表于2023-07-16 14:07 被阅读0次
  • 首先我们可以先打开threejs官网进行下载three,并按照官网的方式去进行练习,这里我使用papceljs的方式跟webpack和vite相似,都是一种打包工具,这个会更简单一点,可参考papceljs官网
  • 新建一个项目,在进行初始化
npm init -y
  • 全局安装papceljs
npm install  parcel-bundler -D
  • 下载thressjs
npm install three -S
  • 之后在package.json文件中进行配置
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel index.html",//运行当前的文件
    "build": "parcle build index.html"
  },

*当前我的目录都是同级,你也可以按照vue脚手架中的方式进行创建也可

  • 运行npm run dev后会进行打包有个dist文件不用管,直接打开链接就可以进行调试
  • 首先在index.html中引入我们的根js文件main.js
  • 然后在创建一个test.js在mainjs文件中进行引入
  • 接下来我们开始学习了
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// !初始化场景
const scene = new THREE.Scene()

// ! 相机(人的眼睛去发现去看去观察)//透视相机参数(视场角度,canvas宽高比,近裁截面,远裁界面)
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

// 设置相机位置
camera.position.set(0, 0, 5) //x,y,z坐标

// ! 创建物体
const geometry = new THREE.BoxGeometry(1, 1, 1) //长方体 球体SphereGeometry(50);等

// ! 给长方体或者几何体添加颜色等(添加网络材质)
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000, //0xff0000设置材质颜色为红色
})

// ! 根据创建的物体和材质(颜色等)进行创建物体
const mesh = new THREE.Mesh(geometry, material)
//设置网格模型在三维空间中的位置坐标,默认是坐标原点

//! 将创建的物体添加到场景当中
scene.add(mesh)

// ! 初始化渲染器进行渲染
const renderer = new THREE.WebGLRenderer()

// 渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight)

// ! 将渲染器的数据添加到页面上
document.body.appendChild(renderer.domElement)
//动画的函数
function animate() {
  mesh.rotateY(0.01) //每次绕y轴旋转0.01弧度
  requestAnimationFrame(animate) //请求再次执行渲染函数render,渲染下一帧(用的api是window中的动画方法)

  // ! 使用渲染器通过相机将场景渲染进页面
  renderer.render(scene, camera)
}

animate()

// 控制器可对页面旋转的物体进行操作
const controls = new OrbitControls(camera, renderer.domElement)
  • 几何体就是我们需要创建的一些模型(长方体,圆柱体等都是不同的api)
  • 材质也分为多种,需要我们下面的学习

相关文章

网友评论

      本文标题:threejs学习之一

      本文链接:https://www.haomeiwen.com/subject/orfwudtx.html