前端开发笔记之three.js基本语法

1. 引入three.js

// 原生写法，需要在官网先下载three.js文件包，然后在HTML文件中配置引入

    

    
    

// vue 或 react 引入three插件

npm install three --save

// 原生在js文件中引入
//vue 和 react 需要使用的页面中引入three

import * as THREE from 'three'

2. 创建3D场景对象 （scene）

const scene = new THREE.Scene()

3. 创建几何体（geometry）

        BoxGeometry      长方体    ConeGeometry 圆锥体       CylinderGeometry 圆柱体

        SphereGeometry 球体       PlaneGeometry 矩形平面   CircleGeometry     圆平面

//创建一个长宽高为100px的长方体（正方体）
const geomerty = new THREE.BoxGeometry（100,100,100）
geometry.scale(2,2,2)   //设置XYZ的缩放比例
geometry.translate（50,0,0）  //设置几何体向X轴平移50px
geometry.rotateX（Math.PI / 4）  //设置几何体绕X轴旋转45度
geometry.center()   //设置几何体居中

4. 物体材质（material）

        MeshBasicMaterial  网络基础材质

        MeshLamberMaterial  网络漫反射材质

        MeshPhoneMaterial  网络高光材质

        PointsMaterial  点材质

        LineBasicMaterial  线基础材质

        SpriteMaterial  精灵材质

        MeshPhysicalMaterical / MeshStandardMaterial  物理材质

const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,  //设置材质颜色为红色（十六进制）
    transparent: true,  //设置材料是否透明
    opacity: 0.6,  //设置透明度
})

4. 网络模型（mesh）

//将创建的几何体和物理材质挂栽到网络模型上
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 10, 0)  //设置模型放置位置
scene.add(mesh)  //将网络模型放到场景中显示

5. 透视投影相机（camera）

const width = 800
const height = 600
const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 30000)
camera.position.set(200, 200, 200)
camera.lookAt(0, 0 0)

6. 渲染器（renderer）

const renderer = new THREE.WebGLRenderer()
renderer.antialias = true  //设置渲染器锯齿属性
renderer.setPixelRatio(window.devicePixelRatio)  //设置设备像素比，避免模糊
renderer.serClearColor(0x444444, 1)  //设置渲染区域背景颜色
renderer.setSize(width, height)   //设置渲染区域的尺寸（像素PX）
renderer.render(scene, carema)  //执行渲染操作
document.getElementById('webgl').appendChild(renderer.domElement)

7. 相机控件（OrbitControls）：改变相机参数，360°旋转预览效果

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const controls = new OrbitControls(camera, renderer.docElement)
controls.addEventListener('change', function() {
    renderer.render(scene, camera)
})

8. 光源

AmbientLight： 环境光     SpotLgiht: 聚光灯光源

PointLight: 点光源              DirectionalLight: 平行光

const pointLight = new THREE.PointLight(0xffffff, 1.0)
pointLight.position.set(400, 0, 0)      //设置光源位置
scene.add(directionalLight)       //将光源添加到场景中

//添加光源辅助观察
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10)
scene.add(pointLightHelper)

9. 辅助坐标系

const axesHelper = new THREE.AxesHelper(150)    //参数为辅助坐标轴的长度
scene.add(axesHelper)

10. 动画

function render () {
    renderer.render(scene, camera)   //执行渲染函数
    mesh.rotateY(0.01)   //每次绕y轴旋转0.01弧度
    requestAnimationFrame(render)  //请求再次执行渲染函数
}

render（）