56. Three.js案例-创建一个包含点光源和旋转立方体的3D场景

实现效果

本案例展示了Three.js中如何创建一个带有点光源的场景，并在该场景中添加一个旋转的立方体。通过点光源辅助线，可以直观地看到光源的位置和影响范围。

知识点

WebGLRenderer (WebGL渲染器)

用于将Three.js场景渲染到网页上。

构造器

WebGLRenderer( parameters : Object )

参数	类型	描述
antialias	Boolean	是否开启抗锯齿，默认值为false。

方法

setSize(width, height)：设置渲染器输出的宽度和高度。

Scene (场景)

用于存放所有物体、灯光等元素。

属性

background：设置场景的背景颜色或纹理。

PerspectiveCamera (透视相机)

模拟人眼视角，近大远小。

构造器

PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Float	视野角度（单位：度）。
aspect	Float	宽高比。
near	Float	近裁剪面距离。
far	Float	远裁剪面距离。

方法

lookAt(vector)：使相机看向指定位置。
updateProjectionMatrix()：更新投影矩阵。

PointLight (点光源)

从一个点向四周发射光线，模拟灯泡效果。

构造器

PointLight(color, intensity, distance, decay)

参数	类型	描述
color	Color	光源颜色。
intensity	Float	强度，默认值为1.0。
distance	Float	光照距离，默认值为0（无限远）。
decay	Float	衰减系数，默认值为1.0。

PointLightHelper (点光源辅助线)

用于可视化点光源的影响范围。

构造器

PointLightHelper(light, size, color)

参数	类型	描述
light	PointLight	所属点光源。
size	Float	辅助线大小，默认值为1。
color	Color	颜色，默认值为白色。

BoxGeometry (立方体几何体)

用于创建立方体形状。

构造器

BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

参数	类型	描述
width	Float	宽度，默认值为1。
height	Float	高度，默认值为1。
depth	Float	深度，默认值为1。
widthSegments	Int	宽度分段数，默认值为1。
heightSegments	Int	高度分段数，默认值为1。
depthSegments	Int	深度分段数，默认值为1。

MeshPhongMaterial (网格材质)

用于创建具有Phong光照模型的材质。

构造器

MeshPhongMaterial(parameters)

参数	类型	描述
map	Texture	纹理贴图。

代码

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>
    // 创建渲染器，并开启抗锯齿处理
    var myRenderer = new THREE.WebGLRenderer({antialias: true});

    // 设置渲染器的大小为窗口的宽度和高度
    myRenderer.setSize(window.innerWidth, window.innerHeight);

    // 将渲染器的DOM元素添加到ID为"myContainer"的HTML元素中
    $("#myContainer").append(myRenderer.domElement);

    // 创建一个新的Three.js场景
    var myScene = new THREE.Scene();

    // 设置场景的背景颜色为白色
    myScene.background = new THREE.Color('white');

    // 创建一个透视相机，设置其视野角度、长宽比、近裁剪面和远裁剪面
    var myCamera = new THREE.PerspectiveCamera(75,
        window.innerWidth / window.innerHeight, 0.1, 1000);

    // 设置相机的位置并看向原点
    myCamera.position.set(160.51, 158.71, 127.6);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));
    myCamera.updateProjectionMatrix();

    // 添加到场景中
    myScene.add(myCamera);

    // 创建并添加THREE.PointLight光源
    var myPointLight = new THREE.PointLight('lightgreen');
    myPointLight.position.set(0, 100, 100);
    myScene.add(myPointLight);

    // 绘制THREE.PointLight光源辅助线
    var myPointLightHelper = new THREE.PointLightHelper(myPointLight, 50, 'green');
    myScene.add(myPointLightHelper);

    // 创建立方体
    var myBoxGeometry = new THREE.BoxGeometry(50, 50, 50);
    var myMap = THREE.ImageUtils.loadTexture("images/img002.jpg");
    var myMaterial = new THREE.MeshPhongMaterial({map: myMap});
    var myMesh = new THREE.Mesh(myBoxGeometry, myMaterial);
    myMesh.translateX(100);
    myScene.add(myMesh);

    // 渲染立方体
    animate();

    function animate() {
        requestAnimationFrame(animate);
        myMesh.rotation.x += 0.01;
        myMesh.rotation.y += 0.01;
        myMesh.rotation.z += 0.01;
        myRenderer.render(myScene, myCamera);
    };
</script>
</body>
</html>

演示链接

示例链接