简介:现在很多行业,如果只是一个页面操作那么要求的配置员学习很多东西,在家具装修,工地等我们可以在3D上操作,更加的直观明了,比较直接轻量级,成熟的Three刚好可以满足,我们只需要一个网址就可以完成所有服务,轻量高效。
废话少说上实际的东西:
免费模型网 选择-obj模型--搜索 -free
一些使用场景举例:
依赖下载由于这是老外的东西>我搬到云盘了。
链接: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
本文介绍了如何利用Three.js在家具装修、服装定制、工业生产等领域实现直观的3D操作,通过实际项目和下载资源,展示了如何在网页中轻松加载OBJ模型并进行交互。
1734

被折叠的 条评论
为什么被折叠?



