master

分支 (1)

管理

管理

master

three-study-demo
/
07材质
/
01MeshBasicMaterial.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01 基础材质</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="canvasBox"></div>

  <script type="module">
    import * as THREE from "../js/Three/src/Three.js"
    import { OrbitControls } from '../js/Three/examples/jsm/controls/OrbitControls.js'

    // 创建场景
    const scene = new THREE.Scene()
    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(1, 1, 5)
    camera.lookAt(scene.position)

    // 创建辅助坐标系
    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)

    // Three提供的纹理加载器
    const textureLoader = new THREE.TextureLoader()
    // 导入纹理贴图基础贴图
    const chungeLoader1 = textureLoader.load('../assets/images/chunge_flower.png')

    // 创建立方体
    const geometry = new THREE.BoxGeometry()
    const material1 = new THREE.MeshBasicMaterial({
      map: chungeLoader1
    })
    const cube1 = new THREE.Mesh(geometry, material1)
    scene.add(cube1)


    // 创建一个圆形
    // 正反面渲染纹理
    const circleGeometry = new THREE.CircleGeometry(0.5, 32)
    const material2 = new THREE.MeshBasicMaterial({
      map: chungeLoader1,
      side: THREE.DoubleSide
    })
    const circle1 = new THREE.Mesh(circleGeometry, material2)
    circle1.position.x = 2
    scene.add(circle1)


    // 纹理偏移
    const chungeLoader2 = textureLoader.load('../assets/images/chunge.png')
    chungeLoader2.offset.set(0.1, -0.5)
    // 上面这句等价于
    // chungeLoader2.offset.x = 0.1
    // chungeLoader2.offset.y = 0.2

    const material3 = new THREE.MeshBasicMaterial({
      map: chungeLoader2
    })
    const circle2 = new THREE.Mesh(circleGeometry, material3)
    circle2.position.x = 3.4
    scene.add(circle2)


    // 纹理旋转
    const chungeLoader3 = textureLoader.load('../assets/images/chunge.png')
    chungeLoader3.rotation = 45 * Math.PI / 180
    chungeLoader3.center.set(0.5, 0.5)
    const material4 = new THREE.MeshBasicMaterial({
      map: chungeLoader3
    })
    const circle3 = new THREE.Mesh(circleGeometry, material4)
    circle3.position.x = 4.8
    scene.add(circle3)


    // 重复纹理
    const chungeLoader4 = textureLoader.load('../assets/images/chunge.png')
    chungeLoader4.repeat.set(3, 2)
    // https://threejs.org/docs/index.html?q=texture#api/zh/textures/Texture.wrapS
    chungeLoader4.wrapS = THREE.RepeatWrapping // 重复
    chungeLoader4.wrapT = THREE.MirroredRepeatWrapping // 镜像重复
    const material5 = new THREE.MeshBasicMaterial({
      map: chungeLoader4
    })
    const cube2 = new THREE.Mesh(geometry, material5)
    cube2.position.y = 2
    scene.add(cube2)


    // 灰度纹理
    const chungeAlphaTexture = textureLoader.load('../assets/images/chunge_alpha.png')
    const material6 = new THREE.MeshBasicMaterial({
      map: chungeLoader1,
      alphaMap: chungeAlphaTexture, // 设置透明纹理层
      transparent: true, // 允许材质透明
      // opacity: 0.5, // 透明度
      side: THREE.DoubleSide
    })
    const cube3 = new THREE.Mesh(geometry, material6)
    cube3.position.y = 3.6
    scene.add(cube3)


    // 小型纹理渲染模式
    const zuanshi = textureLoader.load('../assets/images/zuanshi.png')
    zuanshi.magFilter = THREE.NearestFilter
    const material7 = new THREE.MeshBasicMaterial({
      map: zuanshi
    })
    const cube4 = new THREE.Mesh(geometry, material7)
    cube4.position.x = -2
    scene.add(cube4)


    // 创建渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.getElementById('canvasBox').appendChild(renderer.domElement)

    // 创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true

    // 循环执行
    function animate() {

      controls.update()

      // 旋转矩形
      cube1.rotation.x += 0.01
      cube1.rotation.y += 0.01

      circle1.rotation.y += 0.05

      renderer.render( scene, camera )
      requestAnimationFrame( animate )
    }

    // 执行动画函数
    animate()
  </script>
</body>
</html>