ThreeJS学习笔记(二)

---

小插曲 区分坐标轴以及方向

先说结果 ：
从坐标原点出发朝外为正方向
红轴为X轴 ，朝向自己这个方向为X轴负方向
绿轴为Y轴，向上的为Y轴正方向
蓝轴为Z轴，向右的为Z轴正方向

<script type="importmap">
    {
        "imports": {
            "three": "../node_modules/three/build/three.module.js",
            "three/addons/": "../node_modules/three/examples/jsm/",
            "datGui":"../node_modules/dat.gui/build/dat.gui.module.js",
            "SceneUtils":"../node_modules/three/examples/jsm/utils/SceneUtils.js",
            "utils":"../utils/index.js",
            "stats":"../node_modules/three/examples/jsm/libs/stats.module.js"
        }
    }
</script>
<script type="module">
    import {initRenderer, initStats, initCamera, initOrbitControls} from 'utils'
    import {Mesh, MeshBasicMaterial, Scene, SphereGeometry} from 'three'
    import {initAxes} from "../utils";
    import datGui from 'datGui'

    const init = (threeDom) => {
        const scene = new Scene()
        const camera = initCamera(undefined, threeDom)
        const renderer = initRenderer(undefined, threeDom)
        const stats = initStats(undefined, threeDom)
        const orbControls = initOrbitControls(camera, renderer)
        const axes = initAxes()
        scene.add(axes)
        const sphereGeometry = new SphereGeometry(5)
        const sphereMaterial = new MeshBasicMaterial({
            wireframe: true,
            color: 0x00ff00
        })
        const sphere = new Mesh(sphereGeometry, sphereMaterial)
        scene.add(sphere)
        setUpControls(sphere)
        return {scene, stats, orbControls, renderer, camera}
    }

    function setUpControls(sphere) {
        const controls = new function () {
            this.positionX = 0
            this.positionY = 0
            this.positionZ = 0
        }
        const gui = new datGui.GUI()
        gui.add(controls, 'positionX', 0, 10, 0.1).onChange(function (e) {
            sphere.position.set(e, 0, 0)
        })
        gui.add(controls, 'positionY', 0, 10, 0.1).onChange(function (e) {
            sphere.position.set(0, e, 0)
        })
        gui.add(controls, 'positionZ', 0, 10, 0.1).onChange(function (e) {
            sphere.position.set(0, 0, e)
        })
        /**
         * 测试结构：
         *  从坐标原点出发朝外为正方向
         *  红轴为X轴 ，朝向自己这个方向为X轴负方向
         *  绿轴为Y轴，向上的为Y轴正方向
         *  蓝轴为Z轴，向右的为Z轴正方向
         * */
    }

    window.onload = function () {
        const threeDom = document.getElementById('threeDom')
        const {scene, stats, orbControls, renderer, camera} = init(threeDom)

        function render() {
            stats.update()
            orbControls.update()
            requestAnimationFrame(render)
            renderer.render(scene, camera)
        }

        render()
    }
</script>

---

Light

3. 书接上回PointLight、SpotLight、DirectionalLight的区别 他们之间最主要的区别，就是发射光线的方式。如图所示

PointLight：从从特点的一点向所有方向发射光线 SpotLight：从特定的点发射锥形形状的光线 DirectionalLight：从一个二维平面发射光线，光线彼此是平行的。

4. PointLight

PointLight不会产生阴影；常见属性有

属性	描述
color	光源颜色
distance	光源照射的距离。默认值为0，这意味着光的强度不会随着距离增加而减少
intensity	光源照射的强度。默认为1（可以理解为光的亮度）
position	光源在场景中的位置
visibile	true光源打开；false光源关闭
decay /dɪˈkeɪ/	衰减

点光源的distance属性决定了在光线强度变为0之前光线的传播距离。 pointLight.distance = 14,光线在距离14的地方慢慢地减少为0. pointLight.distance = 0，这意味着光的强度不会随着距离增加而减少