threejs
/
26zhuoseqi.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 dat from "./libs/lil-gui.module.min.js";
        import * as THREE from './src/Three.js'
        import { OrbitControls } from "./jsm/controls/OrbitControls.js"
        import { OBJLoader } from "./jsm/loaders/OBJLoader.js";


        var scene = new THREE.Scene();
        scene.background = new THREE.Color(0x333333)
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.x = 50;
        camera.position.y = 50;
        camera.position.z = 50;
        camera.lookAt(scene.position);
        scene.add(camera);

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

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

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

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

        var planeGeo = new THREE.PlaneGeometry(100, 100)
        var planeMat = new THREE.MeshLambertMaterial({ color: 0xAAAAAA })
        var plane = new THREE.Mesh(planeGeo, planeMat)
        plane.rotation.x = -0.5 * Math.PI
        plane.position.set(15, 0, 0)
        plane.reciverShadow = true
        scene.add(plane)

        //标准材质
        // var material = new THREE.MeshStandardMaterial({ color: 0x7777ff })
        //物理材质
        var material = new THREE.MeshPhysicalMaterial({ color: 0x7777ff })
        var props = {
            color: material.color.getStyle(),
            emissive: material.emissive.getStyle()
        }
        function loadModel (material) {
            var loader = new OBJLoader()
            loader.load("tree.obj", function (loadedMesh) {
                loadedMesh.children.forEach(item => {
                    item.material = material
                })
                loadedMesh.scale.set(100, 100, 100);
                scene.add(loadedMesh)
            })
        }
        loadModel(material)


        var spotLight = new THREE.SpotLight(0xffffff)
        spotLight.position.set(0, 60, 60)
        spotLight.castShadow = true
        spotLight.intensity = 0.6
        scene.add(spotLight)

        // var ambientLight = new THREE.AmbientLight(0xffffff)
        // scene.add(ambientLight)

        var ctrl = new dat()
        var meshStandardMaterialFolder = ctrl.addFolder("MeshStandardMaterial")
        meshStandardMaterialFolder.addColor(props, "color").onChange((e) => {
            material.color.setStyle(e)
        })
        meshStandardMaterialFolder.addColor(props, "emissive").onChange((e) => {
            // material.emissive = new THREE.Color(e)
            material.emissive.setStyle(e)
        })
        // 标准材质
        meshStandardMaterialFolder.add(material, "metalness", 0, 1)
        meshStandardMaterialFolder.add(material, "roughness", 0, 1)
        meshStandardMaterialFolder.add(material, "wireframe")
        meshStandardMaterialFolder.add(material, "wireframeLinewidth", 0, 20)
        // 物理材质
        meshStandardMaterialFolder.add(material, "clearcoat", 0, 1)
        meshStandardMaterialFolder.add(material, "clearcoat", 0, 1)
        meshStandardMaterialFolder.add(material, "reflectivity", 0, 1)
        // meshStandardMaterialFolder.close()


        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>