threejs学习笔记-03

Posted weixin_43739821

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了threejs学习笔记-03相关的知识,希望对你有一定的参考价值。

11.SphereGeometry球体与球体属性控制

<!DOCTYPE html>
<html>

<head>
    <title>threejs</title>
    <meta charset="UTF-8" />
    <style>
        body 
            margin: 0;
            overflow: hidden;
        
    </style>

</head>

<body>
    <div id="webgl-output">

    </div>

    <div id="myStats"></div>

    <script type="module">
        import * as THREE from "../../libs/build/three.module.js"
        import  dat  from "../../libs/dat.gui/dat.gui.js"
        import  GLTFLoader  from "../../libs/three.js/jsm/loaders/GLTFLoader.js"
        import  OrbitControls  from "../../libs/three.js/jsm/controls/OrbitControls.js"


        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var render = new THREE.WebGLRenderer();
        render.setClearColor(new THREE.Color(0x000000));
        render.setSize(window.innerWidth, window.innerHeight);
        render.shadowMap.enabled = true;

        document.getElementById("webgl-output").appendChild(render.domElement);

        var axes = new THREE.AxesHelper(50);
        scene.add(axes);

        //loadModel();


        var planeGeometry = new THREE.PlaneGeometry(100, 100);
        var planeMaterial = new THREE.MeshLambertMaterial( color: 0xAAAAAA );
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotation.x = -0.5 * Math.PI;
        plane.position.set(15, 0, 0);
        plane.receiveShadow = true;

        //scene.add(plane);

        camera.position.x = -5;
        camera.position.y = 5;
        camera.position.z = 5;
        camera.lookAt(scene.position);
        scene.add(camera);

        var spotLight = new THREE.SpotLight(0xFFFFFF);
        spotLight.position.set(-60, 30, -65);
        spotLight.castShadow = true;
        spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
        spotLight.shadow.camera.far = 130;
        spotLight.shadow.camera.near = 40;
        // scene.add(spotLight);           

        var ambienLight = new THREE.AmbientLight(0xcccccc);
        // scene.add(ambienLight); 


        const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
        directionalLight.castShadow = true;
        directionalLight.shadow.mapSize.width = 2048;
        directionalLight.shadow.mapSize.height = 2048;
        directionalLight.position.set(20, 20, 20);
        scene.add(directionalLight);

        //下面介绍SphereGeometry球体,其非常灵活,可以用来创建所有和球体相关的集合
        //它有7个构造参数,第一个表示球体半径默认为1,第二个构造参数表示水平分段数默认为32最小为3,第三个表示垂直分段数默认值为16最小为2
        //第四个表示水平起始角度默认值为0,第五个表示水平扫描角度的大小默认值为2π,第六个表示垂直起始角度,默认值为0,第七个构造参数表示垂直扫描角度大小默认为π
        //看文字很难理解 我们还是用dat.GUI库来测试方便理解,同时让图形的wireframe属性为真,让图形渲染成线框更方便我理解
        var sphereGeo = new THREE.SphereGeometry();
        var sphereMat = new THREE.MeshBasicMaterial( color: 0xffffff, wireframe: true );
        var sphere = new THREE.Mesh(sphereGeo, sphereMat);
        scene.add(sphere);

        var ctrlObj = //稳了更好的了解点球的属性,我们依然和之前一样通过dat.GUI来进行属性的控制
            radius: 3,
            widthSegments: 32,
            heightSegments: 16,
            phiStart: 0,
            phiLength: Math.PI * 2.0,
            thetaStart: 0,
            thetaLength: Math.PI,
        ;

        var ctrl = new dat.GUI();//创建dat.GUI对象
        var sphereFolder = ctrl.addFolder("sphere");//通过该对象创建一个分组
        //这里注意不能直接修改球体的半径!!!需要在回调函数中删除原来的图形,再新建一个修改参数后的平面并添加到场景中就可以了!
        sphereFolder.add(ctrlObj, "radius", 1, 100).onChange(function (e) 
            scene.remove(sphere);
            sphereGeo = new THREE.SphereGeometry(ctrlObj.radius, ctrlObj.widthSegments, ctrlObj.heightSegments, ctrlObj.phiStart, ctrlObj.phiLength, ctrlObj.thetaStart, ctrlObj.thetaLength);
            sphere = new THREE.Mesh(sphereGeo, sphereMat);
            scene.add(sphere);
        );
        sphereFolder.add(ctrlObj, "widthSegments", 3, 100).onChange(function (e) 
            scene.remove(sphere);
            sphereGeo = new THREE.SphereGeometry(ctrlObj.radius, ctrlObj.widthSegments, ctrlObj.heightSegments, ctrlObj.phiStart, ctrlObj.phiLength, ctrlObj.thetaStart, ctrlObj.thetaLength);
            sphere = new THREE.Mesh(sphereGeo, sphereMat);
            scene.add(sphere);
        );
        sphereFolder.add(ctrlObj, "heightSegments", 2, 100).onChange(function (e) 
            scene.remove(sphere);
            sphereGeo = new THREE.SphereGeometry(ctrlObj.radius, ctrlObj.widthSegments, ctrlObj.heightSegments, ctrlObj.phiStart, ctrlObj.phiLength, ctrlObj.thetaStart, ctrlObj.thetaLength);
            sphere = new THREE.Mesh(sphereGeo, sphereMat);
            scene.add(sphere);
        );
        sphereFolder.add(ctrlObj, "phiStart", 0, Math.PI * 2.0).onChange(function (e) 
            scene.remove(sphere);
            sphereGeo = new THREE.SphereGeometry(ctrlObj.radius, ctrlObj.widthSegments, ctrlObj.heightSegments, ctrlObj.phiStart, ctrlObj.phiLength, ctrlObj.thetaStart, ctrlObj.thetaLength);
            sphere = new THREE.Mesh(sphereGeo, sphereMat);
            scene.add(sphere);
        );
        sphereFolder.add(ctrlObj, "phiLength", 0, Math.PI * 2.0).onChange(function (e) 
            scene.remove(sphere);
            sphereGeo = new THREE.SphereGeometry(ctrlObj.radius, ctrlObj.widthSegments, ctrlObj.heightSegments, ctrlObj.phiStart, ctrlObj.phiLength, ctrlObj.thetaStart, ctrlObj.thetaLength);
            sphere = new THREE.Mesh(sphereGeo, sphereMat);
            scene.add(sphere);
        );
        sphereFolder.add(ctrlObj, "thetaStart", 0, Math.PI).onChange(function (e) 
            scene.remove(sphere);
            sphereGeo = new THREE.SphereGeometry(ctrlObj.radius, ctrlObj.widthSegments, ctrlObj.heightSegments, ctrlObj.phiStart, ctrlObj.phiLength, ctrlObj.thetaStart, ctrlObj.thetaLength);
            sphere = new THREE.Mesh(sphereGeo, sphereMat);
            scene.add(sphere);
        );
        sphereFolder.add(ctrlObj, "thetaLength", 0, Math.PI).onChange(function (e) 
            scene.remove(sphere);
            sphereGeo = new THREE.SphereGeometry(ctrlObj.radius, ctrlObj.widthSegments, ctrlObj.heightSegments, ctrlObj.phiStart, ctrlObj.phiLength, ctrlObj.thetaStart, ctrlObj.thetaLength);
            sphere = new THREE.Mesh(sphereGeo, sphereMat);
            scene.add(sphere);
        );



        var controls = new OrbitControls(camera, render.domElement);
        controls.update();

        renderScene();

        function renderScene() 

            controls.update();

            requestAnimationFrame(renderScene);
            render.render(scene, camera);
        

        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() 
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            render.setSize(window.innerWidth, window.innerHeight);
        

        function loadModel() 
            new GLTFLoader().setPath("model/")
                .load("untitled.glb", function (gltf) 
                    gltf.scene.scale.set(0.01, 0.01, 0.01);
                    gltf.scene.traverse(function (object) 
                        if (object.isMesh)
                            object.castShadow = true;
                    );

                    scene.add(gltf.scene);
                )
        
    </script>

</body>

</html>


12.ConvexGeometry凸面几何体

<!DOCTYPE html>
<html>

<head>
    <title>threejs</title>
    <meta charset="UTF-8" />
    <style>
        body 
            margin: 0;
            overflow: hidden;
        
    </style>

</head>

<body>
    <div id="webgl-output">

    </div>

    <div id="myStats"></div>

    <script type="module">
        import * as THREE from "../../libs/build/three.module.js"
        import  dat  from "../../libs/dat.gui/dat.gui.js"
        import  Stats  from "../../libs/Stats/Stats.js"
        import  GLTFLoader  from "../../libs/three.js/jsm/loaders/GLTFLoader.js"
        import  OrbitControls  from "../../libs/three.js/jsm/controls/OrbitControls.js"
        //导入ConvexGeometry
        import  ConvexGeometry  from "../../libs/three.js/jsm/geometries/ConvexGeometry.js"

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var render = new THREE.WebGLRenderer();
        render.setClearColor(new THREE.Color(0x000000));
        render.setSize(window.innerWidth, window.innerHeight);
        render.shadowMap.enabled = true;

        document.getElementById("webgl-output").appendChild(render.domElement);

        var axes = new THREE.AxesHelper(500);
        scene.add(axes);

        //loadModel();

        var planeGeometry = new THREE.PlaneGeometry(100, 100);
        var planeMaterial = new THREE.MeshLambertMaterial( color: 0xAAAAAA );
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotation.x = -0.5 * Math.PI;
        plane.position.set(15, 0, 0);
        plane.receiveShadow = true;

        //scene.add(plane);

        camera.position.x = -5;
        camera.position.y = 5;
        camera.position.z = 5;
        camera.lookAt(scene.position);
        scene.add(camera);


        var ambienLight = new THREE.AmbientLight(0xcccccc);
        // scene.add(ambienLight); 

        const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
        directionalLight.castShadow = true;
        directionalLight.shadow.mapSize.width = 2048;
        directionalLight.shadow.mapSize.height = 2048;
        directionalLight.position.set(20, 20, 20);
        scene.add(directionalLight);

        //学习一下ConvexGeometry凸面几何体,threejs标准库里没有包含这种高级几何体,我们需要import他们
        //通过ConvexGeometry,我们可以围绕一组点创建一个凸包,所谓凸包,就是包围这组点的最小图形,那么我们先要创建一组点
        var convexPoints = [];
        for (var i = 0; i < 20; i++) //写个20次的循环,每次生成三个范围-20到20的随机数
            var x = Math.random() * 40 - 20;
            var y = Math.random() * 40 - 20;
            var z = Math.random() * 40 - 20;
            convexPoints.push(new THREE.Vector3(x, y, z));//并组成三维坐标放入点的数组中  
        ;//为了能够直接看到这些点的位置,我们需要遍历数组,在每个点的位置创建一个红色的球体
        convexPoints.forEach(function (convexPoint) 
            var convexSphereGeo = new THREE.SphereGeometry(0.3);
   

以上是关于threejs学习笔记-03的主要内容,如果未能解决你的问题,请参考以下文章

threejs学习笔记-03

threejs学习笔记-03

threejs学习笔记-03

THREEJS案例-天空盒和草地

threejs学习笔记03---网格

threejs深究动画,纹理,control等