使用Three.js开发一个3D案例Demo

使用Three.js开发一个3D案例

最近在找工作,发现好多招聘要求都需要会Three.js,以前接触比较多的是2D开发,也就是平面开发,用到的做多的技术就是d3.js,现在3D开发已经成为了大势所趋,所以就学习下Three.js。这是一个简单的demo。

工程目录结构

这是我的工程目录结构:

教程

第一步,准备一个空文件夹

创建一个空文件夹demo

第二步,npm初始化

在该文件夹下执行npm init,初始化工程。

第三步,安装three.js包

在项目根目录下执行下面命令:

bash 复制代码
npm install three@0.148.0 --save
第四步,敲代码环节

在根目录下创建index.html,然后跟着敲...

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="container"></div>
</body>
<script src="./node_modules/three/build/three.js"></script>

<script>
    const scene = new THREE.Scene()

    const geometry = new THREE.BoxGeometry(100, 100, 100)
    //创建一个材质对象Material
    const material = new THREE.MeshBasicMaterial({
        color: 0xff0000,//0xff0000设置材质颜色为红色
    });

    const mesh = new THREE.Mesh(geometry, material)  // 网格模型对象mesh

    mesh.position.set(0, 10, 0)
    scene.add(mesh)

    // 实例化一个透视投影相机对象
    const camera = new THREE.PerspectiveCamera()

    // 相机在Three.js三维坐标系中的位置
    camera.position.set(200, 200, 200)

    // 相机观察目标指向Three.js 3D空间中的某个位置
    camera.lookAt(0, 0, 0)  // 坐标原点

    camera.lookAt(0, 0, 0) // y轴上位置10

    camera.lookAt(mesh.position)  // 指向mesh对应的位置

    // 定义相机输出画布的尺寸(单位:像素px)
    const width = 600
    const height = 600

    // 30:视场角度, width/height: Canvas 画布宽高比, 1:近裁截面,3000:远裁截面
    // const camera = new THREE.PerspectiveCamera(20, width / height, 1, 3000)


    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer()

    // 设置 three.js 渲染区域的尺寸
    renderer.setSize(width, height)
    renderer.render(scene, camera)

    document.body.appendChild(renderer.domElement)

    document.getElementById('container').appendChild(renderer.domElement);

</script>

</html>
第五步,运行

创建本地静态服务器,在项目根目录下执行:

bash 复制代码
live-server

(PS:我这块用的是live-server,也可以用其它的,根据自己的环境来)

效果

来看看效果,创建的是一个长方体。

(PS: 我这块用的是live-server,也可以用其它的,根据自己的环境来)

总结

做过2D平面开发和有点数学基础的都知道,二维坐标系只有X轴,Y轴,3D开发就是比2D开发多了一个Z轴,使用三维坐标构建几何世界。还有就是把我们2D可视化的元素换成立体的几何元素,比如:矩形换成了长方体,圆换成了球体...还有圆锥体,圆柱体等。所以说,技术本身并不复杂,难的是对其技术本身的理解。

相关推荐
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
逐云者1237 小时前
3D Gaussian Splatting (3DGS) 从入门到精通:安装、训练与常见问题全解析
3d·问题·三维重建·高斯泼溅·编译运行
工业3D_大熊7 小时前
HOOPS SDK赋能PLM:打造全生命周期3D数据管理与协作能力
3d·3d web轻量化·3d模型格式转换·3d渲染·3d模型可视化·工业3d·3d模型渲染
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
清纯世纪8 小时前
Arcgis 10.7 矢量的分区统计
arcgis
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~9 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
猫头虎10 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip