three.js 1 起步

import * as THREE from 'three';
import WebGL from "three/examples/jsm/capabilities/WebGL";

/**
 * 3d 根据文档学习 1 - 起步
 * 绘制过程
 * 兼容性检查
 * https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
 */
export class ThreeDoc1Start {
    constructor(canvasId) {
        this.work(canvasId);
    }

    work(canvasId) {
        // 创建 3d 场景
        const scene = new THREE.Scene();

        /**
         * 创建渲染器
         * WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器。当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。
         * @type {number}
         */
        const renderer = new THREE.WebGLRenderer();
        /**
         * 渲染器尺寸：设置渲染器的宽高使渲染出的场景充满应用程序
         * 对于性能比较敏感的应用程序来说，你可以使用setSize传入一个较小的值，例如window.innerWidth/2和window.innerHeight/2
         * 如果想以较低的分辨率来渲染，可以在调用setSize时，将updateStyle（第三个参数）设为false
         */
        renderer.setSize( window.innerWidth, window.innerHeight );
        // 最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。
        document.body.appendChild( renderer.domElement );


        /**
         * 照相机常用的有两种
         * 正投影相机：THREE.OrthographicCamera(left,right,top,bottom,near,far)；
         * 透视照相机：THREE.PerspectiveCamera( fov, aspect, near, far ) ;
         * fov - 视野角度。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)
         * aspect ratio - 长宽比。也就是你用一个物体的宽除以它的高的值。当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的
         * near，far - 近截面和远截面。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中
         */
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );


        /**
         * 添加立方体
         * 需要一个BoxGeometry（立方体）对象，这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）
         * 我们需要给它一个材质，来让它有颜色。简单起见，我们只设置一个color属性，值为0x00ff00，也就是绿色
         * 我们需要一个Mesh（网格）。 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。
         * PS：(MeshBasicMaterial) 该材质不受光照的影响，不需要光源即可显示出来，设置颜色后，各个面都是同一个颜色。
         */
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        /**
         * 默认情况下，调用scene.add()，物体将会被添加到(0,0,0)坐标
         * 但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可
         * @type {number}
         */
        camera.position.z = 5;

        /**
         * 渲染场景
         * 我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。
         */
        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
            //  让它旋转起来
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
        }

        /**
         * 兼容性检查
         * /jsm/capabilities/WebGL.js 引入文件，并在尝试开始渲染之前先运行该文件
         */
        if (WebGL.isWebGLAvailable()) {
            // Initiate function or other initializations here
            animate();
        } else {
            const warning = WebGL.getWebGLErrorMessage();
            document.getElementById('container').appendChild(warning);
        }
    }
}