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);