html vue 3D之Three.js(第一节)

本文介绍了如何利用Three.js在家具装修、服装定制、工业生产等领域实现直观的3D操作,通过实际项目和下载资源,展示了如何在网页中轻松加载OBJ模型并进行交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介:现在很多行业,如果只是一个页面操作那么要求的配置员学习很多东西,在家具装修,工地等我们可以在3D上操作,更加的直观明了,比较直接轻量级,成熟的Three刚好可以满足,我们只需要一个网址就可以完成所有服务,轻量高效。

废话少说上实际的东西:

   项目地址

    three.js中文文档   中文文档2

    免费模型网 选择-obj模型--搜索 -free

一些使用场景举例:

1:商场沙发

2:服装定制

3:互动洗衣机

4:3D数据

5:工业工厂-物联带控制操作

依赖下载由于这是老外的东西>我搬到云盘了。

百度云盘:

链接:https://pan.baidu.com/s/1W4Qa0fQbWraCoLLQ7QS26w 
提取码: (此页最下面)

第一步:我们下载下来:导入项目中的 的js目录下

 

 

 这里申明一下!如果使用的是-VUE那么 就用:

<iframe src="XXX.3D_There/index.html"></iframe>

 为何不在VUE中直接用呢?这个There就是JQ 如果用VUE 的话会有很多问题,所以直接用这种方式少走弯路。(利用iframe 也可传参哦!)

第二步:先明白弄明白原理---

<!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/OBJLoader.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);



    /**
     * 光源设置
     */
    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 = 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(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模型
    //  */
    // var loader = new THREE.OBJLoader();
    // // 没有材质文件,系统自动设置Phong网格材质
    // loader.load('./model/a/a.obj',function (obj) {
    //     console.log("加载OK")
    //     // 控制台查看返回结构:包含一个网格模型Mesh的组Group
    //     console.log(obj);
    //     // 查看加载器生成的材质对象:MeshPhongMaterial
    //     console.log(obj.children[0].material);
    //     scene.add(obj);
    //     // 加载后的一些编辑操作
    //     obj.children[0].scale.set(20,20,20);//网格模型缩放
    //     obj.children[0].geometry.center();//网格模型的几何体居中
    //     obj.children[0].material.color.set(0xff0000);//设置材质颜色
    //     console.log("加载完成")
    // });



</script>
</html>

百度网盘 There.js 依赖下载
链接:https://pan.baidu.com/s/1W4Qa0fQbWraCoLLQ7QS26w 
提取码:web6 (此页最下面)

测试模型下载:
链接:https://pan.baidu.com/s/1nwJdfeh6EjBb8fxfbRsApg 
提取码:web6

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

加金开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值