master

分支 (1)

管理

管理

master

threejsmodel
/
obj-dog.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>FBXLoader3D模型展示</title>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <script type="importmap">
        {
            "imports": {
                "three": "./build/three.module.js"
            }
        }
    </script>
  <script type="module">
    import * as THREE from 'three';
    import Stats from './jsm/libs/stats.module.js';
    import { OrbitControls } from './jsm/controls/OrbitControls.js';
    import { OBJLoader } from './jsm/loaders/OBJLoader.js'

    var container, stats, controls, camera, scene, renderer, light;

    init();
    animate();
    function init() {
      container = document.createElement('div');
      document.body.appendChild(container);//添加到body中
      camera = new THREE.PerspectiveCamera(755, window.innerWidth / window.innerHeight, .2, 100);
      camera.position.set(0, 5, 5);//相机位置
      scene = new THREE.Scene();//场景
      scene.background = new THREE.Color(0xdadada);//背景色
      scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);//雾化效果
      light = new THREE.HemisphereLight(0xffd700, 1);//环境光
      light.position.set(0, 200, 100);//光源位置
      scene.add(light);//环境光
      light = new THREE.DirectionalLight(0xcccccc);//平行光
      light.position.set(0, 20, 10);//光源位置
      light.castShadow = true;//开启阴影
      scene.add(light);//平行光
      var grid = new THREE.GridHelper(5, 20, 0x000000, 0x000000);
      grid.material.opacity = 0.2;
      grid.material.transparent = true;
      scene.add(grid); //网格线

      var groundGeometry = new THREE.PlaneGeometry(10, 10);
      var groundMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
      var ground = new THREE.Mesh(groundGeometry, groundMaterial);
      ground.rotation.x = -Math.PI / 2;  // 将地面平面翻转至水平面
      ground.receiveShadow = true;  // 设置地面平面接受阴影
      scene.add(ground);

      // model
      var rotationSpeed = 0.01;
      var loader = new OBJLoader();
      loader.load('models/dog.obj', function (object) {
        undefined
        object.traverse(function (child) {
          undefined
          if (child.isMesh) {
            undefined
            child.castShadow = true;
            child.receiveShadow = true;
          }
        });
        // object.castShadow = true;//开启阴影
        camera.position.set(0, 5, 3);//相机位置
        camera.lookAt(0, 0, 0);//相机朝向
        //旋转动画
        function animate() {
          requestAnimationFrame(animate);
          object.rotation.z += rotationSpeed;
          renderer.render(scene, camera);
        }
        animate();
        object.rotation.x = Math.PI / 2;//初始角度
        object.rotation.z = Math.PI;//初始角度
        object.rotation.y = Math.PI;//初始角度
        object.position.set(0, 0, 0);
        console.log(object.position);
        object.scale.set(.02, .02, .02);
        scene.add(object);
      });

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth / 2.5, window.innerHeight / 2.5);
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      container.appendChild(renderer.domElement);
      controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 0, 0);

      controls.update();
      window.addEventListener('resize', onWindowResize, false);
    }


    function onWindowResize() {
      undefined
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth / 2.5, window.innerHeight / 2.5);
    }

    //

    function animate() {
      undefined
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      stats.update();
    }

    //找到canvas元素
    var canvas = document.querySelector('canvas');
    canvas.style.border = '1px solid #000';
  </script>
</body>

</html>