Three.js基本使用

最新推荐文章于 2024-08-14 14:05:02 发布

ajaxPost293614

最新推荐文章于 2024-08-14 14:05:02 发布

阅读量387

点赞数

分类专栏： three 知识点练习 JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/caoyan0829/article/details/120333398

版权

本文档介绍了three.js的基本使用，包括文件结构、演示效果和关键代码展示。通过阅读，你可以了解到如何利用three.js创建3D场景，并可以参考提供的API地址深入学习。

摘要由CSDN通过智能技术生成

1.文件结构

2.效果（是动图，自己试一下吧）

3.代码


// 创建场景
const scene = new THREE.Scene()

// 创建相机   PerspectiveCamera：透视视角    OrthographicCamera：正射投影
// PerspectiveCamera('视角 60-90','投影窗口长宽比','从距离摄像机多远开始渲染','从距离摄像机多远结束渲染 1000')
let wid = window.innerWidth
let hei = window.innerWidth
const camera = new THREE.PerspectiveCamera(75, wid / hei, 0.1, 1000)

// 相机空间Z轴位置
camera.position.z = 5  //越大看着越小

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

// 设置渲染器场景大小
renderer.setSize(wid, hei)

// 渲染器添加到body中
document.body.appendChild(renderer.domElement)

// 创建几何模型
// BoxBufferGeometry(x,y,z)
c