html vue 3D之Three.js（第二节）

最新推荐文章于 2024-09-03 09:05:07 发布

加金开发

最新推荐文章于 2024-09-03 09:05:07 发布

阅读量496

点赞数

分类专栏：前端-3D 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_33131171/article/details/125899106

版权

前端-3D 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一节：html vue 3D之Three.js（第一节）_加金开发的博客-CSDN博客

实列模型下载：https://download.csdn.net/download/qq_33131171/86246792

前面已近实现了加载obj的模型代码如下：

代码中包含了各种格式的模型-如果加载看不到模型，

1：相机位置

2：是否加载成功

3：相关的依赖是否引入

4：模型错误-更换模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {margin: 0;}
    canvas {width: 100%; height: 100% }
</style>
<body>
<div id="info">

</div>
</body>
<!--关键组件 必不可少-->
<script src="./js/build/three.js"></script>
<!--鼠标键盘 监听移动 OrbitControls-->
<script src="./js/examples/js/controls/OrbitControls.js"></script>

<!--加载OBJ格式模型库   OBJLoader-->
<!--加载mtl格式模型库   MTLLoader-->
<script src="./js/examples/js/loaders/MTLLoader.js"></script>
<script src="./js/examples/js/loaders/OBJLoader.js"></script>

<!-- 引入fbx模型加载库FBXLoader -->
<script src="./js/examples/js/loaders/FBXLoader.js"></script>
<!-- 辅助文件 -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/libs/inflate.min.js"></script>
<script>
    /**
     * 创建一个场景
     */
    var scene = new THREE.Scene();//
    /**
     * 测试场景 在场景中画一个3D
     */
    // 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
    // scene.add(mesh);

    /**
     * 辅助坐标系 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
     */
        //
    // var axisHelper = new THREE.AxisHelper(20);
    // scene.add(axisHelper);
    /**
     *  点光源2  位置和point关于原点对称
     */
    // var point2 = new THREE.PointLight(0xffffff);
    // point2.position.set(400, -200, -300); //点光源位置
    // scene.add(point2); //点光源添加到场景中

    /**
     * 光源设置
     */
    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 width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 2000; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 2000);
    camera.position.set(50, 300, 400); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 透视投影相机设置
     */
    // var width = window.innerWidth; //窗口宽度
    // var height = window.innerHeight; //窗口高度
    // /**透视投影相机对象*/
    // var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
    // camera.position.set(200, 300, 200); //设置相机位置
    // camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
    /**
     * 监听移动
     */
    function render() {
        renderer.render(scene,camera);//执行渲染操作
    }
    render();
    var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
    controls.addEventListener('change', render);//监听鼠标、键盘事件

    /**
     * OBJ和材质文件mtl加载
     */
    // var OBJLoader = new THREE.OBJLoader();//obj加载器
    // var MTLLoader = new THREE.MTLLoader();//材质文件加载器
    // MTLLoader.load('./model/c/Anna_OBJ.mtl', function(materials) {
    //     // 返回一个包含材质的对象MaterialCreator
    //     console.log(materials);
    //     //obj的模型会和MaterialCreator包含的材质对应起来
    //     OBJLoader.setMaterials(materials);
    //     OBJLoader.load('./model/c/Anna_OBJ.obj', function(obj) {
    //         console.log(obj);
    //         obj.scale.set(10000, 10000, 10000); //放大obj组对象
    //         scene.add(obj);//返回的组对象插入场景中
    //     })
    // })
    /**
     * FBX 直接渲染
     */
    var mixer=null;//声明一个混合器变量
    var loader = new THREE.FBXLoader();//创建一个FBX加载器
    loader.load("./model/e/legend.fbx", function(obj) {
        // console.log(obj)
        scene.add(obj)
        obj.translateY(-20);
        // obj作为参数创建一个混合器，解析播放obj及其子对象包含的动画数据
        mixer = new THREE.AnimationMixer(obj);
        // 查看动画数据
        console.log(obj.animations)
        // obj.animations[0]：获得剪辑对象clip
        var AnimationAction=mixer.clipAction(obj.animations[0]);
        // AnimationAction.timeScale = 1; //默认1，可以调节播放速度
        // AnimationAction.loop = THREE.LoopOnce; //不循环播放
        // AnimationAction.clampWhenFinished=true;//暂停在最后一帧播放的状态
        AnimationAction.play();//播放动画
    })
    /**
     * 选中模型
     */
    var raycaster =renderer;
    var mouse = loader;

    function onMouseClick(event){
          console.log("dianji ")
        //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
        mouse.x = (event.clientX/window.innerWidth)*2-1
        mouse.y = -((event.clientY/window.innerHeight)*2-1)
         console.log("mouse:"+mouse.x+","+mouse.y)

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

        // 获取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 );
        }
    }
    document.addEventListener('click', onMouseClick);

</script>
</html>