Three.js之相机、渲染器、光源、动画、性能监测

参考资料

知识点

  • 透视投影相机PerspectiveCamera
  • WebGL渲染器WebGLRenderer
  • 辅助观察坐标系AxesHelper
  • 漫反射网格材质MeshLambertMaterial
  • 点光源PointLight
  • 点光源辅助观察PointLightHelper
  • 环境光AmbientLight
  • 平行光DirectionalLight
  • 平行光辅助观察DirectionalLightHelper
  • 相机控件OrbitControls
  • 请求动画帧window.requestAnimationFrame
  • canvas画布宽高度动态变化
  • 性能监控Stats

代码实现

  • 相机、渲染器、光

    javascript 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Three.js</title>
    </head>
      <body>
      </body>
      <!-- 具体路径配置,你根据自己文件目录设置,我的是课件中源码形式 -->
      <script type="importmap">
        {
          "imports": {
            "three": "./js/three.module.js",
            "three/addons/": "../three.js/examples/jsm/"
          }
        }
      </script>
      <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    
        const width = 800
        const height = 500
    
        // 场景
        const scene = new THREE.Scene();
        // 几何体
        const geometry = new THREE.BoxGeometry(100, 100, 100);
        // 材质 
        // MeshBasicMaterial:不受光
        // MeshLambertMaterial:受光
        const material = new THREE.MeshLambertMaterial({
          color:0x0000ff,
        });
        // 网格模型:物体
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        scene.add(mesh);
    
        // 坐标系
        const axes = new THREE.AxesHelper(200);
        scene.add(axes);
    
        // // 点光源
        // const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);
        // pointLight.position.set(-200, 200, 200 );
        // scene.add( pointLight );
    
        // // 辅助点光源
        // const pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );
        // scene.add( pointLightHelper );
    
        // 环境光
        const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
        scene.add( ambientLight );
    
        // 平行光
        const directionalLight = new THREE.DirectionalLight( 0xffffff, 1, 0, 0);
        // directionalLight.position.set(100, 0, 0);
        // directionalLight.position.set(0, 100, 0);
        // directionalLight.position.set(100, 100, 100);
        directionalLight.position.set(100, 60, 50);
        directionalLight.target = mesh;
        scene.add( directionalLight );
    
        // 辅助平行光
        const directionalLightHelper = new THREE.DirectionalLightHelper( directionalLight, 10 );
        scene.add( directionalLightHelper );
    
        // 相机
        const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
        camera.position.set(200, 200, 200);
        camera.lookAt(scene.position);
    
        // 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        renderer.render(scene, camera);
        document.body.appendChild(renderer.domElement);
    
        // 控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', () => {
          renderer.render(scene, camera);
        });
      </script>
    </html>
  • 动画

    javascript 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Three.js</title>
    </head>
      <body>
      </body>
      <!-- 具体路径配置,你根据自己文件目录设置,我的是课件中源码形式 -->
      <script type="importmap">
        {
          "imports": {
            "three": "./js/three.module.js",
            "three/addons/": "../three.js/examples/jsm/"
          }
        }
      </script>
      <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    
        const width = 800
        const height = 500
    
        // 场景
        const scene = new THREE.Scene();
        // 几何体
        const geometry = new THREE.BoxGeometry(100, 100, 100);
        // 材质
        const material = new THREE.MeshBasicMaterial({
          color: 0x00ff00,
          transparent: true,
          opacity: 0.5
        });
        // 网格模型:物体
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        scene.add(mesh);
    
        // 坐标系
        const axes = new THREE.AxesHelper(200);
        scene.add(axes);
    
        // 相机
        const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
        camera.position.set(200, 200, 200);
        camera.lookAt(scene.position);
    
        // 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        renderer.render(scene, camera);
        document.body.appendChild(renderer.domElement);
    
        // 动画渲染
        // 跟踪时间
        var clock = new THREE.Clock();
        function render() {
          const spt = clock.getDelta() * 1000;
          console.log('🚀 ~ file: animation.html:59 ~ render ~ spt:', spt)
          requestAnimationFrame(render);
          mesh.rotation.y += 0.01;
          renderer.render(scene, camera);
        }
    
        render();
    
        // 控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', () => {
          // 因为动画渲染了,所以这里可以省略
          // renderer.render(scene, camera);
        });
      </script>
    </html>
  • 画布动态变化

    javascript 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Three.js</title>
      <style>
        body {
          margin: 0;
          overflow: hidden;
        }
      </style>
    </head>
      <body>
      </body>
      <!-- 具体路径配置,你根据自己文件目录设置,我的是课件中源码形式 -->
      <script type="importmap">
        {
          "imports": {
            "three": "./js/three.module.js"
          }
        }
      </script>
      <script type="module">
        import * as THREE from 'three';
    
        let width = window.innerWidth;
        let height = window.innerHeight;
    
        // 场景
        const scene = new THREE.Scene();
        // 几何体
        const geometry = new THREE.BoxGeometry(100, 100, 100);
        // 材质
        const material = new THREE.MeshBasicMaterial({
          color: 0x00ff00,
          transparent: true,
          opacity: 0.5
        });
        // 网格模型:物体
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        scene.add(mesh);
    
        // 坐标系
        const axes = new THREE.AxesHelper(200);
        scene.add(axes);
    
        // 相机
        const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
        camera.position.set(200, 200, 200);
        camera.lookAt(scene.position);
    
        // 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        renderer.render(scene, camera);
        document.body.appendChild(renderer.domElement);
    
        // 填满浏览器
        window.onresize = function () {
          width = window.innerWidth;
          height = window.innerHeight;
          renderer.setSize(width, height);
          camera.aspect = width / height;
          camera.updateProjectionMatrix();
        }
      </script>
    </html>
  • 性能监控

    javascript 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Three.js</title>
    </head>
      <body>
      </body>
      <!-- 具体路径配置,你根据自己文件目录设置,我的是课件中源码形式 -->
      <script type="importmap">
        {
          "imports": {
            "three": "./js/three.module.js",
            "three/addons/": "../three.js/examples/jsm/"
          }
        }
      </script>
      <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import Stats from 'three/addons/libs/stats.module.js';
    
        const width = 800
        const height = 500
    
        // 场景
        const scene = new THREE.Scene();
        // 几何体
        const geometry = new THREE.BoxGeometry(100, 100, 100);
        // 材质
        const material = new THREE.MeshBasicMaterial({
          color: 0x00ff00,
          transparent: true,
          opacity: 0.5
        });
        // 网格模型:物体
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, 0);
        scene.add(mesh);
    
        for (let i = 0; i < 1000; i++) {
          // 几何体
          const geometry = new THREE.BoxGeometry(5, 5, 5);
          // 材质
          const material = new THREE.MeshBasicMaterial({
            color: 0x00ff00,
            transparent: true,
            opacity: 0.5
          });
          // 网格模型:物体
          const mesh = new THREE.Mesh(geometry, material);
          mesh.position.set((Math.random() - 0.5) * 200, (Math.random() - 0.5) * 200, (Math.random() - 0.5) * 200);
          scene.add(mesh);
        }
    
        // 坐标系
        const axes = new THREE.AxesHelper(200);
        scene.add(axes);
    
        // 相机
        const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
        camera.position.set(200, 200, 200);
        camera.lookAt(scene.position);
    
        // 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        renderer.render(scene, camera);
        document.body.appendChild(renderer.domElement);
    
        // 性能监控
        const stats = new Stats()
        document.body.appendChild(stats.domElement);
    
        // 动画渲染
        // 跟踪时间
        var clock = new THREE.Clock();
        function render() {
          stats.update()
          const spt = clock.getDelta() * 1000;
          requestAnimationFrame(render);
          mesh.rotation.y += 0.01;
          renderer.render(scene, camera);
        }
    
        render();
      </script>
    </html>
相关推荐
baker_zhuang1 个月前
Threejs创建正多边体
threejs·web3d
baker_zhuang1 个月前
Threejs绘制圆锥体
threejs·web3d
baker_zhuang1 个月前
Threejs创建胶囊体
webgl·threejs·web3d
weixin_505154463 个月前
web3d值得学习并长期发展,性价比高吗?
3d·数字孪生·web3d·3d产品配置器·产品交互展示·3d交互设计工具
vivo互联网技术4 个月前
基于 Three.js 的 3D 模型加载优化
rust·three.js·webassembly·3d模型·web3d
weixin_505154464 个月前
什么是Web3D?国内有哪些公司可以做?
3d·数字孪生·数据可视化·web3d·3d产品配置器·3d交互展示
陈小峰_iefreer4 个月前
探讨3D沉浸式在线会议系统的研发 - Meta演示的元宇宙虚拟化身多人对话场景,Web端现在也可以实现了 !
元宇宙·web3d·沉浸式互联网
mirrornan4 个月前
什么是Web3D交互展示?有什么优势?
3d·webgl·3d模型·web3d·3d展示
mirrornan6 个月前
什么是web3D?应用场景有哪些?如何实现web3D展示?
3d·web3·webgl·web3d·3d展示·网页3d