three.js 学习基础笔记

基初用法笔记：场景，相机，渲染器，辅助线，几何体，控制器，gsap动画，GUI交互控制

import * as THREE from 'three'
//引入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
//引入动画
import gsap from "gsap"
//引和dat.GUI
import * as dat from 'dat.gui'

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

//创建相机添加至场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10)

//创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

//添加辅助线
const axes = new THREE.AxesHelper(5)
scene.add(axes)
axes.position.set(0, 0, 0)

//添加一个盒子
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: "red" })
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
cube.position.set(0, 0, 0)
cube.rotation.set(Math.PI / 4, 0, 0)
scene.add(cube)

//添加控制器，并设置阻尼
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

//添加环境光
const alight = new THREE.AmbientLight("#FFF", .7)
scene.add(alight)
//添加平行光
const dlight = new THREE.DirectionalLight("#fff", .5)
scene.add(dlight)

//添加GUI控制动画
const params = {
  fn: () => {
    const g = gsap.to(cube.position, { x: 5, duration: 2, ease: "power1.inOut", repeat: 2 })
    console.log(g)
  }
}
const datGui = new dat.GUI()
datGui.add(cube.position, 'x').min(-5).max(5).name("方块X")
datGui.add(params, 'fn').onChange(() => {
  console.log(11111111)
})


document.body.appendChild(renderer.domElement)

const render = () => {
  controls.update()
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}
render()

给几何体添加纹理

//添加一个盒子,并设置纹理
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load('./1.png'),
  side: THREE.DoubleSide // 双面渲染
})
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)

VR看房

//添加一个球,并设置纹理
const spereGeometry = new THREE.SphereGeometry(2, 30, 30)
const spereMaterial = new THREE.MeshBasicMaterial({
  //side: THREE.DoubleSide,
    /*此处放开，屏闭spere.geometry.scale(1, 1, -1)也可以实现，
        相机位置应该放在camera.position.set(0, 0, 0.1)*/
  map: new THREE.TextureLoader().load('./house.jpg')
})
const spere = new THREE.Mesh(spereGeometry, spereMaterial)
spere.geometry.scale(1, 1, -1)
scene.add(spere)

点击事件添加

window.addEventListener('click', (event) => {
  let v = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5)
  v = v.unproject(camera);
  const raycaster = new THREE.Raycaster(camera.position, v.sub(camera.position).normalize())
  let intersects = raycaster.intersectObjects(scene.children)
  if (intersects.length) {
    console.log(intersects[0].object.name)
  }
})