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

实现效果

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

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

知识点

WebGLRenderer (WebGL渲染器)

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

构造器

WebGLRenderer( parameters : Object )

方法

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

Scene (场景)

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

属性

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

PerspectiveCamera (透视相机)

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

构造器

PerspectiveCamera(fov, aspect, near, far)

方法

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

PointLight (点光源)

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

构造器

PointLight(color, intensity, distance, decay)

PointLightHelper (点光源辅助线)

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

构造器

PointLightHelper(light, size, color)

BoxGeometry (立方体几何体)

用于创建立方体形状。

构造器

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

MeshPhongMaterial (网格材质)

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

构造器

MeshPhongMaterial(parameters)

代码

<!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>

演示链接

示例链接

MossGrower