辅助坐标系的问题
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);
评论区