ThreeJs

最新推荐文章于 2023-08-03 16:48:12 发布
星时代曹波涛
最新推荐文章于 2023-08-03 16:48:12 发布
阅读量219
点赞数
分类专栏： web前端文章标签： javascript 前端开发语言
本文链接：https://blog.youkuaiyun.com/qq_46213085/article/details/125930398
版权
web前端专栏收录该内容
7 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
    <!-- 引入fbx模型加载库FBXLoader -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/FBXLoader.js"></script>
    <!-- 辅助文件 -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/libs/inflate.min.js"></script>
    <!-- 引入obj模型加载库OBJLoader.js -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/OBJLoader.js"></script>
    <!-- 引入obj模型材质加载库MTLLoader.js -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/MTLLoader.js"></script>

    <!-- <script src="./three.js"></script> -->
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
    <script>
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
        var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
        var material = new THREE.MeshLambertMaterial({
            color: 0x0000ff
        }); //材质对象Material
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        mesh.position.y = 200
        mesh.position.x = 200

        scene.add(mesh); //网格模型添加到场景中


        var axes = new THREE.AxisHelper(20000);
        //将坐标轴添加进场景
        scene.add(axes);

        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);

        var loader = new THREE.FBXLoader();//创建一个FBX加载器
        var boat = null;
        loader.load("m/mkmkmk.FBX", function (obj) {
            // console.log(obj);//查看加载后返回的模型对象
            boat = obj;
            scene.add(obj)
        })
        var g = new THREE.Group()

        loader.load("m/Dragon.FBX", function (obj) {
            // console.log(obj);//查看加载后返回的模型对象
            obj.position.x = 100
            g.add(obj)
            scene.add(g)
        })
        //声明raycaster和mouse变量
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();

        function onMouseClick(event) {

            //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.

            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

            // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
            raycaster.setFromCamera(mouse, camera);

            console.log(scene.children)
            // 获取raycaster直线和所有模型相交的数组集合
            var intersects = raycaster.intersectObjects(scene.children);

            console.log(intersects);

            //将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
            for (var i = 0; i < intersects.length; i++) {

                intersects[i].object.material.color.set(0xff0000);

            }

        }

        window.addEventListener('click', onMouseClick, false);

        var sheep = null;
        var s2 = null;
        var s3 = null;
        var s4 = null;
        var s5 = null;


        var OBJLoader = new THREE.OBJLoader();//obj加载器
        var MTLLoader = new THREE.MTLLoader();//材质文件加载器
        MTLLoader.load('m/Shirley.mtl', function (materials) {
            // 返回一个包含材质的对象MaterialCreator
            console.log(materials);
            //obj的模型会和MaterialCreator包含的材质对应起来
            OBJLoader.setMaterials(materials);
            OBJLoader.load('m/Shirley.obj', function (obj) {
                console.log(obj);
                obj.position.y = 50
                obj.scale.set(100, 100, 100); //放大obj组对象
                sheep = obj;
                scene.add(obj);//返回的组对象插入场景中
                s2 = sheep.clone();
                s2.position.y = 100
                s2.scale.set(100, 100, 100); //放大obj组对象
                scene.add(s2)

                s3 = sheep.clone();
                s3.position.y = 150
                s3.scale.set(100, 100, 100); //放大obj组对象
                scene.add(s3)

                s4 = sheep.clone();
                s4.position.y = 200
                s4.scale.set(100, 100, 100); //放大obj组对象
                scene.add(s4)

                s5 = sheep.clone();
                s5.position.y = 250
                s5.scale.set(100, 100, 100); //放大obj组对象
                scene.add(s5)
            })
        })


        // console.log(scene)

        //console.log(scene.children)
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0x000000, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        //执行渲染操作   指定场景、相机作为参数
        function render() {
            renderer.render(scene, camera);//执行渲染操作
            mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
            if (boat != null) {
                boat.rotateY(-0.01);
            }
            if (sheep != null)
                sheep.rotateY(0.01);
            if (s2 != null)
                s2.rotateY(-0.01);
            if (s3 != null)
                s3.rotateY(0.01);

            if (s4 != null)
                s4.rotateY(-0.01);
            if (s5 != null)
                s5.rotateY(0.01);
            requestAnimationFrame(render);//请求再次执行渲染函数render
        }
        render();
        var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
// 已经通过requestAnimationFrame(render);周期性执行render函数，没必要再通过监听鼠标事件执行render函数
// controls.addEventListener('change', render)
    </script>
</body>

</html>