master

分支 (1)

管理

管理

master

model
/
index.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>Document</title>
    <style></style>
  </head>
  <body>
    <div id="model"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script> -->
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/GLTFLoader.js"></script>
    <script>
      var container

      var camera, scene, renderer

      var mouseX = 0,
        mouseY = 0

      var windowHalfX = window.innerWidth / 2
      var windowHalfY = window.innerHeight / 2

      var object

      init()
      animate()

      function init() {
        var Models = document.getElementById("model")

        camera = new THREE.PerspectiveCamera(
          45,
          window.innerWidth / window.innerHeight,
          1,
          3000
        )
        camera.position.x = 100
        camera.position.z = 2
        camera.position.y = 2

        // scene

        scene = new THREE.Scene()

        var ambientLight = new THREE.AmbientLight(0xcccccc, 0.3)
        scene.add(ambientLight)

        var pointLight = new THREE.PointLight(0xffffff, 0.2)
        camera.add(pointLight)
        scene.add(camera)

        var controls = new THREE.OrbitControls(camera)
        // controls.autoRotate = true // 设置平面自动旋转

        // manager

        function loadModel() {
          object.traverse(function (child) {
            //                if ( child.isMesh ) child.material.map = texture;
          })

          object.position.y = 0
          scene.add(object)
        }

        var manager = new THREE.LoadingManager(loadModel)

        manager.onProgress = function (item, loaded, total) {
          console.log(item, loaded, total)
        }

        function onProgress(xhr) {
          if (xhr.lengthComputable) {
            var percentComplete = (xhr.loaded / xhr.total) * 100
            console.log(
              "model " + Math.round(percentComplete, 2) + "% downloaded"
            )
          }
        }

        function onError(xhr) {}
        var loader = new THREE.GLTFLoader()
        var texture = new THREE.TextureLoader().load("/public/color.jpg")
        texture.encoding = THREE.sRGBEncoding
        texture.flipY = false
        texture.needsUpdate = true
        texture.wrapS = THREE.RepeatWrapping
        texture.wrapT = THREE.RepeatWrapping
        texture.repeat.set(4, 4)
        //新建材质
        var tmaterial = new THREE.MeshStandardMaterial({ map: texture })
        loader.load("./public/obj1.glb", function (glb) {
          glb.scene.traverse(function (child) {
            if (child.isMesh) {
              child.material.emissive = child.material.color
              child.material.emissiveMap = child.material.map
              child.material.transparent = true
              child.material.opacity = 0.8

            }
          })

          // 返回的场景对象gltf.scene插入到threejs场景中
          // scene.add(gltf.scene)
          // const sceneObject = glb.scene
          // const len = sceneObject.children[0].children.length
          // materialColors = new Float32Array(len * 3)

          // for (let i = 0; i < len; i++) {
          //   const i3 = i * 3
          //   let colors = new Vector3()
          //   colors = sceneObject.children[0].children[i].material.color

          //   materialColors[i3] = colors.r
          //   materialColors[i3 + 1] = colors.g
          //   materialColors[i3 + 2] = colors.b
          // }

          /// I would like to attach color attribution here

          scene.add(glb)
        })

        // var loader = new THREE.OBJLoader(manager)

        // //          loader.load( 'models/obj/male02/male02.obj', function ( obj ) {
        // loader.load(
        //   "/public/obj.obj",
        //   function (obj) {
        //     object = obj
        //     // object.traverse(function (child) {
        //     //   if (child instanceof THREE.Mesh) {
        //     //     child.material.ambient.setHex(0xff0000)
        //     //     child.material.color.setHex(0x00ff00)
        //     //   }
        //     // })

        //     object.position.y = 0
        //     scene.add(object)
        //   },
        //   onProgress,
        //   onError
        // )

        //

        renderer = new THREE.WebGLRenderer()
        renderer.setPixelRatio(window.devicePixelRatio)
        renderer.setSize(window.innerWidth, window.innerHeight)
        Models?.appendChild(renderer.domElement)

        document.addEventListener("mousemove", onDocumentMouseMove, false)

        window.addEventListener("resize", onWindowResize, false)
      }

      function onWindowResize() {
        windowHalfX = window.innerWidth / 4
        windowHalfY = window.innerHeight / 4

        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()

        renderer.setSize(window.innerWidth, window.innerHeight)
      }

      function onDocumentMouseMove(event) {
        mouseX = (event.clientX - windowHalfX) / 2
        mouseY = (event.clientY - windowHalfY) / 2
      }

      function animate() {
        requestAnimationFrame(animate)
        render()
      }

      function render() {
        // camera.position.x += 0.05
        // camera.position.y += 0.05

        camera.lookAt(scene.position)

        renderer.render(scene, camera)
      }

      var myDate = new Date()
      function ChangeFormate(floatvar) {
        var f_x = parseFloat(floatvar)
        if (isNaN(f_x)) {
          return false
        }
        var f_x = Math.round(f_x * 100) / 100
        var s_x = f_x.toString()
        var pos_decimal = s_x.indexOf(".")
        if (pos_decimal < 0) {
          pos_decimal = s_x.length
          s_x += "."
        }
        while (s_x.length <= pos_decimal + 2) {
          s_x += "0"
        }
        if (floatvar < 0) {
          return s_x.substring(1, s_x.length)
        } else {
          return s_x
        }
      }
      console.log(ChangeFormate(myDate))
    </script>
  </body>
</html>