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(0,100,0)
图二相机位置camera.position.set(5,120,50)

相机位置坐标: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);