three.js--简单的三维场景

本文介绍了使用three.js创建一个简单的三维场景,包括立方体几何对象、Lambert网格材质、环境光、正交相机设置以及WebGL渲染器的使用。通过调整相机的position和lookAt,实现3D视角的控制。最后提供了运行代码示例及学习资源链接。
摘要由CSDN通过智能技术生成

1.创建一个立方体几何对象Geometry

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry

2.材质对象Material
Lambert网格材质(MeshLambertMaterial)一种非光泽表面的材质,没有镜面高光。

var material = new THREE.MeshLambertMaterial({
   
      color: 0xffffff
    }); //材质对象Material

3.光源设置
AmbientLight环境光会均匀的照亮场景中的所有物体。环境光不能用来投射阴影,因为它没有方向。

    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

4.相机设置
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

 /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值