shader202103032130
/
1.发光-gltf.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Three.js中文网：http://www.webgl3d.cn/</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.100.0/examples/js/loaders/GLTFLoader.js"></script>
</head>

<body>
    <!-- 为了授课方便，把渲染器、光源等代码单独放在frame.js文件中 -->
    <script src="./frame.js"></script>
    <!-- 顶点着色器 -->
    <script id="vertexShaderSun" type="x-shader/x-vertex">
        uniform vec3 viewVector;
        varying float intensity;
        void main() {
            gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
            vec3 actual_normal = vec3(modelMatrix * vec4(normal, 0.0));
            intensity = pow( dot(normalize(viewVector), actual_normal), 3.0 );

        }
    </script>
    <script id="fragmentShaderSun" type="x-shader/x-vertex">
        varying float intensity;
        void main() {
            vec3 glow = vec3(0, 1, 0) * intensity;
            gl_FragColor = vec4( glow, 1.0 );
        }
    </script>
    <script>
        let geometry = new THREE.BoxGeometry(10, 3);
        let material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });
        let object = new THREE.Mesh(geometry, material);

        let glowMaterial = new THREE.ShaderMaterial({
            uniforms: {
                viewVector: {
                    type: "v3",
                    value: camera.position
                }
            },
            vertexShader: document.getElementById('vertexShaderSun').textContent,
            fragmentShader: document.getElementById('fragmentShaderSun').textContent,
            side: THREE.FrontSide,
            blending: THREE.AdditiveBlending,
            transparent: true
        });
        // console.log(document.getElementById('vertexShaderSun').textContent)
        // console.log(document.getElementById('fragmentShaderSun').textContent)

        let glowGeometry = new THREE.BoxGeometry(12, 5);
        let glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
        object.add(glowMesh);
        object.glow = glowMesh;
        scene.add(object);

        var loader = new THREE.GLTFLoader();
        loader.load('./carlightback.glb', function (gltf) {
            //console.log(collada.gltf.length);
            mesh = gltf.scene;
            mesh.children.forEach(function(child) {
                // console.log(child)
                child.material = glowMaterial;
                // child.layers.enable(1);

            })
            // mesh.material = new THREE.MeshPhongMaterial({});
            console.log(mesh)
            scene.add(mesh);
        });


        function render() {
            // console.log(glowMesh.getWorldPosition())
            let viewVector = new THREE.Vector3().subVectors(camera.position, glowMesh.getWorldPosition());
            // console.log(viewVector)
            glowMesh.material.uniforms.viewVector.value = viewVector;
            renderer.render(scene, camera);
            requestAnimationFrame(render);
            // console.log(camera.position)
        }
        render();
    </script>

</body>

</html>