three.js笔记2--添加物体 | Here. There.

// 添加地板
function initFloor() {
    var floorGeo = new THREE.PlaneBufferGeometry(12, 8, 1, 1);
    var floorMaterial = new THREE.MeshBasicMaterial({ color: '#aaaaaa' });
    var floor = new THREE.Mesh(floorGeo, floorMaterial);
    floor.position.set(0, 0, -1);
    scene.add(floor);
}
initFloor();

添加正方体

这里我们简单设计一个生成正方体的函数，当传入路径时则设置为材质的纹理贴图：

// 添加物体
function initCube(imageUrl) {
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material;
    if (imageUrl) {
        material = new THREE.MeshLambertMaterial({
            map: THREE.ImageUtils.loadTexture(imageUrl)
        });
    } else {
        material = new THREE.MeshLambertMaterial();
    }
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    return cube;
}

然后，我们添加几个正方体到场景中：

// 添加物体
var cube1 = initCube('./img/1.jpg');
var cube2 = initCube('./img/2.png');
var cube3 = initCube();
var cube4 = initCube();
cube1.position.set(2, 0, 0);
cube2.position.set(-2, 0, 0);
cube3.position.set(0, -2, 1);
cube4.position.set(1, 1, 3);

这里小伙伴们或许觉得奇怪，为什么正方体是黑色的呢，明明都已经添加材质纹理了呀。

这里我们使用的是Lambert材质，对光学有些了解的我们会知道，若没有光照射的时候，这些物体是没有反射的光，所以我们是看不到它们的颜色的。

而对于地板，由于我们使用的是基本材质。
前面也说过，使用基本材质的物体，渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。故这里我们是可以看到地板的颜色的。

让物体动起来

上一节《three.js笔记1–初始化3D世界》我们也说过，我们在动画渲染的时候可以添加动画处理，这样我们就能看到动画似的效果。

// 让世界动起来
function render() {
    requestAnimationFrame(render);

    // 此处可添加动画处理
    cube1.rotation.x += 0.03;
    cube1.rotation.y += 0.03;

    cube2.rotation.x += 0.02;
    cube3.rotation.y += 0.01;
    cube4.rotation.x -= 0.04;

    renderer.render(scene, camera);
};
render();

这时候我们虽然看不到正方体的颜色，但是我们能看到它们已经动起来了。

完整代码

// 设置场景
var scene = new THREE.Scene();

// 创建正交投影照相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, -5, 2);
camera.lookAt(scene.position);

// 定义着色器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加地板
function initFloor() {
    var floorGeo = new THREE.PlaneBufferGeometry(12, 8, 1, 1);
    var floorMaterial = new THREE.MeshBasicMaterial({ color: '#aaaaaa' });
    var floor = new THREE.Mesh(floorGeo, floorMaterial);
    floor.position.set(0, 0, -1);
    scene.add(floor);
}
initFloor();

// 添加物体
function initCube(imageUrl) {
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material;
    if (imageUrl) {
        material = new THREE.MeshLambertMaterial({
            map: THREE.ImageUtils.loadTexture(imageUrl)
        });
    } else {
        material = new THREE.MeshLambertMaterial();
    }
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    return cube;
}
// 添加物体
var cube1 = initCube('./img/1.jpg');
var cube2 = initCube('./img/2.png');
var cube3 = initCube();
var cube4 = initCube();
cube1.position.set(2, 0, 0);
cube2.position.set(-2, 0, 0);
cube3.position.set(0, -2, 1);
cube4.position.set(1, 1, 3);

// 让世界动起来
function render() {
    requestAnimationFrame(render);

    // 此处可添加动画处理
    cube1.rotation.x += 0.03;
    cube1.rotation.y += 0.03;

    cube2.rotation.x += 0.02;
    cube3.rotation.y += 0.01;
    cube4.rotation.x -= 0.04;

    renderer.render(scene, camera);
};
render();

这节主要讲了在初始化完毕后的3D世界中添加物体，由于Lambert材质的物体为漫反射物体，故我们需要在添加光源之后才能看到它们的效果。下一节将介绍光源的添加。
此处查看项目代码
 此处查看页面效果

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢： https://github.com/godbasin 更欢迎来被删的前端游乐场边撸猫边学前端噢如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处： https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。