webgl three入门基础

页面节点

<style>
    body {
        margin: 0;
    }
</style>
<div id="threemap" style="width:100%;height:100%;"></div>

添加引用

<script type="importmap">
    {
    "imports": {
    "three": "../lib/build/three.module.js",
    "three/addons/": "./lib/jsm/"
    }
    }
</script>

基础功能代码

<script type="module">
    import * as THREE from 'three';
    var dom = document.getElementById("threemap");
    var displayWidth = dom.clientWidth;
    var displayHeight = dom.clientHeight;
    ///创建场景
    var scene = new THREE.Scene();

    //几何体分为
    //长方体
    const geometry1 = new THREE.BoxGeometry(100, 100, 100);
    //圆柱体
    const geometry2 = new THREE.CylinderGeometry(50, 50, 100);
    //球体
    const geometry3 = new THREE.SphereGeometry(100);
    //圆锥体
    //    radius： 圆锥体底部的半径；
    //height： 圆锥体的总高度；
    //radialSegments（径向分段数）： 圆锥体周围的圆环部分的分段数；
    //heightSegments（高度分段数）： 圆锥体的高度上的分段数；
    //openEnded（是否开口）： 一个布尔值，指示圆锥体是否是开口的，如果为 true，则表示开口；
    //thetaStart（起始角度）： 圆锥体的起始角度，用弧度表示；
    //thetaLength（角度范围）： 圆锥体的角度范围，用弧度表示。
    const geometry4 = new THREE.ConeGeometry(1, 10, 100, 200);
    //矩形平面
    const geometry5 = new THREE.PlaneGeometry(100, 50);
    //圆平面
    const geometry6 = new THREE.CircleGeometry(50);

    //材质  默认只有正面可见 side: THREE.FrontSide,可以设置为 THREE.DoubleSide THREE.BackSide
    /