threejs
/
24meshNormalMaterial.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"


        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 cubeGeo = new THREE.BoxGeometry(20, 20, 20)
        var cubeMat = new THREE.MeshNormalMaterial()
        var cube = new THREE.Mesh(cubeGeo, cubeMat)
        scene.add(cube)

        var dir = new THREE.Vector3(0, 0, 5)
        console.log(dir)
        dir.normalize()
        console.log(dir)
        var origin = new THREE.Vector3(0, 5, 0)
        var length = 30;
        var color = 0xffffff
        var arrowHelper = new THREE.ArrowHelper(dir, origin, length, color)
        cube.add(arrowHelper)

        var sphereGeo = new THREE.SphereGeometry(14, 20, 20)
        var sphereMat = new THREE.MeshNormalMaterial()
        // sphereMat.flatShading = true
        var sphere = new THREE.Mesh(sphereGeo, sphereMat)
        sphere.position.set(40, 0, 0)
        scene.add(sphere)
        var textloader = new THREE.TextureLoader()
        textloader.load("alphaMap.jpg", function (map) {
            sphereMat.bumpMap = map
            // sphereMat.normalMap = map
            sphereMat.bumpScale = 0.5
            sphereMat.displacementMap = map
            sphereMat.displacementScale = 25
            sphereMat.needsUpdate = true
        })


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

        var ctrl = new dat()

        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>