Three.js--关于立体图像的设置

最新推荐文章于 2024-08-22 16:29:40 发布

三知之灵

最新推荐文章于 2024-08-22 16:29:40 发布

阅读量1.9k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/tjj3027/article/details/81984447

版权

前端专栏收录该内容

53 篇文章 4 订阅

订阅专栏

问题
当物体正常展示后，设置为实体展示，却无法显示出立体的效果来，按照给出的MeshLambertMaterial材料设置的例子反复尝试都不成功

这里写图片描述

实例

var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
var meshMaterial = new THREE.MeshLamebertMaterial({color: 0x7777ff});
var cube = new THREE.Mesh(cubeGeometry, meshMaterial);

仅仅是展示出实体，但是颜色完全一样。
物体显示出立体效果是因为光线使物体不同面的明暗不是完全相同或者不同面采用不同的颜色，可以打造出立体的物体。
因此需要光源使得物体出现明暗不同的层次

添加光源

var light = new THREE.DirectionalLight( 0xffff00, 0.35 );
light.position.set( 1, 1, 1 ).normalize();
scene.add( light );

该光源是平行光，此时物体已经有明暗的区分
这里写图片描述
颜色属于暗色调，添加全局性光源

scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );

添加一个全局性的光源，调整整个物体的亮度
这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="/js/3d/three.js"></script>
        <style>
            body {
                margin: 0;
            }

            canvas {
                width: 100%;
                height: 100%
            }
        </style>
    </head>

    <body>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 0, 50);
            camera.lookAt(new THREE.Vector3(0, 0, 0))

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0xcecece, 1); // 设置默认背景色
            document.body.appendChild(renderer.domElement);
            //光的颜色被应用到全局范围内的所有对象。
            scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
            //立体化
            var light = new THREE.DirectionalLight( 0xffff00, 0.35 );
            light.position.set( 1, 1, 1 ).normalize();
            scene.add( light );

            var geometry = new THREE.BoxGeometry(1, 1, 1);
            //由于 角度层（ANGLE layer）的限制，在Windows平台上使用 WebGL，线宽将总是为1而不管设置的值。
            var material = new THREE.MeshLambertMaterial({
                color: 0x00ff00,
            });

            var cube = new THREE.Mesh(geometry, material);
            cube.position.set(0, 0, 20)
            scene.add(cube);

            var interval = 10;
            var animate = function() {
                requestAnimationFrame(animate);
                interval--
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                if(interval == 0) {
                    interval = 10;
                    var far = camera.position.z;
                    if(far == 0) {
                        cube.rotation.x=0;
                        cube.rotation.y=0;
                        far =50;
                    }
                    far--;
                    camera.position.z = far
                    renderer.render(scene, camera);
                }

            };
            animate();
        </script>
    </body>

</html>