别再说你不会three.js了

day2 添加纹理材质

// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 导入动画库
import gsap from 'gsap'
// 导入dat.gui
import * as dat from 'dat.gui'
import './style.css'

const w = window.innerWidth
const h = window.innerHeight
// 房间 3d 容器 1.创建场景
const scene = new THREE.Scene()
// 创建相机 参数：角度,宽高比,近端,远端
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100)
// 视角坐标轴位置
camera.position.set(0, 0, 5)
camera.lookAt(0, 0, 0)
// 添加物体  立方体 
// 创建几何体
// const geometry = new THREE.BufferGeometry()
// const vertices = new Float32Array([
//   -1.0, -1.0, 1.0,
//   1.0, -1.0, 1.0,
//   1.0, 1.0, 1.0,
//   1.0, 1.0, 1.0,
//   -1.0, 1.0, 1.0,
//   -1.0, -1.0, 1.0
// ])
// 根据几何体和材质创建物体
// const mesh  = new THREE.Mesh(geometry,material)
// for (let i = 0; i < 20; i++){
//   const geometry = new THREE.BufferGeometry()
//   const positionArray = new Float32Array(9)
//   for (let j = 0;j<9;j++){
//     positionArray[j] = Math.random()*10-5
//   }
//   geometry.setAttribute("position",new THREE.BufferAttribute(positionArray,3))
//   let color = new THREE.Color(Math.random(),Math.random(),Math.random())
//   const material = new THREE.MeshBasicMaterial({color:color,transparent:true,opacity:0.5})
//   const mesh = new THREE.Mesh(geometry,material)
//   // scene.add(mesh)
// }
// const geometry = new THREE.CircleGeometry(5,32)
// const material  = new THREE.MeshBasicMaterial({color:0xfff0f0})
// const circle = new THREE.Mesh(geometry,material)
// scene.add(circle)

// 导入纹理
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('https://img1.baidu.com/it/u=2457949636,2672114503&fm=253&fmt=auto&app=120&f=JPEG?w=1064&h=800')
// const doorColorTexture =  textureLoader.load('https://img0.baidu.com/it/u=4232065438,687216603&fm=253&fmt=auto&app=138&f=JPEG?w=822&h=500')
// const texturl = textureLoader.load('https://img0.baidu.com/it/u=3549643586,860055122&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1686762000&t=a871a17bd14186568ad6c79ddd1fa2ca')
// doorColorTexture.offset.x = 0.2
//设置旋转的原点
// doorColorTexture.center.set(0.5,0.5)

// doorColorTexture.rotation = Math.PI/180*30
// texture 纹理显示设置
// texturl.minFilter = THREE.NearestFilter
// texturl.magFilter = THREE.NearestFilter
// texturl.minFilter = THREE.LinearFilter
// texturl.magFilter = THREE.LinearFilter

// 设置纹理的重复
// doorColorTexture.repeat.set(2, 2)
// doorColorTexture.wrapS = THREE.MirroredRepeatWrapping //镜像重复
// doorColorTexture.wrapT = THREE.RepeatWrapping
// 添加物体
// const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1)
// const basicMaterial = new THREE.MeshBasicMaterial(
//   {
//     color: '#00f0f0',
//     map: doorColorTexture,
//     transparent:true,
//     opacity:0.5,
//     alphaMap:doorColorTexture,
//     side:THREE.DoubleSide
//   }
// )
// const cube = new THREE.Mesh(cubeGeometry, basicMaterial)
// scene.add(cube)
// // 添加平面
// const plane = new THREE.Mesh(
//   new THREE.PlaneBufferGeometry(1,1),
//   basicMaterial
// )
// plane.position.set(3,0,0)
// scene.add(plane)

//  目标 环境遮挡贴图与强度
const doorAoTextture = textureLoader.load('')
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1)
const basicMaterial = new THREE.MeshBasicMaterial(
  {
    color: '#00f0f0',
    map: doorColorTexture,
    transparent:true,
    opacity:1,
    alphaMap:doorColorTexture,
    side:THREE.DoubleSide
  }
)
const cube = new THREE.Mesh(cubeGeometry, basicMaterial)
scene.add(cube)
// 添加平面
const plane = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(1,1),
  basicMaterial
)
plane.position.set(3,0,0)
scene.add(plane)


// const material = new THREE.MeshBasicMaterial({ color: 0x32CD99 })
// geometry.setAttribute('position',new THREE.BufferAttribute(vertices,3))

// // 根据集合体和材质创建物体
// const cube = new THREE.Mesh(geometry, material)
// console.log(cube)
// const gui = new dat.GUI()
// // 
// gui.add(cube.position, 'x').min(0).max(10).step(0.01).name('x轴').onChange(() => {
//   console.log('a')
// })
// 修改物体的颜色
//   const params = {
//     color: '#ffff00',
//     fn: () => {
//       // 运动起来
//       gsap.to(cube.position, { x: 5, duration: 2, yoyo: true, repeat: -1 })
//     }
//   }
// gui.addColor(params, 'color').onChange((value) => {
//   cube.material.color.set(value)
// })
// gui.add(cube, 'visible').name('是否显示')
// 设置按钮点击触发某个事件


// 
// var folder = gui.addFolder('设置立方体')
// folder.add(cube.material, 'wireframe')
// folder.add(params, 'fn').name('运动')

// 将几何体添加到场景中
// scene.add(cube)
const light = new THREE.AmbientLight()
scene.add(light)
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
// 设置渲染器尺寸大小
renderer.setSize(w, h)

// 将webgl渲染的canvas内容添加到body
document.body.append(renderer.domElement)
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置控制器阻尼 让控制器更具真实性
controls.enableDamping = true


// 添加坐标辅助轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
// 设置时钟
const clock = new THREE.Clock()
// 修改物体的位置
// cube.position.set(0, 0, 0)
let flag = true
// 控制物体缩放
// cube.scale.set(2,2,1)
// cube.scale.z = 2
// 旋转
// cube.rotation.set(Math.PI / 180 * 45, 0, 0, "XYZ")

// 设置动画
// var animate1 = gsap.to(cube.position, {
//   x: 5, duration: 5, ease: 'power1.inOut',
//   // 设置重复次数 无限次 -1
//   repeat: 2,
//   //  往返运动
//   yoyo: true,
//   // delay 延迟
//   delay: 2,
//   onComplete: () => {
//     console.log('动画完成')
//   }, onStart: () => {
//     console.log('动画开始')
//   }
// })
// gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5 })
// window.addEventListener('dblclick', () => {
//   // animate1.isActive() ? animate1.pause() : animate1.resume()
//   // 双击控制屏幕进入全屏 推出全屏
//   const fullScreenElement = document.fullscreenElement
//   !fullScreenElement ? renderer.domElement.requestFullscreen() : document.exitFullscreen()
// })
document.onkeydown = function (e) {
  const keyNum = window.event ? e.keyCode : e.which
  console.log(keyNum)
  if (keyNum === 32) {
    animate1.isActive() ? animate1.pause() : animate1.resume()
  }
}
function render () {
  // console.log(cube.position.x)
  // if (cube.position.x >= 5) {
  //   cube.position.x = 5
  //   flag = false
  // } else if (cube.position.x <= 0) {
  //   cube.position.x = 0
  //   flag = true
  // }
  // if (flag) {
  //   cube.position.x += 0.01
  //   cube.rotation.x += 0.05
  //   cube.rotation.y += 0.05
  //   cube.rotation.z += 0.05
  // } else {
  //   cube.position.x -= 0.01
  //   cube.rotation.x -= 0.05
  //   cube.rotation.y -= 0.05
  //   cube.rotation.z -= 0.05
  // }
  // 获取时钟运行的总时长
  // let time = clock.getElapsedTime()
  // 时间间隔
  // let deltaTime =  clock.getDelta()
  // console.log(deltaTime )
  controls.update()
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}
render()

// 监听画面变化,更新渲染画面
window.addEventListener('resize', () => {
  // 更新摄像头
  camera.aspect = window.innerHeight / window.innerWidth
  // 更新摄像头投影矩阵
  camera.updateProjectionMatrix()
  //更新渲染器
  renderer.setSize(window.innerHeight, window.innerWidth)
  // 设置渲染器像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})