threejs
/
18extrudeGeometry.html

<!--本课视频地址 15 -->
<!DOCTYPE html>
<html>

<head>
    <title>动力IT实训-threejs-015</title>
    <meta charset="UTF-8" />
    <!-- <script type="module" charset="UTF-8" src="../../libs/three.js/Three.js"></script> -->
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>

</head>

<body>
    <script type="importmap">
		{
			"imports": {
				"three": "./src/Three.js"
			}
		}
	</script>
    <!--我们将把threejs渲染的效果显示在这个div中-->
    <div id="puiedu-webgl-output">

    </div>

    <div id="myStats"></div>

    <script type="module">

        // import * as THREE from "../../libs/build/three.module.js"
        // import {dat} from "../../libs/dat.gui/dat.gui.js"
        // import {OrbitControls} from "../../libs/three.js/jsm/controls/OrbitControls.js"

        import dat from "./libs/lil-gui.module.min.js";
        import * as THREE from './src/Three.js'
        import { OrbitControls } from "./jsm/controls/OrbitControls.js"
        import { ConvexGeometry } from "./jsm/geometries/ConvexGeometry.js";
        // import { LatheGeometry } from "./src/geometries/LatheGeometry.js";
        import { LatheGeometry } from "three";

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var render = new THREE.WebGLRenderer();
        render.setClearColor(new THREE.Color(0x000000));
        render.setSize(window.innerWidth, window.innerHeight);
        render.shadowMap.enabled = true;

        document.getElementById("puiedu-webgl-output").appendChild(render.domElement);

        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 80;
        camera.lookAt(scene.position);
        scene.add(camera);

        var controls = new OrbitControls(camera, render.domElement);
        controls.update();

        var logoShap = new THREE.Shape()
        logoShap.moveTo(0, 0)
        logoShap.lineTo(34, 0)
        logoShap.lineTo(30, 38)
        logoShap.lineTo(-5, 47)
        logoShap.lineTo(-23, 13)
        logoShap.lineTo(-6, -25)
        logoShap.lineTo(-5, 21)
        logoShap.lineTo(10, 28)
        logoShap.lineTo(25, 10)
        logoShap.lineTo(0, 0)
        var logoGeo = new THREE.ShapeGeometry(logoShap)
        var logoMat = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide })
        var logo2D  = new THREE.Mesh(logoGeo, logoMat)
        scene.add(logo2D)

        var extrudeSetting = {
            steps: 1,
            depth: 1,
            bevelEnable: false,
            bevelThickness: 5,
            bevelSize: -0.1,
            bevelOffset: 0,
            bevelSegments: 3,
        }
        var extrudeGeo = new THREE.ExtrudeGeometry(logoShap, extrudeSetting)
        var extrudeMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true})
        var logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
        scene.add(logo3D)


        var axes = new THREE.AxesHelper(100)
        scene.add(axes)


        var ctrl = new dat()
        var extrudeFolder = ctrl.addFolder(extrudeSetting, "extrude")
        extrudeFolder.add(extrudeSetting, "steps", 0, 10).onChange(() => {
            scene.remove(logo3D)
            extrudeGeo = new THREE.ExtrudeGeometry(logoShap, extrudeSetting)
            extrudeMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe:true})
            logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
            scene.add(logo3D)
        })
        extrudeFolder.add(extrudeSetting, "depth", 0, 10).onChange(() => {
            scene.remove(logo3D)
            extrudeGeo = new THREE.ExtrudeGeometry(logoShap, extrudeSetting)
            extrudeMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe:true})
            logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
            scene.add(logo3D)
        })
        extrudeFolder.add(extrudeSetting, "bevelEnable").onChange(() => {
            scene.remove(logo3D)
            extrudeGeo = new THREE.ExtrudeGeometry(logoShap, extrudeSetting)
            extrudeMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe:true})
            logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
            scene.add(logo3D)
        })
        extrudeFolder.add(extrudeSetting, "bevelThickness", 0, 10).onChange(() => {
            scene.remove(logo3D)
            extrudeGeo = new THREE.ExtrudeGeometry(logoShap, extrudeSetting)
            extrudeMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe:true})
            logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
            scene.add(logo3D)
        })
        extrudeFolder.add(extrudeSetting, "bevelSize", 0, 10).onChange(() => {
            scene.remove(logo3D)
            extrudeGeo = new THREE.ExtrudeGeometry(logoShap, extrudeSetting)
            extrudeMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe:true})
            logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
            scene.add(logo3D)
        })
        extrudeFolder.add(extrudeSetting, "bevelOffset", 0, 10).onChange(() => {
            scene.remove(logo3D)
            extrudeGeo = new THREE.ExtrudeGeometry(logoShap, extrudeSetting)
            extrudeMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe:true})
            logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
            scene.add(logo3D)
        })
        extrudeFolder.add(extrudeSetting, "bevelSegments", 0, 50).onChange(() => {
            scene.remove(logo3D)
            extrudeGeo = new THREE.ExtrudeGeometry(logoShap, extrudeSetting)
            extrudeMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe:true})
            logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
            scene.add(logo3D)
        })

        renderScene();

        function renderScene () {
            controls.update();
            requestAnimationFrame(renderScene);
            render.render(scene, camera);
        }

        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize () {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            render.setSize(window.innerWidth, window.innerHeight);
        }
    </script>

</body>

</html>