3Dweb渲染初学者的几个小问题

辅助坐标系的问题

var axesHelper = new THREE.AxesHelper( 10000 );

刚初始化坐标系后在浏览器里面看到的不是立体图形，可能只有一条线或者两条，并不是立体的，这个时候就要检查自己的照相机参数设置了，camera的参数影响整个视觉，举个例子：

   var camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
       camera.position.set(5,120,50);
        camera.up.set(0,1,0)
        camera.lookAt(0, 0, 0)

在上述PerspectiveCamera参数中，45即为相机的看向物体的张角，第二个参数一般针对于当前浏览器的或者画布的比值，最后两参数即为最近和最远距离看向物体的。有了这些参数后，就可以进行第二步即相机位置、当前环境坐标系类型、看向的点的设定了。

相机位置确定 ： camera.position.set(0,100,0);如果只设定成这样的话，那第一眼在浏览器出现的场景并不是立体的，还需要手动去旋转才能看到立体场景，比如前面提到的坐标系只看到两条线。如果想要立体效果则需要三个参数均设置，（x,y,z）三个参数均有值则就相当于在当前三维坐标系中x或者z不为0的8卦限中的场景，这样看到的物体才会立体。

相机位置坐标:camera.position.set(0,100,0)
相机位置坐标:camera.position.set(5,120,50);

坐标系的确定： camera.up.set(0,1,0) 简单一句话：哪个参数为1那么坐标系的竖直方向就是谁，比如现在的就是y轴在竖直方向，依据右手定则可以在浏览器中看到的坐标系颜色绿色的在竖直方向（RGB：red green blue 分别是xyz）

相机看向哪个点呢： camera.lookAt(0, 0, 0) 原点，即坐标系的中心

纹理贴图（双面贴图问题）

贴图代码 如下：

 const url = "https://wangsr-oss-files.oss-cn-beijing.aliyuncs.com/images/%E5%85%A8%E6%99%AF/roberto-nickson-rEJxpBskj3Q-unsplash.jpg";
            var geometry = new THREE.BoxGeometry(100, 80, 80); 
            var material;
           // 初始化一个加载器
                var loader = new THREE.TextureLoader();
                // 加载一个资源
                loader.load(
                    // 资源URL
                    url,
                    // onLoad回调
                    function ( texture ) {
                        // in this example we create the material when the texture is loaded
                         material = new THREE.MeshBasicMaterial( { 
                            map: texture
                        } );
                         //双面渲染
                         material.side = THREE.DoubleSide;
                         var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
                         scene.add(mesh);
                          //点光源
                          var spotLight = new THREE.SpotLight(0xffffff);
                          spotLight.position.set(-40, 60, -10);
                          spotLight.castShadow = true;
                          scene.add(spotLight);
                    },
                    undefined,
                    // onError回调
                    function ( err ) {
                        console.error( 'An error happened.' );
                    }
                );   

演示：注意代码： material.side = THREE.DoubleSide; //双面渲染 如果不设定这个参数，那么当相机位置设置为camera.position.set(-2,0,0);//即相机在物体内部时，看到的东西就只有空当当的坐标系了

纹理贴图外部 纹理贴图内部

加载3D模型点光源的设置

如果不设置点光源或者点光源设置位置不合适，那么看到的模型效果就是一团漆黑

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);

源代码

github地址： 源码