three.js基础之动画、相机、材质、灯光

标签：scene 动画 const THREE three add camera new js

动画

<body>
  <canvas id="mainCanvas" width="400px" height="300px"></canvas>
</body>
<script type="importmap">
  {
    "imports": {
      "three": "./js/build/three.module.js",
      "three/jsm/": "./js/jsm/"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";
  import Stats from "three/jsm/libs/stats.module.js";

  const renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById("mainCanvas"),
  });
  renderer.setClearColor(0x000000);

  const scene = new THREE.Scene();

  const box = new THREE.Mesh(
    new THREE.BoxGeometry(100, 60, 20),
    new THREE.MeshBasicMaterial({
      color: 0x0000ff, //设置材质颜色
      transparent: true, //开启透明
      opacity: 0.5, //设置透明度
    })
  );
  box.position.set(10, 0, 0);
  scene.add(box);

  const camera = new THREE.PerspectiveCamera(30, 400 / 300, 1, 3000); //透视投影相机参数设置
  camera.position.set(200, 200, 200);
  camera.lookAt(0, 0, 0);
  scene.add(camera);

  const axesHelper = new THREE.AxesHelper(150);
  scene.add(axesHelper);

  renderer.render(scene, camera);

  // 渲染循环
  const clock = new THREE.Clock();
  function render() {
    const spt = clock.getDelta() * 1000; //毫秒
    console.log("两帧渲染时间间隔(毫秒)", spt);
    console.log("帧率FPS", 1000 / spt);
    renderer.render(scene, camera); //执行渲染操作
    box.rotateY(0.01); //每次绕y轴旋转0.01弧度
    requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
  }
  render();
</script>

相机

<body>
  <canvas id="OrthographicCamera" width="300px" height="200px"></canvas>
  <canvas id="PerspectiveCamera" width="300px" height="200px"></canvas>
  <canvas id="OrbitControls" width="300px" height="200px"></canvas>
</body>
<script type="importmap">
  {
    "imports": {
      "three": "./js/build/three.module.js",
      "three/jsm/": "./js/jsm/"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";
  import { OrbitControls } from "three/jsm/controls/OrbitControls.js";

  const pointsArr = [new THREE.Vector2(0, 0), new THREE.Vector2(100, 0), new THREE.Vector2(100, 100), new THREE.Vector2(0, 100)];
  const shape = new THREE.Shape(pointsArr);
  const geometry = new THREE.ExtrudeGeometry(shape, { depth: 100 });
  const material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide, //双面显示看到管道内壁
  });
  const mesh = new THREE.Mesh(geometry, material);

  let resize_Orthographic;
  let resize_Perspective;

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("OrthographicCamera"),
      antialias: true,
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();
    scene.add(mesh);

    // 正投影相机
    const width = 300; //canvas画布宽度
    const height = 200; //canvas画布高度
    const k = width / height; //canvas画布宽高比
    const s = 200; //控制left, right, top, bottom范围大小
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);
    camera.position.set(700, 500, 500);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    renderer.render(scene, camera);

    resize_Orthographic = function () {
      const width = 400;
      const height = 200;
      renderer.setSize(width, height); //更新Canvas画布尺寸

      const k = width / height;
      camera.left = -s * k;
      camera.right = s * k;
      camera.updateProjectionMatrix(); //相机参数更新
    };
  }

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("PerspectiveCamera"),
      antialias: true,
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();
    scene.add(mesh);

    const width = 300; //canvas画布宽度
    const height = 200; //canvas画布高度
    const k = width / height; //canvas画布宽高比
    const camera = new THREE.PerspectiveCamera(30, k, 1, 3000); //透视投影相机参数设置
    camera.position.set(700, 500, 500); //设置相机位置
    camera.lookAt(0, 0, 0);
    scene.add(camera); //添加到场景中。

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    renderer.render(scene, camera);

    resize_Perspective = function () {
      const width = 400;
      const height = 200;
      renderer.setSize(width, height); //更新Canvas画布尺寸

      camera.aspect = width / height;
      camera.updateProjectionMatrix(); //相机参数更新
    };
  }

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("OrbitControls"),
      antialias: true,
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();

    const pointsArr = [new THREE.Vector2(0, 0), new THREE.Vector2(30, 0), new THREE.Vector2(30, 30), new THREE.Vector2(0, 30)];
    const shape = new THREE.Shape(pointsArr);
    const geometry = new THREE.ExtrudeGeometry(shape, { depth: 30 });
    const material = new THREE.MeshBasicMaterial({
      color: 0xffff00,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const box = new THREE.Mesh(new THREE.BoxGeometry(30, 30, 20), material);
    box.position.set(0, 50, 0);
    scene.add(box);

    // 包围盒计算模型对象的大小和位置
    const box3 = new THREE.Box3();
    box3.expandByObject(mesh); // 计算模型包围盒
    console.log("查看包围盒", box3);
    const size = new THREE.Vector3();
    box3.getSize(size); // 计算包围盒尺寸
    console.log("模型包围盒尺寸", size);
    const center = new THREE.Vector3();
    box3.getCenter(center); // 计算包围盒中心坐标
    console.log("模型中心坐标", center);

    const width = 400; //canvas画布宽度
    const height = 300; //canvas画布高度
    const k = width / height;
    const s = 200; //控制left, right, top, bottom范围大小
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000); 
    camera.position.set(center.x, center.y, 500);
    camera.lookAt(center.x, center.y, center.z);
    scene.add(camera);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    //相机控件
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enablePan = true; //允许右键拖拽，默认值true
    controls.enableZoom = true; //允许缩放，默认值true
    controls.enableRotate = true; //允许旋转，默认值true
    controls.minDistance = 200; //相机位置与观察目标点距离
    controls.maxDistance = 500;
    controls.minZoom = 0.5; //正投影缩放范围
    controls.maxZoom = 2;
    controls.minPolarAngle = 0; //上下旋转范围 默认值0
    controls.maxPolarAngle = Math.PI; //默认值Math.PI
    controls.minAzimuthAngle = -Math.PI / 2; // 左右旋转范围
    controls.maxAzimuthAngle = Math.PI / 2;
    const dis = controls.getDistance(); //相机位置与目标观察点距离
    console.log("dis", dis);
    controls.target.set(0, 0, 0);

    controls.update(); //update()函数内会执行camera.lookAt(x, y, z)

    controls.addEventListener("change", function () {
      renderer.render(scene, camera); //执行渲染操作
    }); //监听鼠标、键盘事件

    renderer.render(scene, camera);

    // 渲染循环
    let angle = 0; //用于圆周运动计算的角度值
    const R = 100; //相机圆周运动的半径
    function render() {
      angle += 0.01;
      // 相机y坐标不变，在XOZ平面上做圆周运动
      camera.position.x = R * Math.cos(angle);
      camera.position.z = R * Math.sin(angle);
      camera.lookAt(0, 0, 0);
      renderer.render(scene, camera);
      requestAnimationFrame(render);

      // 查看相机位置变化
      console.log("camera.position", camera.position);
    }
    render();
  }

  window.addEventListener("resize", resize_Orthographic);
  window.addEventListener("resize", resize_Perspective);
</script>

单个物体，两种相机的显示效果感觉差别不大

灯光

<body>
  <canvas id="canvas-ambient-light" width="300px" height="200px"></canvas>
  <canvas id="canvas-directional-light" width="300px" height="200px"></canvas>
  <canvas id="canvas-point-light" width="300px" height="200px"></canvas>
  <canvas id="canvas-spot-light" width="300px" height="200px"></canvas>
</body>
<script type="importmap">
  {
    "imports": {
      "three": "./js/build/three.module.js",
      "three/jsm/": "./js/jsm/"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";

  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(50, 30, 20),
    new THREE.MeshLambertMaterial({
      color: 0xffffff, //设置材质颜色
      side: THREE.DoubleSide, //两面可见
    })
  );

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("canvas-ambient-light"),
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();

    mesh.position.set(10, 0, 0);
    scene.add(mesh);

    //环境光:没有特定方向，整体改变场景的光照明暗
    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
    scene.add(ambient);

    const camera = new THREE.PerspectiveCamera(30, 300 / 200, 1, 3000); //透视投影相机参数设置
    camera.position.set(200, 200, 200); //设置相机位置
    camera.lookAt(0, 0, 0);
    scene.add(camera); //添加到场景中。

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    renderer.render(scene, camera);
  }

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("canvas-directional-light"),
    });
    renderer.setClearColor(0x000000);
    renderer.shadowMap.enabled = true; // 设置渲染器，允许光源阴影渲染

    const scene = new THREE.Scene();

    mesh.position.set(10, 0, 0);
    mesh.castShadow = true; // 设置产生投影的网格模型
    scene.add(mesh);

    const geometry = new THREE.PlaneGeometry(20, 30);
    const mesh2 = new THREE.Mesh(
      geometry,
      new THREE.MeshLambertMaterial({
        color: 0xffffff,
        side: THREE.DoubleSide,
      })
    );
    mesh2.position.set(0, 0, 50);
    mesh2.rotateY(Math.PI / 2);
    scene.add(mesh2);

    // 平行光：两个参数分别表示光源颜色和光照强度
    const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
    directionalLight.position.set(100, 50, 50);
    directionalLight.target = mesh; // 方向光指向对象，可以不设置，默认的位置是0,0,0
    directionalLight.castShadow = true; // 平行光设置产生阴影的光源对象,开启光源阴影的计算功能
    // 设置三维场景计算阴影的范围
    directionalLight.shadow.camera.left = -200;
    directionalLight.shadow.camera.right = 200;
    directionalLight.shadow.camera.top = 200;
    directionalLight.shadow.camera.bottom = -200;
    directionalLight.shadow.camera.near = 0.5;
    directionalLight.shadow.camera.far = 300;
    console.log("阴影默认像素", directionalLight.shadow.mapSize); // mapSize属性默认512x512
    console.log("shadow.radius", directionalLight.shadow.radius); // 模糊弱化阴影边缘
    scene.add(directionalLight);

    const camera = new THREE.PerspectiveCamera(30, 300 / 200, 1, 3000); //透视投影相机参数设置
    camera.position.set(300, 300, 300);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    // DirectionalLightHelper：可视化平行光
    const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5, 0xff0000);
    scene.add(dirLightHelper);

    // 可视化平行光阴影对应的正投影相机对象
    const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
    // scene.add(cameraHelper);

    renderer.render(scene, camera);
  }

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("canvas-point-light"),
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();

    mesh.position.set(10, 0, 0);
    scene.add(mesh);

    //点光源：两个参数分别表示光源颜色和光照强度
    const pointLight = new THREE.PointLight(0xffffff, 10000.0);
    pointLight.position.set(100, 50, 50);
    scene.add(pointLight); //点光源添加到场景中

    const camera = new THREE.PerspectiveCamera(30, 300 / 200, 1, 3000); //透视投影相机参数设置
    camera.position.set(200, 200, 200);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    // 光源辅助观察
    const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
    scene.add(pointLightHelper);

    renderer.render(scene, camera);
  }

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("canvas-spot-light"),
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();

    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    // 聚光源：两个参数分别表示光源颜色和光照强度
    const spotLight = new THREE.SpotLight(0xffffff, 10000.0);
    spotLight.angle = Math.PI / 2; // 设置聚光光源发散角度
    // spotLight.decay = 0.0; //设置光源不随距离衰减
    spotLight.position.set(100, 50, 50); // 设置聚光光源位置
    scene.add(spotLight); //光源添加到场景中
    spotLight.target.position.set(0, 0, 0);

    const camera = new THREE.PerspectiveCamera(30, 300 / 200, 1, 3000); //透视投影相机参数设置
    camera.position.set(200, 200, 200);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    // 聚光源辅助对象，可视化聚光源
    const spotLightHelper = new THREE.SpotLightHelper(spotLight, 0xffffff);
    scene.add(spotLightHelper);

    renderer.render(scene, camera);
  }
</script>

材质

<body>
  <canvas id="MeshBasicMaterial" width="300px" height="200px"></canvas>
  <canvas id="MeshLambertMaterial" width="300px" height="200px"></canvas>
  <canvas id="MeshPhongMaterial" width="300px" height="200px"></canvas>
</body>
<script type="importmap">
  {
    "imports": {
      "three": "./js/build/three.module.js",
      "three/jsm/": "./js/jsm/"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("MeshBasicMaterial"),
      antialias: true,
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(60, 40, 20);
    const material = new THREE.MeshBasicMaterial({
      color: 0xff0000,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    //环境光:没有特定方向，整体改变场景的光照明暗
    const ambient = new THREE.AmbientLight(0xffffff, 3);
    scene.add(ambient);

    const camera = new THREE.PerspectiveCamera(30, 300 / 200, 1, 3000); //透视投影相机参数设置
    camera.position.set(300, 300, 300);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    renderer.render(scene, camera);
  }

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("MeshLambertMaterial"),
      antialias: true,
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(60, 40, 20);
    // 高光网格材质
    const material = new THREE.MeshLambertMaterial({
      color: 0xff0000,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 聚光源：两个参数分别表示光源颜色和光照强度
    const spotLight = new THREE.SpotLight(0xffffff, 3.0);
    spotLight.angle = Math.PI / 2; // 设置聚光光源发散角度
    spotLight.decay = 0.0; //设置光源不随距离衰减
    spotLight.position.set(100, 50, 50); // 设置聚光光源位置
    scene.add(spotLight); //光源添加到场景中
    spotLight.target.position.set(0, 0, 0);

    const camera = new THREE.PerspectiveCamera(30, 300 / 200, 1, 3000); //透视投影相机参数设置
    camera.position.set(300, 300, 300);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    renderer.render(scene, camera);
  }

  {
    const renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("MeshPhongMaterial"),
      antialias: true,
    });
    renderer.setClearColor(0x000000);

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(60, 40, 20);
    // 高光网格材质
    const material = new THREE.MeshPhongMaterial({
      color: 0xff0000,
      shininess: 20, //高光部分的亮度，默认30
      specular: 0x444444, //高光部分的颜色
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 聚光源：两个参数分别表示光源颜色和光照强度
    const spotLight = new THREE.SpotLight(0xffffff, 3.0);
    spotLight.angle = Math.PI / 2; // 设置聚光光源发散角度
    spotLight.decay = 0.0; //设置光源不随距离衰减
    spotLight.position.set(100, 50, 50); // 设置聚光光源位置
    scene.add(spotLight); //光源添加到场景中
    spotLight.target.position.set(0, 0, 0);

    const camera = new THREE.PerspectiveCamera(30, 300 / 200, 1, 3000); //透视投影相机参数设置
    camera.position.set(300, 300, 300);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

    renderer.render(scene, camera);
  }
</script>

标签：scene,动画,const,THREE,three,add,camera,new,js
From： https://www.cnblogs.com/caroline2016/p/18115914

three.js基础之动画、相机、材质、灯光

动画

相机

灯光

材质

相关文章

赞助商

阅读排行