HTML+ThreeJS从零开始搭建一个展示三维模型展示网站 【0】
ps 最近在做三维建模相关的工作，每次展示三维模型都需要用blende或者其他软件录制视频或图片特别不方便所以想用threejs html做一个三维模型展示的网页，本次制作只会涉及到简单的前端知识，本人也是边查边用。
1.首先我们来利用最简单的前端知识建一个网页
<html><head><title>day1</title></head><body>//<p></p>用来展示文字<p style="text-align:center">我们将在这里展示三维模型</p></body>
</html>
一个网页的构成，<> </>中是html元素，一般html会包含
2.直奔主题，显示三维模型，显示三维模型当然要threejs了
threejs链接
<html><head><title>day1</title><style>canvas { width: 100%; height: 100% }</style><!-- 导入js的包，js是可以让html执行交互，动态展示的脚本 --><script src="assets/threejs/build/three.js"></script><style>body {margin: 0;background-color: pink;}</style></head><body><!-- <p style="text-align:center">我们将在这里展示三维模型</p> --><script>//<!-- //定义一个场景，场景一般包括相机、灯光、模型，熟悉渲染引擎的应该比较熟悉 -->var scene = new THREE.Scene()//定义一个相机，相机模型是透视模型，window是展示的页面var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)var renderer = new THREE.WebGLRenderer({antialias: true,alpha: true});renderer.setSize(window.innerWidth, window.innerHeight)//html dom 是js用来修改和展示新的东西的方式，详情请见https://www.runoob.com/htmldom/htmldom-tutorial.htmldocument.body.appendChild(renderer.domElement);var geometry = new THREE.BoxBufferGeometry(1, 1, 1);var material = new THREE.MeshBasicMaterial({color: 0xff0000});var cube = new THREE.Mesh(geometry, material); scene.add(cube);camera.position.z = 5;//开始渲染//renderer.render(scene, camera)function render(){requestAnimationFrame(render);cube.rotation.x += 0.1;cube.rotation.y += 0.1;renderer.render(scene, camera);}render();</script></body>
</html>
参考链接
blog
HTML+ThreeJS从零开始搭建一个展示三维模型展示网站 【0】相关推荐
- 从零开始搭建一个属于自己的网站
0基础搭建一个自己的互联网网站 仅供参考 要搭建一个简单的网站首先要有展示的内容,也就是网页,这就需要用到html语言了,有基础的小伙伴可以自己写一个漂亮的网站,没有基础的想要个漂亮的也可以去找度娘, ...
- 教你如何从零开始搭建一个属于自己的网站
写给想要拥有一个自己的网站但没有资金成本的小白与曾经的自己. 前言 虽说是网站,对于个人来说,或许一般叫作博客. 但我不希望它仅仅是一个博客,而是能够成为一个处于自己现实生活之外.自由.实验.不用畏惧 ...
- 从零开始搭建一个GIS开发小框架（一）——基本框架
目录 1.概述 1.1 项目背景 1.2 传送门 2.技术选型:GMap.NET 3.底图功能实现 2.1 方式一:在线地图(以高德为例) 2.2 greatmaps生成底图(瓦片地图) 3.搭建主程 ...
- 从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
- github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 如何利用 GitHub 从零开始搭建一个博客
趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域名是 nightteam.cn,所以这里官方博客使用了二级域名 blo ...
- spring boot：从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器
spring boot:从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器 一.Mybatis plus代码自动生成器 1.引入配置 2.创建Controller 3.执行m ...
- spring boot：从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2
spring boot:从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2 一.logback.xml配置日志美化 二.集成swagger2 1.引入依赖 2.编写配置文件 ...
最新文章
- 嵌入式开发在过去20年中是如何演变的
- LCA 在线倍增法 求最近公共祖先
- Unix信号处理一些笔记
- java中filereader读取文件_java – 如何使用FileReader逐行读取
- 单元测试中使用Mockito模拟对象
- 李宏毅机器学习（八）自编码器（Auto-encoder）
- 图像处理与图像识别笔记（六）图像增强3
- pdo 错误 php,多语句查询中的PHP PDO错误
- java 线程安全的原因_java的多线程:java安全问题产生的原因与JMM的关系
- Mysql开启远程连接方法
- web服务器 apache_如何配置Apache Web服务器
- SSL证书检查吊销状态
- 风控模型中的五大类聚类算法介绍
- 如何给数组用fill函数和memset函数给数组赋初值
- 【地图API】为何您的坐标不准？如何纠偏？
- ZED2+ORB_SLAM3+视觉惯性轨迹保存
- 数据分析八大模型：详解RFM模型
- 智能化API-发票查验接口篇
- 计算机工程博士参军,Gatech计算机工程博士专业排名最全信息详细分析
- UVA - 10306 e-Coins