第三章设置物体光照

<template>
    <div>
        <canvas id="c"></canvas>
    </div>
</template>

<script setup>
import * as THREE from 'three';
import {onMounted} from "vue";

onMounted(()=>{
    main()
})
let cube,renderer,scene, camera
const main = () => {
  let canvas = document.querySelector('#c')
    // Three.js需要使用这个canvas标签来绘制，所以我们要先获取它然后传给three.js。
     renderer = new THREE.WebGLRenderer({antialias:true,canvas})
    let fov = 75
    let aspect = 2
    let near = 0.1
    let far = 5
    // 视锥体得范围为near0.1和far0.5
     camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
    // z = 2。它朝向Z轴负方向，z的值范围应在near和far之间
    camera.position.z = 2;
    // 然后我们创建一个场景(Scene)。场景(Scene)是three.js的基本的组成部分。需要three.js绘制的东西都需要加入到scene中
     scene = new THREE.Scene()

    // 设置光照
//     平行光有一个位置和目标点。默认值都为(0, 0, 0)。我们这里 将灯光的位置设为(-1, 2, 4)，让它位于摄像机前面稍微左上方一点的地方。目标点还是(0, 0, 0)，让它朝向坐标原点方向。
//
    const color = 0xFFFFFF;
    const intensity = 5;
    const light = new THREE.DirectionalLight( color, intensity );
    light.position.set( - 1, 2, 4 );//三个参数分别代表xyz
    scene.add( light );

    // 然后创建一个包含盒子信息的立方几何体(BoxGeometry)。几乎所有希望在three.js中显示的物体都需要一个包含了组成三维物体的顶点信息的几何体。
    let boxWidth = 1
    let boxHeight = 1
    let boxDepth = 1
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    // 然后创建一个基本的材质并设置它的颜色. 颜色的值可以用css方式和十六进制来表示。
    // 我们还需要改变下立方体的材质。MeshBasicMaterial材质不会受到灯光的影响。我们将他改成会受灯光影响的MeshPhongMaterial材质
    // let material = new THREE.MeshBasicMaterial({color: 0x44aa88})
    let material = new THREE.MeshPhongMaterial({color: 0x44aa88})
    // 再创建一个网格(Mesh)对象，它包含了：

    // 几何体(Geometry)(物体的形状)
    // 材质(Material)(如何绘制物体，光滑还是平整，什么颜色，什么贴图等等)
    // 对象在场景中相对于他父对象的位置、朝向、和缩放。下面的代码中父对象即为场景对象。
     cube = new THREE.Mesh(geometry, material);
    // 最后我们将网格添加到场景中。
    scene.add(cube)

    requestAnimationFrame(render)
}

const render=(time)=> {
    time *= 0.001;  // 将时间单位变为秒
    cube.rotation.x = time;
    cube.rotation.y = time;
    // 之后将场景和摄像机传递给渲染器来渲染出整个场景。
    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

</script>

<style lang="scss" scoped>

</style>