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地址： 源码
发表评论 (审核通过后显示评论)：