【Three】three.js入门教程--球体的实现

使用three.js渲染出可以调节大小的立方体

1.搭建开发环境

1.首先新建文件夹用vsc打开项目终端

2.执行npm init -y

创建配置文件夹

3.执行npm i three@0.152

安装three.js依赖

4.执行npm I vite -D

安装 Vite 作为开发依赖

5.根目录下新建index.html

作为页面入口文件

6.根目录新建src文件

在src文件夹里新建main.js
现在我们将新建的main.js引入到index.html中

7.src文件中新建assets/style/reset.css

这里我们可以写全局的样式 现在我们主要用来测试环境的搭建

将样式文件引入到index.html中

8.启动项目

在package.json中编写启动脚本

在项目终端输入npm run dev将项目启动

2.初识three.js

three.js中我们要渲染出一个图形需要
1.创建一个三维场景
2.创建一个相机
3.创建物体
4.创建一个渲染器渲染
main.js

1.导入

2.创建场景

3.创建相机

4.创建一个球体

5.创建渲染器

6.渲染

3.集成辅助工具

1.自适应画布

2.轨道控制器

3.网格

4.坐标轴

4.集成gui工具

1.首先输入指令下载gui工具

npm i dat.gui

2.导入依赖

3.定义初始值

radius 球体半径，默认为1
widthSegments 水平分段数 （沿着经线分段）最小值为3 默认值为32。
heightSegments垂直分段数（沿着纬线分段）最小值为2 默认值为16。

4.设置集成工具逻辑

现在我们打开浏览器就可以看到球体和辅助工具已经渲染在页面
我们可以拖动调试工具改变球体的形状

下面是main.js中的完整代码

// 导入three.js
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import * as dat from 'dat.gui' 

//1.创建场景
const scene = new THREE.Scene()

//2.创建相机
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight
)
camera.position.set(20,20,20) //相机放置位置
camera.lookAt(0,0,0) //相机观察位置

//3.创建物体
const sphereGeometry = new THREE.SphereGeometry(2)
const sphereMaterail = new THREE.MeshNormalMaterial()
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterail)
scene.add(sphere)

//7.集成gui工具
const gui = new dat.GUI()
const data = {
    x: 0,
    y: 0,
    z: 0,
    radius: 2,
    widthSegments: 32,
    heightSegments: 16
}
gui.add(data, 'x').onChange((value) => {
    sphere.position.x = value
})
gui.add(data, 'y').onChange((value) => {
    sphere.position.y = value
})
gui.add(data, 'z').onChange((value) => {
    sphere.position.z = value
})
gui.add(data, 'radius', 2, 10, 1).onChange((value) => {
    // 销毁旧的几何体
    sphere.geometry.dispose()
    sphere.geometry = new THREE.SphereGeometry(
        data.radius,
        data.widthSegments, 
        data.heightSegments
        )
})
gui.add(data, 'widthSegments', 3, 64, 1).onChange((value) => {
    // 销毁旧的几何体
    sphere.geometry.dispose()
    sphere.geometry = new THREE.SphereGeometry(
        data.radius,
        data.widthSegments, 
        data.heightSegments
        )
})
gui.add(data, 'heightSegments', 2, 32, 1).onChange((value) => {
    // 销毁旧的几何体
    sphere.geometry.dispose()
    sphere.geometry = new THREE.SphereGeometry(
        data.radius,
        data.widthSegments, 
        data.heightSegments
        )
})

//4.创建渲染器
const renderer = new THREE.WebGL1Renderer({antialias: true})
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)

//5.渲染
renderer.setAnimationLoop(animation)
document.body.appendChild(renderer.domElement)
function animation() {
    renderer.render(scene, camera)
}


//6.集成辅助工具
//自适应画布
window.addEventListener('resize', ()=> {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    
    renderer.setSize(window.innerWidth, window.innerHeight)
})
//轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//网格
const grideHelper = new THREE.GridHelper(20,20, 0xffffff, 0xffffff)
grideHelper.material.transparent = true
grideHelper.material.opacity = 0.5
scene.add(grideHelper)
//坐标轴
const axesHepler = new THREE.AxesHelper(10)
scene.add(axesHepler)